【前端基础知识】展开运算符（...）的使用_前端展开运算符

功能

1、将数组展开

2、函数中的用法（技巧）

3、使用...进行克隆

4、合并操作

1、将数组展开

// 1、将数组展开
let arr = [1, 2, 3]
console.log(...arr);//1 2 3 

2、函数中的用法（技巧）

需求：假设要做一个求和的函数，但是不能确保传入参数的个数。

// 2、函数中的用法
function sum(...number) {
    console.log(number);//[1,2,3] 参数=》数组
    return number.reduce((pre, cur) => {
        return pre + cur
    })
}
console.log(sum(1, 2, 3));//6

3、使用...进行克隆

// 3、使用...进行克隆
let obj = {
    name: 'dai',
    age: 22,
}
// console.log(...obj);//报错：Uncaught TypeError: Found non-callable @@iterator
let obj1 = { ...obj };
console.log(obj1);//{name: 'dai', age: 22}

4、合并操作

新增属性存在的进行覆盖，不存在的进行合并

// 4、合并操作
let obj = {
    name: 'dai',
    age: 22,
}
let obj2 = { ...obj, name: 'tom', sex: '男' };
console.log(obj2);//{name: 'tom', age: 22, sex: '男'}

以上就是展开运算符（...）的使用。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。