扩展运算符常见的所有应用场景(90%的人都进过第八个的坑)

适用类型：数组、对象、字符串。

/*数组的扩展*/
[...[1, 2, 3]]  //[1,2,3]
[...[], 1]  //[1]
console.log(1, ...[2, 3], 4)  //1 2 3 4
new Date(...[2015, 1, 1]);

/*对象的扩展*/
{...{a:1},b:2} //{a:1,b:2}
console.log({...{a:1},...{b:2}})  //{a: 1, b: 2}

/*字符串的扩展*/
[...[1,2,3],..."qqq"]  //[1, 2, 3, "q", "q", "q"]

const data = {
	id:123,
	msg:{
	    detail:321
    }
}
const { msg:{ detail } } = data
console.log(detail);  // 321

const data = {};
const { msg = {}} = data;
const detail = msg. detail;
console.log(msg,detail);  // {}   undefined

扩展运算符的应用场景

1、函数调用

function add(x, y) {
  return x + y;
}
add(...[4, 38]);

function f(v, w, x, y, z) {  }
f(-1, ...[0, 1], 2, ...[3]);

2、往数组里push多个元素

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);  
console.log(arr1); //[0,1,2,3,4,5]

3、替代函数的apply方法

function f(x, y, z) {  }  
var args = [0, 1, 2];
f.apply(null, args); //ES5 的写法
f(...args); //ES6的写法

4、求一个数组的最大数简化

Math.max.apply(null, [14, 3, 77])  //ES5 的写法
Math.max(...[14, 3, 77])  //ES6 的写法，等同于Math.max(14, 3, 77)

5、扩展运算符后面可以放表达式

const arr = [...(5 > 0 ? ['a'] : []),'b'];
console.log(arr);  //['a','b'] 

6、与解构赋值结合，用于生成数组

const a1 = [1, 2];
const a2 = [...a1];  //写法1
const [...a2] = a1;  //写法2

const [first, ...rest] = [1, 2, 3, 4, 5];
first  //1
rest  //[2, 3, 4, 5]

const [first, ...rest] = [];
first  //undefined
rest  //[]

const [first, ...rest] = ["foo"];
first  //"foo"
rest   //[]

7、合并数组

[...arr1, ...arr2, ...arr3]  //[ 'a', 'b', 'c', 'd', 'e' ]

8、数组的克隆（坑在这儿 , 特别注意）

var arr1 = [0, 1, 2];
var arr2 = [...arr1];
arr1[0]=100;
console.log(arr2); //[0, 1, 2]  

/* 乍一看，arr2与arr1不共用引用地址，arr2不随着arr1变化，接着往下看 */

var arr1 = [0, [1,11,111], 2];
var arr2 = [...arr1];
arr1[1][0]=100;
console.log(arr2); //[0, [100,11,111], 2]

/* 通过打印结果发现，arr2与arr1里边的二维数组共用一块引用地址 */
结论：用一个扩展运算符，并不能实现复合对象类型的深克隆。

注意：项目开发中，遇到复合数据确认已经改变，页面上却没更新的情况，可以从
这块考虑进行排除。楼主从事的是React开发，入过坑，贴出来，希望能给大家带
来一些解决问题的思路。