你好，我是沐爸，欢迎点赞、收藏、评论和关注。
扩展运算符有哪些使用场景？直接进入正题
一、复制数组
const a1 = [1, 2];// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
二、合并数组
const part1 = [1, 2, 3];
const part2 = [4, 5, 6];
const all = [...part1, ...part2];
console.log(all); // 输出: [1, 2, 3, 4, 5, 6]
三、数组去重
const numbers = [1, 2, 2, 3, 3, 4, 5, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]
四、函数参数数量不固定
function sum(...numbers) { return numbers.reduce((total, current) => total + current, 0);
} console.log(sum(1, 2, 3, 4, 5)); // 输出: 15
五、函数剩余参数
function sum(x, ...numbers) { return numbers.reduce((total, current) => total + current, 0);
} console.log(sum(1, 2, 3, 4, 5)); // 输出: 14
六、将类数组转为真数组
// arguments对象
function foo() {const args = [...arguments];
}// NodeList对象
[...document.querySelectorAll('div')]
七、将数组转为参数序列
function add(x, y) {return x + y;
}const numbers = [4, 38];
add(...numbers) // 42
八、获取数组最大值或最小值
const numbers = [1, 2, 3, 4, 5];
const max = Math.max(...numbers);
console.log(max); // 输出: 5 const min = Math.min(...numbers);
console.log(min); // 输出: 1
九、剩余元素组成的数组
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 输出: 1
console.log(rest); // 输出: [2, 3, 4, 5]
十、字符串转为数组
const str = "hello";
const letters = [...str];
console.log(letters); // 输出: ['h', 'e', 'l', 'l', 'o']
十一、浅拷贝对象
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // 输出: { a: 1, b: 2 }
注意：如果obj1的属性值是对象，那么obj2中对应的属性将是一个引用，而不是一个新的对象。
十二、浅拷贝对象并添加新属性
const person = { name: 'John', age: 30, gender: 'male'
};
// 复制对象并添加新属性
const personWithJob = { ...person, job: 'Developer'
};
console.log(personWithJob);
// 输出: { name: 'John', age: 30, gender: 'male', job: 'Developer' }
十三、添加和修改原对象属性
let person = { name: 'John', age: 30, gender: 'male'
};
// 复制对象并添加新属性
person = { ...person, age: 31,job: 'Developer'
};
console.log(person);
// 输出: { name: 'John', age: 31, gender: 'male', job: 'Developer' }
十四、合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 输出: { a: 1, b: 3, c: 4 }
// 注意：如果有同名属性，后面的属性会覆盖前面的属性
十五、剩余键值对组成的对象
const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(a); // 输出: 1
console.log(rest); // 输出: { b: 2, c: 3 }
十六、注意事项
1.如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错
2.在对象中解构赋值时，必须是最后一个参数，否则会报错。
let { ...x, y, z } = someObject; // 句法错误
let { x, ...y, ...z } = someObject; // 句法错误
3.复制数组和拷贝对象时，都是浅拷贝。
// 数组
const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];a3[0] === a1[0] // true
a4[0] === a1[0] // true// 对象
const original = { a: 1, b: { c: 2 } }; // 使用扩展运算符进行浅拷贝
const copy = { ...original };
console.log(copy); // 输出: { a: 1, b: { c: 2 } }
original.a = 10;
console.log(copy.a); // 输出: 1
original.b.c = 20;
console.log(copy.b.c); // 输出: 20，证明对象类型属性是引用复制（浅拷贝）
好了，分享结束，谢谢点赞，下期再见。