对象扩展运算符（…）与rest运算符

最新推荐文章于 2022-09-24 22:21:09 发布

weixin_33890526

最新推荐文章于 2022-09-24 22:21:09 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Model-Zachary/p/7087682.html

本文介绍了JavaScript中的对象扩展运算符和rest运算符的使用方法，包括如何利用对象扩展运算符实现数组的深拷贝，以及rest运算符如何收集不定数量的参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对象扩展运算符（…）

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

function xzdemo(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
 
}
xzdemo(1,2,3);

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

扩展运算符的用处：

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

let arr1=['www','xzblogs','com'];
let arr2=arr1;
console.log(arr2);
arr2.push('new');
console.log(arr1);

控制台输出：
["www", "xzblogs", "com"]
["www", "xzblogs", "com", "new"]

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

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

let arr1=['www','jspang','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr2);
console.log(arr1);

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

rest运算符

如果你已经很好的掌握了对象扩展运算符，那么理解rest运算符并不困难，它们有很多相似之处，甚至很多时候你不用特意去区分。它也用…（三个点）来表示，我们先来看一个例子。

function xzdemo(first,...arg){
    console.log(arg.length);
}
 
xzdemo(0,1,2,3,4,5,6,7);
这时候控制台打印出了7，说明我们arg里有7个数组元素，这就是rest运算符的最简单用法。

如何循环输出rest运算符

这里我们用for…of循环来进行打印出arg的值，我们这里只是简单使用一下
function xzdemo(first,...arg){
    for(let val of arg){
        console.log(val);
    }
}
 
xzdemo(0,1,2,3,4,5,6,7);  结果循环出1-7 console.log(1)  console.log(2) …

for…of的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。有的小伙伴会说了，反正最后要转换成ES5，没有什么差别，但是至少从代码量上我们少打了一些单词，这就是开发效率的提高。

转载于:https://www.cnblogs.com/Model-Zachary/p/7087682.html