ES6 新特性②：数组和对象的扩展与解构

2023-11-29 08:09:22

ES6 不仅改进了 ES5 中既有对象的处理方式，还新增了一些有用的数组和对象方法，大大简化了代码的编写。本文将重点介绍 ES6 中数组和对象的扩展与解构特性。

数组扩展运算符

数组扩展运算符 (...) 允许将一个数组展开为单独的元素，并将其添加到另一个数组中。它广泛用于以下场景：

合并数组： 将两个或多个数组合并为一个新数组。
创建数组副本： 创建一个现有数组的副本，避免直接引用原始数组。
获取函数参数： 将函数参数展开为一个数组。

语法：

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

// 合并数组
const newArray = [...array1, ...array2];

// 创建数组副本
const copyArray = [...array1];

// 获取函数参数
const sum = (...args) => {
  console.log(args); // 输出： [1, 2, 3, 4, 5]
};
sum(1, 2, 3, 4, 5);

对象扩展运算符

对象扩展运算符与数组扩展运算符类似，它将对象展开为独立的键值对，并将其添加到另一个对象中。

语法：

const object1 = { name: 'John Doe', age: 30 };
const object2 = { address: '123 Main Street', city: 'Anytown' };

// 合并对象
const newObject = { ...object1, ...object2 };

// 创建对象副本
const copyObject = { ...object1 };

对象解构

对象解构是一种从对象中提取特定属性值并将其赋给变量或常量的语法。它使代码更具可读性和简洁性。

语法：

const person = { name: 'John Doe', age: 30, city: 'Anytown' };

const { name, age } = person;

console.log(name); // 输出： John Doe
console.log(age); // 输出： 30

数组解构

数组解构与对象解构类似，但适用于数组。它可以从数组中提取特定元素并将其赋给变量或常量。

语法：

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

const [first, second, ...rest] = numbers;

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