... 大有作为

今天的内容非常简单，但是学会了省很多事。

在 JavaScript 中，“...” 有两个作用：

作用一：剩余参数

如果一个函数有未知多个参数，可以使用 “...” ，如下代码，计算多个数相加：

function sumRest(...args) {
    return args.reduce((pre, cur) => {
        return pre + cur;
    });
}

使用：

console.log('sum2 = ', sumRest(1, 3, 5)); // 9
console.log('sum2 = ', sumRest(1, 3, 5, 2, 4, 6)); // 21
console.log('sum2 = ', sumRest(2)); // 2

可以把 args 看做是一个数组，数组的基本操作可以看 JavaScript 内置对象数组 这节课程。

它不同于函数的自带属性 arguments，arguments 不是数组，包含了函数所有参数，而 args 只包含了省略的参数。

比如函数 show 中的 args 只包含 1，2，3 这三个值，而 arguments 包含了 1，2，3，suyan：

function show(name, ...args) {   
}
show('suyan', 1, 2, 3);

作用二：展开操作

例1：函数调用

一个数组中的元素，恰好是某个函数的参数，如下代码：

function sum(x, y, z) {
    return x + y + z;
}
const nums = [1, 3, 5];
let ret = sum(nums[0], nums[1], nums[2]);

有一种更简单的方法，是不是有一种心花怒放的感觉：

let ret = sum(...nums);

还可以利用 函数中的 this 不止有 72 变 这节课程学到的 apply：

ret = sum.apply(null, nums);

例2：合并对象

不仅如此，有时候，我们创建对象的时候使用另一个对象中的属性，如下代码：

const person = {
    name: 'suyan',
    age: 20
};


const suyan = {
    ...person,
    from: 'BaoTou'
};
console.log(suyan);

例3：数组操作

const animals = ['dog', 'cat'];
const allKind = ['person', ...animals, 'bird'];
console.log(allKind);

例4：对象属性重复处理

const lefex = {
    ...person,
    name: 'lefex'
};
console.log('lefex', lefex);

const lefex2 = {
    name: 'lefex',
    ...person
};
console.log('lefex2', lefex2);

这就是关于“...” 的操作，真的是大有作为，大家加油！！！

---

推荐阅读：

函数中的 this 不止有 72 变
连接你、我、他 —— this
&& ，|| 超越了我的认知
2020年我对大前端的认知