Vue 对象扩展运算符(…)

当编写一个方法时,我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数,看一个简单的列子:

1

2

3

4

5

6

7

8

function jspang(...arg){

    console.log(arg[0]);

    console.log(arg[1]);

    console.log(arg[2]);

    console.log(arg[3]);

}

jspang(1,2,3);

这时我们看到控制台输出了 1,2,3,undefined,这说明是可以传入多个值,并且就算方法中引用多了也不会报错。

扩展运算符的用处:

我们先用一个例子说明,我们声明两个数组arr1和arr2,然后我们把arr1赋值给arr2,然后我们改变arr2的值,你会发现arr1的值也改变了,因为我们这是对内存堆栈的引用,而不是真正的赋值。

1

2

3

4

5

let arr1=['www','jspang','com'];

let arr2=arr1;

console.log(arr2);

arr2.push('shengHongYu');

console.log(arr1);

控制台输出:

1

2

["www", "jspang", "com"]

["www", "jspang", "com", "shengHongYu"]

这是我们不想看到的,可以利用对象扩展运算符简单的解决这个问题,现在我们对代码进行改造。

1

2

3

4

5

6

7

let arr1=['www','jspang','com'];

//let arr2=arr1;

let arr2=[...arr1];

console.log(arr2);

arr2.push('shengHongYu');

console.log(arr2);

console.log(arr1);

现在控制台预览时,你可以看到我们的arr1并没有改变,简单的扩展运算符就解决了这个问题。

拷贝


合并对象


 微信公众号【码农园区】,技术分享,值得关注

你可能感兴趣的:(Vue,vue.js,javascript,前端)