扩展运算符和rest运算符

简介: 扩展运算符和rest运算符

对象扩展运算符(…):


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

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的值也改变了,因为我们这是对内存堆栈的引用,而不是真正的赋值。

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


控制台输出:

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


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

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 jspang(first,...arg){
    console.log(arg.length);
}
jspang(0,1,2,3,4,5,6,7);


这时候控制台打印出了7,说明我们arg里有7个数组元素,这就是rest运算符的最简单用法。

如何循环输出rest运算符

这里我们用for…of循环来进行打印出arg的值,我们这里只是简单使用一下,以后我们会专门讲解for…of循环。

function jspang(first,...arg){
    for(let val of arg){
        console.log(val);
    }
}
jspang(0,1,2,3,4,5,6,7);


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

目录
相关文章
|
6月前
|
JavaScript
|
7天前
|
数据处理 Swift
Swift 中的运算符和表达式是构建程序逻辑的基础,包括算术、关系、逻辑、位运算符及赋值运算符,用于数值计算、条件判断、位操作、赋值与更新等
Swift 中的运算符和表达式是构建程序逻辑的基础,包括算术、关系、逻辑、位运算符及赋值运算符,用于数值计算、条件判断、位操作、赋值与更新等。掌握这些工具是编写高效代码的关键。
13 1
|
2月前
|
C++
【C++基础】运算符详解
这篇文章详细解释了C++中运算符的用法,包括算术运算符、赋值运算符、比较运算符和逻辑运算符,以及它们在表达式中的作用和示例。
29 2
|
3月前
|
存储 JavaScript 前端开发
es6 扩展运算符
【8月更文挑战第20天】
21 0
|
6月前
|
存储 网络架构
ES6之rest参数、扩展运算符
ES6之rest参数、扩展运算符
|
6月前
|
JavaScript 前端开发
扩展运算符详细使用方法
扩展运算符详细使用方法
48 2
|
前端开发
形成新数组的方式扩展运算符
形成新数组的方式扩展运算符
42 0
|
存储 Java
基础二:操作符
基础二:操作符
91 0