十个精妙妙计，尽显 JS 中的扩展运算符功力，还不快点赞！

2024-01-01 04:57:06

探索 JavaScript 中扩展运算符的强大功能

简介

JavaScript 中的扩展运算符（...）是一个多才多艺的工具，可以轻松高效地处理数组和对象。它允许您展开数据结构，创建副本、合并元素、解构值等等。在这篇博客中，我们将深入探讨扩展运算符的广泛应用，并通过代码示例展示其强大功能。

复制数组或对象

扩展运算符最基本的用途之一是创建数组或对象的副本。通过使用 ... 前缀，您可以轻松地创建原始数据的独立副本，避免意外修改。

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

console.log(copyArray); // 输出：[1, 2, 3]

合并数组或对象

扩展运算符还可用于合并多个数组或对象。这在连接数据源或创建更大的数据结构时非常有用。

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

const mergedArray = [...array1, ...array2];

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

将参数列表传递给函数

扩展运算符可用于将可变数量的参数作为数组传递给函数。这在创建可重用函数或处理动态输入时非常有用。

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

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

解构数组或对象

扩展运算符可以轻松地将数组或对象解构成单个变量。这对于从数据结构中提取特定值非常有用。

const array = [1, 2, 3];

const [first, second, third] = array;

console.log(first); // 输出：1
console.log(second); // 输出：2
console.log(third); // 输出：3

创建新的数组或对象

扩展运算符可以用来创建新的数组或对象，同时合并现有的值。这在扩展现有数据结构或创建新对象时非常方便。

const newArray = [...array, 4, 5, 6];

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

const newObject = {...object, newProperty: 'value'};

console.log(newObject); // 输出：{oldProperty: 'value', newProperty: 'value'}

展开嵌套数组或对象

扩展运算符可以递归地展开嵌套的数组或对象，从而创建扁平的数据结构。这在处理复杂的数据层次结构时非常有用。

const nestedArray = [[1, 2, 3], [4, 5, 6]];

const flattenedArray = nestedArray.flat();

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

const nestedObject = {
  name: 'John',
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

const flattenedObject = {...nestedObject, ...nestedObject.address};

console.log(flattenedObject); // 输出：{name: 'John', street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345'}

过滤数组或对象

扩展运算符可以与其他数组或对象操作结合使用，以过滤数据。这在提取特定值或删除不需要的元素时非常有用。

const array = [1, 2, 3, 4, 5, 6];

const filteredArray = array.filter(num => num % 2 === 0);

console.log(filteredArray); // 输出：[2, 4, 6]

const object = {
  name: 'John',
  age: 30,
  city: 'Anytown',
  state: 'CA',
  zip: '12345'
};

const filteredObject = {...object, ...{city: 'New York', zip: '54321'}};

console.log(filteredObject); // 输出：{name: 'John', age: 30, city: 'New York', state: 'CA', zip: '54321'}

排序数组或对象

扩展运算符可以与排序函数结合使用，对数组或对象进行排序。这在组织和分析数据时非常有用。

const array = [1, 3, 2, 5, 4, 6];

const sortedArray = array.sort((a, b) => a - b);

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

const object = {
  name: 'John',
  age: 30,
  city: 'Anytown',
  state: 'CA',
  zip: '12345'
};

const sortedObject = {...object, ...{name: 'Alice', age: 25}};

console.log(sortedObject); // 输出：{age: 25, city: 'Anytown', name: 'Alice', state: 'CA', zip: '12345'}

去重数组或对象

扩展运算符可以与 Set 对象结合使用，对数组或对象进行去重。这在移除重复值和创建唯一集合时非常有用。

const array = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueArray = [...new Set(array)];

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

const object = {
  name: 'John',
  age: 30,
  city: 'Anytown',
  state: 'CA',
  zip: '12345'
};

const uniqueObject = {...new Set([...object])};

console.log(uniqueObject); // 输出：{name: 'John', age: 30, city: 'Anytown', state: 'CA', zip: '12345'}

交换数组或对象中的元素

扩展运算符可以用来交换数组或对象中的元素，而无需创建临时变量。这在调整数据结构或执行算法时非常有用。

const array = [1, 2, 3];

[array[0], array[2]] = [array[2], array[0]];

console.log(array); // 输出：[3, 2, 1]

const object = {
  name: 'John',
  age: 30,
  city: 'Anytown',
  state: 'CA',
  zip: '12345'
};

({name, age} = {age, name});

console.log(object); // 输出：{name: '30', age: 'John', city: 'Anytown', state: 'CA', zip: '12345'}