剩余参数Rest Parameter

args是剩余参数的名

const add = (x, y, ...args) => { };

注，
1）用在箭头函数中，不可省略圆括号即使只有一个参数

 const add = (...args) => { };

2）多个参数时，写在最后否则会报错

本质是数组

const add = (x, y, ...args) => {
    console.log(x, y, args);
};
add();//undefined undefined []
add(1, 2);//1 2 []
add(1, 2, 3, 4);//1 2 (2)[3,4]

应用-用数组的reduce方法写求和函数

1）数组

const getSum = (...args) => {
    let sum = 0;
    for (let i = 0; i < args.length; i++) {
        sum += args[i];
    }
    return sum;
};
console.log(getSum());//0
console.log(getSum(1, 1));//2
console.log(getSum(1, 2, 3));//6

2）数组的reduce方法

function sum(total, num) {
  return total + num;
}
function sumResult(...args) {
  // 函数嵌套
  return args.reduce(sum);
}
console.log(sumResult(1, 2, 4)); // 7

3）reduce方法用法

var numbers = [65, 44, 12, 4];
 function sum(total, num) {
   return total + num;
 }
 console.log(numbers.reduce(sum));//125

可替代arguments

对一般函数

1）用剩余参数获取实参,得到数组

const add = function (...args) {
    console.log(args);
}

2）用arguments获取实参,得到类数组

const add = function () {
    console.log(arguments);
}

对箭头函数

只能用剩余参数获取实参，箭头函数无arguments属性

const add = (...args) => {
    console.log(args);
};
add(1, 2);

与解构赋值结合时，叫剩余元素

1）剩余元素 + 数组解构赋值

const [num, ...args] = [1, 2, 3, 4];

2）剩余元素 + 数组解构赋值 + 箭头函数

const func = ([num, ...args]) => { };
func([1, 2, 3]);

3）剩余元素 + 对象解构赋值

const { x, y, ...z } = { a: 1, x=2, y=3, b=4 };

4）剩余元素 + 对象解构赋值 + 箭头函数

const func = ({ x, y, ...z }) => { };
func({ a: 1, x=2, y=3, b=4 });