犟驴学编程

# 展开运算符

作者: 多叉树；转载须注明出处

# 介绍

基本用法

展开运算符（Spread Operator）使用三个点（...）来展开一个可迭代对象，如数组。它可以在函数调用、数组字面量和对象字面量中使用。

const arr = [1, 2, 3];
console.log(...arr); // 输出: 1 2 3

const newArr = [...arr, 4, 5];
console.log(newArr); // 输出: [1, 2, 3, 4, 5]

区分剩余参数和展开运算符

虽然剩余参数和展开运算符都使用...语法，但它们的用途不同：

  • 剩余参数：用于函数参数，将多个参数收集到一个数组中。
  • 展开运算符：用于展开一个可迭代对象。
// 剩余参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

// 展开运算符
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 输出: 6

# 展开数组

1. 合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // 输出: [1, 2, 3, 4, 5, 6]

2. 复制数组

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // 输出: [1, 2, 3]

3. 将字符串转换为字符数组

const str = "Hello";
const chars = [...str];
console.log(chars); // 输出: ['H', 'e', 'l', 'l', 'o']

4. 在函数调用中使用

function myFunction(x, y, z) {
  console.log(x, y, z);
}

const args = [0, 1, 2];
myFunction(...args); // 输出: 0 1 2

# 展开对象

基本用法

对象展开运算符也使用三个点（...）来展开一个对象的属性。它可以在对象字面量中使用，用于合并对象或创建对象的浅拷贝。

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

注意事项

  • 展开运算符只会复制对象的可枚举属性。
  • 如果有重复的属性名，后面的属性会覆盖前面的属性。
  • 展开运算符进行的是浅拷贝，不会复制嵌套对象。
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1, b: { d: 3 } };
console.log(obj2); // 输出: { a: 1, b: { d: 3 } }

展开对象应用

1. 合并对象

const defaults = { theme: 'light', fontSize: 12 };
const userPreferences = { fontSize: 14 };
const settings = { ...defaults, ...userPreferences };
console.log(settings); // 输出: { theme: 'light', fontSize: 14 }

2. 创建对象的浅拷贝

const original = { x: 1, y: 2 };
const copy = { ...original };
console.log(copy); // 输出: { x: 1, y: 2 }

3. 在函数调用中使用

function createUser(name, age, ...otherInfo) {
  return { name, age, ...otherInfo };
}

const user = createUser('Alice', 30, { city: 'New York', job: 'Developer' });
console.log(user); // 输出: { name: 'Alice', age: 30, city: 'New York', job: 'Developer' }

展开运算符提供了一种更简洁和灵活的方式处理对象或者数组，使得代码更清晰和易于理解

← Set →