ES6 扩展运算符
...
数组
说到...
(三个点),rest
用于获取函数的多余参数。
而扩展运算符...
,它与rest参数
相反,rest
用一个变量数组的值去表达多个参数,而这里的扩展运算符,相当于将一个数组的值以特殊字符去分隔而得到的
示例:
var a=[1,2,3]
console.log('a=',a)
console.log('...a=',...a)
应用
1.复制数组
对于只有一层的数组复制为深复制,即数组中不包含对象,否则为浅复制。(深浅复制的区别)
一层数组深复制:
var a=[1,2,3]
var c=[...a]//先试用...去提取分离多个数据,然后在使用[]转成数组
a[0]=9;
console.log('a=',a)
console.log('c=',c)
二层浅复制:
var a=[{a:1},2,3]
var c=[...a]
a[0].a=9;
console.log('a=',a)
console.log('c=',c)
2.合并数组
ES5
使用concat
合并数组
ES6
可以使用...
将数组转成以特殊字符分隔数值,然后使用[]转成数组就是合并数组。
示例:
var a=[4,5,6];
var c=[1,2,...a]
输出:[1,2,4,5,6]
加深记忆理解:...
将数组以特殊字符分隔,那么a
就分隔为4 5 6
然后又用[]
转成数组所以就是[1,2,4,5,6]
3、...
既然数组以特殊字符分隔,那么就有解构赋值
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
// 来自于`ES6` 标准入门
4、...
可以将iterator
接口的数据以特殊字符分隔,那么字符串亦可(ES6
中为其添加了Iterator
接口)转为数组
var a='hello world'
console.log('=',...a)
对上述分隔成单独的数据以[]
转为数组即可
如下:
var a='hello world'
console.log('=',[...a])
总结
任何具有iterator
接口数据都可以通过扩展运算符...
以特殊字符分割,然后使用[]
转成数组
对象
说完了数组中的扩展运算符,而这里的对象运算符,其实一定程度上和数组的区别不大,而区别在于数组在其分割后的数据依旧具备iterator
结构,而这里对象因为直接提取属性,那么是一个key value
(形象上),是不具备iterator
的所有会报错。ES2017
引入对象上的扩展运算符...
应用
没什么可说的。参考数组。只要具备iterator接口的都可以使用
1.复制
深复制(和数组一样一层数据为深复制)
var a={b:1,c:1}
var d={...a}
a.b=3;
console.log('a=',a)
console.log('a=',d)
浅复制(数据结构超过一层):
2.合并对象(如果两者有相同的属性,那么后者会替换前者)
var a={b:1,c:2}
var d={e:3,f:4}
var g={...a,...d};
//var g={..a,d}//输出为{{b:1,c:2,d:{e:3,f:4}},在这里d没有去提取
console.log('a=',a) //输出{b:1,c:2}
console.log('g=',g) //输出{b:1,c:2,e:3,f:4}
//其他的参考数组,只要居右iterator结构的都可以使用...
总结
和数组中的扩展运算符大致一致,同样是使用...
将对象中的属性和值提取出来。这里面和数组的区别是数组可以不用[]
去转,因为其分割后的数据依旧具备iterator
结构,而这里因为直接提取属性,是不具备iterator
的所有会报错。
例如:
var a={b:1,c:2}
console.log(...a)
报错:
而用{}
包括以下变为iterator
之后就不会报错.
总结
对于数组和对象的扩展运算符使用时。使用之后的数据依然具备iterator
结构,否则报错(对象使用之后无{}则就会报错,而数组因为其扩展后依然具备所以不会报错)
千里之行
始于足下