ES6的rest参数与spread扩展运算符

1.rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments，作用与arguments类似，将接收的参数序列转换为一个数组对象 （arguments是伪数组）

语法格式：fn(a, b,  ...args)  ,写在参数列表的最后面

应用场景:rest参数非常适合不定个数参数函数的场景

let fn = (a, b, ...args) => {
  console.log(a);
  console.log(b);
  console.log(args);
};
fn(1,2,3,4,5);

// 1 2 Array(4)

案例1：求不定个数数字的和

let add = (...args) => {
    let sum = args.reduce((pre, cur) => pre + cur, 0);
    return sum;
}
console.log(add(1, 2, 3, 4, 5)); // 15

2.spread 扩展运算符

扩展运算符 spread  也是三个点 ...  它好比rest参数的逆运算，将一个数组、伪数组转为用逗号分隔的参数序列，对数组进行解包，扩展运算符也可以将对象解包。

可用在调用函数时，传递的实参，将一个数组转换为参数序列（与rest参数的区别，一个用在形参，一个实参）

展开数组

function fn(a, b, c) {
    console.log(arguments);
    console.log(a + b + c);
}
let arr = ['red', 'green', 'blue']; 
fn(...arr)
// [Arguments] { '0': 'red', '1': 'green', '2': 'blue' }
// redgreenblue

案例1：数组合并

let A = [1, 2, 3];
let B = [4, 5, 6];
let C = [...A, ...B];
console.log(C); // [1, 2, 3, 4, 5, 6]

案例2：数组克隆，这种数组克隆属于浅拷贝

let arr1 = ['a', 'b', 'c'];
let arr2 = [...arr1];
console.log(arr2); // ['a', 'b', 'c']

案例3：将伪数组转换为真实数组

const divs = document.querySelectorAll('div');
let divArr = [...divs];
console.log(divArr);

案例4：对象合并

let obj1 = {
    a: 123
};
let obj2 = {
    b: 456
};
let obj3 = {
    c: 789
};
let obj = { ...obj1, ...obj2, ...obj3 };
console.log(obj);
// { a: 123, b: 456, c: 789 }