ES6 语法扩展

撰写时间：2022 年 7 月 27日

                        ES6 语法扩展

剩余参数：

认识剩余参数：
const add=(x,y,z,…arg)=>{};
剩余参数的本质===>剩余参数永远是个数组，即使没有值也是一个空数组
const add = (x, y, …arg) => {
console.log(x, y, arg);
}
add(2, 3, 5, 6);// x=2 y=3 arg=[5,6]

剩余参数的默认值
1.箭头函数的剩余参数
箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号：
const add=(…arg)=>{}

2.使用剩余参数代替arguments获取实际的参数:
const add = function () {
// arguments 是一个类数组对象
console.log(arguments);
}
add(1, 2);
const add = (…arg) => {
// 箭头函数中没有arguments对象
// 可以使用剩余参数arg代替arguments
console.log(arg);// arg是一个数组
}
add(1, 2);

3.剩余参数的位置
剩余参数只能是最后一个参数，之后不能再有其他的参数，否则会报错:
const add=(x,y,z,…arg)=>{};

剩余参数的应用:

1.完成add函数
const add = (…arg) => {
let sum = 0;
for (let i = 0; i < array.length; i++) {
sum += arg[i];
}
return sum;
}
add(1, 2, 4, 4, 6, 7, 6)
2.与解构赋值结合使用
剩余参数不一定非要作为函数的参数使用
// 必须是最后一个参数
const [num, …args] = [2, 3, 5, 6, 7];
//const […args,num ] = [2, 3, 5, 6, 7];//报错
console.log(num, args);//args = [3,5,6,7]
// 剩余元素z结合解构对象 z也可以是一个对象
const { x, y, …z } = { x: 3, a: ‘a’, b: ‘b’, y: 2 };
console.log(z);//z={a: “a”,b: “b”}
//函数参数的解构
const func = ({ x, y, …z }) => {
console.log(z);//z={a: “a”,b: “b”}
}
func({ x: 3, a: ‘a’, b: ‘b’, y: 2 })