第四节、rest运算符和扩展运算符
2018-01-23 19:42
337 查看
扩展运算符和rest运算符,它们都是 … 。就是三个点、三个点、三个点,不是省略号。
ES6 引入 rest 参数(形式为
如果你已经很好的掌握了对象扩展运算符,那么理解rest运算符并不困难,它们有很多相似之处,甚至很多时候你不用特意去区分。它也用…(三个点)来表示,我们先来看一个例子。
这时候控制台打印出了4,说明我们arg里有4个数组元素,这就是rest运算符的最简单用法。
这里我们用for…in(或者for…of)循环来进行打印出arg的值,我们这里只是简单使用一下,以后我们会专门讲解for…in(或者for…of)循环。
扩展运算符(spread)是三个点(
当编写一个方法时,我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数,看一个简单的列子:
这时我们看到控制台输出了
1,2,undefined,这说明是可以传入多个值,并且就算方法中引用多了也不会报错。
(1)解构赋值
对象的解构赋值用于从一个对象取值,相当于将所有可遍历的、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。
上面代码中,变量
注意,解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。
(2)扩展运算符
扩展运算符(
扩展运算符的用处:
我们先用一个例子说明,我们声明两个数组arr1和arr2,然后我们把arr1赋值给arr2,然后我们改变arr2的值,你会发现arr1的值也改变了,因为我们这是对内存堆栈的引用,而不是真正的赋值。
控制台打印的两个数组是一样的,这是我们不想看到的,可以利用对象扩展运算符简单的解决这个问题,现在我们对代码进行改造。
现在控制台预览时,你可以看到我们的arr1并没有改变,简单的扩展运算符就解决了这个问题。
总结:我们这节课学习了对象扩展运算符和reet运算符,它们两个还是非常类似的,但是你要自己区分,这样才能在工作中运用自如。在以后的课程中还会有很多关于扩展运算符和rset运算符的妙用,让我们一起期待吧。
rest运算符
ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用
arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
如果你已经很好的掌握了对象扩展运算符,那么理解rest运算符并不困难,它们有很多相似之处,甚至很多时候你不用特意去区分。它也用…(三个点)来表示,我们先来看一个例子。
function restMethods(first,...arg) { console.log(arg.length) } restMethods(0,1,2,3,4);
这时候控制台打印出了4,说明我们arg里有4个数组元素,这就是rest运算符的最简单用法。
这里我们用for…in(或者for…of)循环来进行打印出arg的值,我们这里只是简单使用一下,以后我们会专门讲解for…in(或者for…of)循环。
function restMethods(first,...arg) { for(let item in arg){ console.log(item); } } restMethods(0,1,2,3,4);
数组扩展运算符(…):
扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3]) // 1 2 3
对象扩展运算符(…):
当编写一个方法时,我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数,看一个简单的列子:function addMore(...arg) { console.log(arg[0]); console.log(arg[1]); console.log(arg[2]); } addMore(1,2);
这时我们看到控制台输出了
1,2,undefined,这说明是可以传入多个值,并且就算方法中引用多了也不会报错。
(1)解构赋值
对象的解构赋值用于从一个对象取值,相当于将所有可遍历的、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; console.log(x); // 1 console.log(y); // 2 console.log(z); // { a: 3, b: 4 }
上面代码中,变量
z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键(
a和
b),将它们连同值一起拷贝过来。
注意,解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。
let obj = { a: { b: 1 } }; let { ...x } = obj; obj.a.b = 2; console.log(x.a.b) // 2
(2)扩展运算符
扩展运算符(
...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。这等同于使用
Object.assign方法。
扩展运算符的用处:
我们先用一个例子说明,我们声明两个数组arr1和arr2,然后我们把arr1赋值给arr2,然后我们改变arr2的值,你会发现arr1的值也改变了,因为我们这是对内存堆栈的引用,而不是真正的赋值。
let arr1 = [1,2,3]; let arr2 = arr1; arr2.push(4); console.log(arr1); //[1,2,3,4] console.log(arr2); //[1,2,3,4]
控制台打印的两个数组是一样的,这是我们不想看到的,可以利用对象扩展运算符简单的解决这个问题,现在我们对代码进行改造。
let arr1 = [1,2,3]; let arr2 = [...arr1]; console.log(arr2); //[1,2,3] arr2.push(4); console.log(arr1); //[1,2,3] console.log(arr2); //[1,2,3,4]
现在控制台预览时,你可以看到我们的arr1并没有改变,简单的扩展运算符就解决了这个问题。
相关文章推荐
- ES6 rest参数和扩展运算符
- ES6 rest参数和扩展运算符
- ES6---扩展运算符和rest‘...’(三点运算符),在数组、函数、set/map等中的应用
- ES6-rest参数和扩展运算符
- es6中的解构赋值、扩展运算符和rest参数使用详解
- es6 学习笔记 之 扩展运算符 和 rest运算符
- es6扩展运算符,rest运算符,箭头函数,
- ES6学习之路3----rest参数与扩展运算符
- rest 参数与扩展运算符
- ES6---扩展运算符和rest‘...’(三点运算符),在数组、函数、set/map等中的应用
- rest 参数和扩展运算符
- ES6(六: 函数扩展)(默认值,rest参数,扩展运算符)
- 在es6中,对rest参数和扩展运算符的理解(待更新)
- JavaScript ...运算符(扩展运算符)以及rest运算符介绍
- ES6 rest与扩展运算符
- ES6中的rest参数与扩展运算符详解
- 对象扩展运算符和rest运算符
- ES6-rest参数和扩展运算符
- 记录一下ES6扩展运算符(三点运算符)...的用法
- 妙用ES6解构和扩展运算符让你的代码更优雅