es6扩展运算符之三个点(...)

前言:初识es6三个点,一脸懵逼.查阅资料慢慢对这个运算符有了些许了解,谨以此做个小小的笔记.

1,首先这个三个点的作用是es6的扩展语法,其作用就是把对象中的所有可遍历的参数属性取出来,拷贝到当前对象中.,其中这三个点的作用和Object.assign({},a)的作用是一样的.

2,如果用...拷贝对象中参数属性的时候,和其他的对象进行合并,当其他对象中属性名字和被拷贝的对象参数属性有相同的名字的时候,其他对象的中值会覆盖用...拷贝的对象的属性的值.

3,还有一定需要注意的是,这个拷贝是属于浅拷贝,在js中,分为两种数据类型,基础数据类型和引用数据类型.常见的基础数据类型有Number、String、Boolean、Null、Undefined,这类变量的拷贝的时候会重新复制一份一样的参数属性,但是在引用数据类型拷贝的的时候,只是拷贝的引用,换句话说就是拷贝的对象的引用地址,原来的地址和拷贝的地址同时指向同一个对象,比如Array.

修改obj1中c的对象的名字之后会发现obj1和obj2的值都发生了变化,这就说明了,Array指向的是同一个对象,只是把对象的地址重新拷贝了一下.

4,...同样可以运用在对数据的操作中,

   a,将数组转换成参数序列

   b,可以复制数组

c,扩展运算符可以与解构赋值结合起来，用于生成数组

注意:如果这样解构赋值联合使用,要把...运算符放到参数的最后一位,否则会报错的.

d.可以将字符串拆分成一个字母一字母的数组

e.实现了 Iterator 接口的对象

上面代码中，querySelectorAll方法返回的是一个NodeList对象。它不是数组，而是一个类似数组的对象。这时，扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了 Iterator .

以上内容为本人工作中遇到不太理解,所以根据阮一峰老师es6入门整理总结,更多关于es6的姿势请看阮一峰老师网站

:http://es6.ruanyifeng.com/?search=map&x=0&y=0#docs/array#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6