...语法的使用

…语法的使用

使用情景

在函数调用/数组构造时，将数组表达式或者string在语法层面展开、
注：只可以展开一层，对多层的无效
即：

var aaa = [1, 2, [3, 4]];
var bbb = [...aaa];
console.log(bbb);// ▶[1, 2, Array(2)]
console.log(...bbb);//1 2 ▶(2) [3, 4]

eg:

// 存在这样的一个字符串
//进行...操作
var str = '春,夏,秋,冬'; 

字符串转为数组

var str = '春0夏0秋0冬'; 
var arr = [...str];
console.log(arr)//['春','0','夏','0','秋','0','冬']

...语法也实现了将字符串转化为数组，但是无法选择分割符
因此对于字符串转化为数组我们仍使用

var str = '春0夏0秋0冬'; 
var arr = str.split('0');
console.log(arr)//['春','夏','秋','冬']

数组和对象的复制

数组：

var str = ['春','夏','秋','冬']; 
var arr = [...str];
console.log(arr)//['春','夏','秋','冬']

对象：

var obj = {
name:'张三',
age:18,
sex:'男'
}; 
var arr = {...obj};
console.log(arr)//{name:'张三',age:18,sex:'男'}

注意： 复制数组使用[...变量名]，复制对象使用{...变量名}

对象的合并

var obj = {name:'李四'}; 
var obj1 = {age:22}; 
var obj2 = {sex:'女'}
var new_obj ={...obj,...obj1,...obj2}
console.log(new_obj)//{name:'李四',age:22,sex:'女'}

对象的深拷贝

对于上方合并的数组，我们对new_obj进行操作

var obj = {name:'李四'}; 
var obj1 = {age:22}; 
var obj2 = {sex:'女'}
var new_obj ={...obj,...obj1,...obj2}
console.log(new_obj)//{name:'李四',age:22,sex:'女'}
new_obj.name = '赵六';
new_obj.age= 88;
new_obj.sex = '未知';
//此时，我们查看旧原来的对象，已经new_obj的对象
console.log(new_obj)//{name:'赵六',age:88,sex:'未知'}
console.log(obj)//{name:'李四'}
console.log(obj1)//{age:22}
console.log(obj2)//{sex:'女'}

因此： 使用...进行的是深拷贝。

调用函数的时候使用(我们会更常用到的情况)

需要将数组中的元素,分割为单个实参穿递

function fn(x, y, z) {
  console.log(x, y, z);
}
var arr = ['雨声', '淅沥沥', '哗啦啦'];
fn(...arr)      //  雨声 淅沥沥 哗啦啦

或者说

function fn1(...arr) {
  console.log(arr);
}
fn1('滴滴答答', '噼里啪啦', '喝茶看书')       // ['雨声', '淅沥沥', '哗啦啦']

即：我们用...语法把数组转化为多个参数传递给函数，也可以把多个函数使用...转化回数组的形式