JS 扩展运算符有哪些使用场景？

ops/2024/9/19 23:30:07/ 标签: javascript, 前端

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

扩展运算符有哪些使用场景？直接进入正题

一、复制数组

javascript">const a1 = [1, 2];// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

二、合并数组

javascript">const part1 = [1, 2, 3];  
const part2 = [4, 5, 6];  
const all = [...part1, ...part2];  
console.log(all); // 输出: [1, 2, 3, 4, 5, 6]

三、数组去重

javascript">const numbers = [1, 2, 2, 3, 3, 4, 5, 5];  
const uniqueNumbers = [...new Set(numbers)];  
console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]

四、函数参数数量不固定

javascript">function sum(...numbers) {  return numbers.reduce((total, current) => total + current, 0);  
}  console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

五、函数剩余参数

javascript">function sum(x, ...numbers) {  return numbers.reduce((total, current) => total + current, 0);  
}  console.log(sum(1, 2, 3, 4, 5)); // 输出: 14

六、将类数组转为真数组

javascript">// arguments对象
function foo() {const args = [...arguments];
}// NodeList对象
[...document.querySelectorAll('div')]

七、将数组转为参数序列

javascript">function add(x, y) {return x + y;
}const numbers = [4, 38];
add(...numbers) // 42

八、获取数组最大值或最小值

javascript">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

九、剩余元素组成的数组

javascript">const [first, ...rest] = [1, 2, 3, 4, 5];  
console.log(first); // 输出: 1  
console.log(rest); // 输出: [2, 3, 4, 5]

十、字符串转为数组

javascript">const str = "hello";  
const letters = [...str];  
console.log(letters); // 输出: ['h', 'e', 'l', 'l', 'o']

十一、浅拷贝对象

javascript">const obj1 = { a: 1, b: 2 };  
const obj2 = { ...obj1 };  
console.log(obj2); // 输出: { a: 1, b: 2 }

注意：如果obj1的属性值是对象，那么obj2中对应的属性将是一个引用，而不是一个新的对象。

十二、浅拷贝对象并添加新属性

javascript">const person = {  name: 'John',  age: 30,  gender: 'male'  
}; 
// 复制对象并添加新属性  
const personWithJob = {  ...person,  job: 'Developer'  
};  
console.log(personWithJob);
// 输出: { name: 'John', age: 30, gender: 'male', job: 'Developer' }

十三、添加和修改原对象属性

javascript">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' }

十四、合并对象

javascript">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 }  
// 注意：如果有同名属性，后面的属性会覆盖前面的属性

十五、剩余键值对组成的对象

javascript">const { a, ...rest } = { a: 1, b: 2, c: 3 };  
console.log(a); // 输出: 1  
console.log(rest); // 输出: { b: 2, c: 3 }

十六、注意事项

1.如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

javascript">const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

2.在对象中解构赋值时，必须是最后一个参数，否则会报错。

javascript">let { ...x, y, z } = someObject; // 句法错误
let { x, ...y, ...z } = someObject; // 句法错误

3.复制数组和拷贝对象时，都是浅拷贝。

javascript">// 数组
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，证明对象类型属性是引用复制（浅拷贝）