扩展运算符（...）的作用及使用场景

1、对象扩展运算符

对象的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

 上述方法等价于：

let bar = {a:1, b:2};
let baz = Object.assign({},bar);    // { a:1, b:2 }

Object.assign方法用于对象的合并，将原对象（source）的所有可以枚举属性，复制到目标对象（target）。

注：Object.assign 方法的第一个参数是目标对象， 后面的参数都是源对象。 (如果目标对象与源对象有同名属性， 或多个源对象有同名属性， 则后面的属性会覆盖前面的属性)。

同样， 如果用户自定义的属性， 放在扩展运算符后面， 则扩展运算符内部的同名属性会被覆盖掉。

let bar = { a:1, b:2 }
let baz = {...bar,...{a:2, b:4}}    // {a:2, b:4}

注： 扩展运算符对对象实例的拷贝属于浅拷贝。

2、数组扩展运算符

数组的扩展运算符可以将一个数组转为用逗号分隔的参数序列，且每次只能展开一层数组。

console.log(...[1, 2, 3])                // 1 2 3
console.log(...[1, [2, 3, 4], 5])        // 1 [2, 3, 4] 5

复制数组

const arr1 = [1, 2];
const arr2 = [...arr1];

合并数组

const arr1 = ['two', 'three'];
const arr2 = ['one', ...arr1, 'four', 'five'];
​​​​​​​// ["one", "two", "three", "four", "five"]

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

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

 (如果将扩展运算符用于数组赋值， 只能放在参数的最后一位， 否则会报错。)

使用   Math函数获取数组中特定的值​​​​​​​

const numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
Math.max(...numbers); // 9

注： 扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中，这里参数对象是个数组，数组里面的所有对象都是基础数据类型，将所有基础数据类型重新拷贝到新的数组中。