es,js系列教程之扩展运算符和rest运算符（三）

扩展运算符

扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值

• 拆分数组

扩展运算符可以直接把数组拆分成用逗号隔开的值

const arr=[1,2,3,4,5,6];
console.log(...arr);    //1 2 3 4 5 6

function change(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var val = [1, 2, 3]
// 之前的写法
change(val[0],val[1], val[2]);

// 扩展运算符写法
change(...val);  
  

• 数组深拷贝

可以使用扩展运算符特性进行数组的深拷贝

let arr1 = [1, 2, 3];
let arr2 = arr1;
let arr3 = [...arr1];
console.log(arr1 === arr2);   // true, 说明arr和arr2指向同一个数组
console.log(arr1 === arr3);   // false, 说明arr3和arr指向不同数组

• 数组合并

扩展运算符可以进行数组的合并，把其他的东西合并成一个新的数组

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6];
console.log(arr2);   // [1,2,3,4,5,6]

• 字符串转数组

扩展运算符可以直接把字符串拆分用逗号分隔开的数组

let str = 'love';
let arr = [...str];
console.log(arr);  //["l", "o", "v", "e"]

rest运算符

rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

• 直接合并成数组

function fn(...val) {
    console.log(val);
}
fn(1, 2, 3, 4);  // [1, 2, 3, 4]

• 部分合并成数组

function bar(a, ...b) {
    console.log(a);
    console.log(b);
}
bar(1, 2, 3, 4);  // 1 [2,3,4]

• 利用解构来合成数组

let [a, ...b] = [1, 2, 3, 4];
console.log(a);  // 1
console.log(b);  //[2,3,4]

在调用第三方函数的时候，如果该函数接受多个参数，并且你要传入的实参为数组，则使用扩展运算符。可以避免使用下标形式传入参数。也可以避免很多人习惯的使用apply方法传入数组。
rest运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免arguments对象的使用。

测试题：

1、 最终输出是什么值？

let arr1=[1,2,3];
let arr2=[4,5,6];
console.log([...arr2,...arr1]);

var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
var obj3 = obj;

console.log(obj == obj2)
console.log(obj == obj3)

2、 最终输出是什么值？

function foo(...args){
    for(let arg of args){
        console.log(arg);
    }
}
foo('a','b','c','d');

3、 最终输出是什么值？

let arr3=['a','b','c','d'];
let [arg1,...arg2]=arr3;
console.log(arg1);
console.log(arg2);