ES6 学习总结之扩展运算符（...）篇

2023-10-13 16:04:48

什么是扩展运算符（...）？

扩展运算符（...），又称展开运算符或传播运算符，是一种将可迭代的对象展开为一系列单独元素的语法糖。它于2015年在ES6中引入，为JavaScript的语法带来了新的可能，简化了数组、字符串、对象等数据的操作。

扩展运算符的语法和用法

扩展运算符的语法非常简单，它由三个连续的句点组成(...)。将可迭代对象放在扩展运算符的后面，即可将该对象展开为一系列单独的元素。

例如：

const numbers = [1, 2, 3, 4, 5];
console.log(...numbers); // 输出：1 2 3 4 5

在这个例子中，我们将numbers数组作为扩展运算符的参数，将数组中的元素依次展开并输出。

扩展运算符的应用场景

扩展运算符在JavaScript中有着广泛的应用场景，以下是几个常见的应用示例：

1. 数组合并

扩展运算符可以轻松地将两个或多个数组合并为一个新的数组。例如：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];

console.log(mergedArray); // 输出：[1, 2, 3, 4, 5, 6]

在这个例子中，我们将array1和array2数组合并为一个新的数组mergedArray，合并后的数组包含了两个原数组中的所有元素。

2. 对象扩展

扩展运算符也可以用于扩展对象。例如：

const obj1 = {
  name: 'John',
  age: 30
};

const obj2 = {
  address: '123 Main Street',
  city: 'Anytown'
};

const mergedObj = {
  ...obj1,
  ...obj2
};

console.log(mergedObj); // 输出：{ name: 'John', age: 30, address: '123 Main Street', city: 'Anytown' }

在这个例子中，我们将obj1和obj2对象合并为一个新的对象mergedObj，合并后的对象包含了两个原对象中的所有属性和值。

3. 函数参数

扩展运算符可以用于展开函数的参数。例如：

function sum(...numbers) {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 输出：15

在这个例子中，我们定义了一个函数sum，它使用扩展运算符来展开其参数。这意味着我们可以将任意数量的数字作为参数传递给sum函数，而无需显式地指定每个数字。

4. 字符串展开

扩展运算符也可以用于展开字符串。例如：

const str = 'Hello';
console.log(...str); // 输出：H e l l o

在这个例子中，我们将字符串str作为扩展运算符的参数，将字符串中的每个字符依次展开并输出。

5. 模板字符串

扩展运算符还可以用于模板字符串。例如：

const name = 'John';
const age = 30;

const template = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(template); // 输出：Hello, my name is John and I am 30 years old.

在这个例子中，我们将变量name和age作为扩展运算符的参数，将变量的值展开并插入到模板字符串中。

扩展运算符的局限性和需要注意的细节

扩展运算符虽然非常强大，但也有其局限性和需要注意的细节。

1. 扩展运算符只能展开可迭代的对象

扩展运算符只能展开可迭代的对象，如数组、字符串和对象。如果尝试展开一个非可迭代的对象，将会抛出错误。

2. 扩展运算符会打平嵌套的对象和数组

扩展运算符会将嵌套的对象和数组打平。例如：

const obj = {
  name: 'John',
  address: {
    street: '123 Main Street',
    city: 'Anytown'
  }
};

const flatObj = {
  ...obj
};

console.log(flatObj); // 输出：{ name: 'John', street: '123 Main Street', city: 'Anytown' }

在这个例子中，我们将obj对象作为扩展运算符的参数，将obj对象中的属性和值展开并插入到flatObj对象中。由于扩展运算符会打平嵌套的对象，因此flatObj对象中不再包含address属性，而是包含了street和city属性。

3. 扩展运算符会覆盖同名属性和值

如果扩展运算符展开的对象或数组中包含与目标对象或数组中相同的属性或值，那么目标对象或数组中的属性或值将被覆盖。例如：

const obj1 = {
  name: 'John',
  age: 30
};

const obj2 = {
  name: 'Mary',
  age: 25
};

const mergedObj = {
  ...obj1,
  ...obj2
};

console.log(mergedObj); // 输出：{ name: 'Mary', age: 25 }