es6 如何解构数组

• • ES6 如何解构数组

• ‍• ES6 解构操作

• • 对象解构：

• • 数组解构：

• • Map结构数据解构：

• • ES6 Map

• • 创建Map：

• • 添加/设置键值对：

• • 获取值：

• • 判断是否存在键：

• • 删除键值对：

• • 遍历Map：

• • 获取Map的大小（键值对数量）：

• • 清除所有键值对：

• • ES6 Map VS 对象

• • Map:

• • 键类型灵活：

• • 顺序性：

• • 迭代：

• • 大小统计：

• • 不存在原型干扰：

• • Object:

• • 键类型限制：

• • 无顺序保证：

• • 迭代：

• • 大小计算：

• • 原型属性：

‍

ES6 如何解构数组

ES6（ECMAScript 6）中的解构赋值是一种简洁的语法特性，它允许你从数组或对象中提取数据并直接将这些数据赋值给一个或多个变量。解构赋值通过“模式匹配”的方式来简化赋值操作，使得代码更加清晰和易于理解。

在ES6中，使用...运算符（也叫做扩展运算符）可以将数组展开为多个元素。我们可以利用它来解构数组并提取其中的值。

下面是一个例子：

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

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

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

在上面的代码中，我们使用...运算符将nums数组展开为多个元素，并使用解构赋值语法将前两个元素分别赋值给first和second变量，将剩余的元素赋值给rest变量。

此外，...运算符还可以用于合并数组，例如：

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

const combinedArr = [...arr1, ...arr2];

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

在上面的代码中，我们使用...运算符将arr1和arr2数组展开为多个元素，并使用数组拼接语法将它们合并为一个新数组combinedArr。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

ES6 解构操作

ES6 中的解构赋值语法可以用于从对象和数组中提取值并将其赋给变量。解构操作可以极大地简化代码，使得我们能够更方便地访问和使用对象或数组的属性或元素。

对象解构：

const person = {
  name: 'Alice',
  age: 25,
  address: {
    city: 'Shanghai',
    country: 'China'
  }
};

// 从对象中提取属性值
const { name, age } = person;
console.log(name); // 输出: 'Alice'
console.log(age); // 输出: 25

// 从嵌套的对象中提取属性值
const { address: { city, country } } = person;
console.log(city); // 输出: 'Shanghai'
console.log(country); // 输出: 'China'

在上面的例子中，我们使用解构赋值从 person 对象中提取了 name 和 age 属性的值，并将它们分别赋给了 name 和 age 变量。

同时，我们还从嵌套的 address 对象中提取了 city 和 country 的值。

// 基本数组解构
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c); // 输出：1 2 3

// 默认值
let [x = 'default', y] = [1]; // x没有对应值时使用'default'
console.log(x, y); // 输出：1 undefined

// 省略未使用的值
let [first, , third] = [1, 2, 3];
console.log(first, third); // 输出：1 3

// 嵌套数组解构
let nestedArr = [1, [2, [3, 4]]];
let [a, [b, [c]]] = nestedArr;
console.log(a, b, c); // 输出：1 2 3

数组解构：

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

// 从数组中提取元素值
const [a, b] = numbers;
console.log(a); // 输出: 1
console.log(b); // 输出: 2

// 使用展开运算符提取剩余的元素
const [x, y, ...rest] = numbers;
console.log(x); // 输出: 1
console.log(y); // 输出: 2
console.log(rest); // 输出: [3, 4, 5]

在上面的例子中，我们使用解构赋值从 numbers 数组中提取了前两个元素的值，并将它们分别赋给了 a 和 b 变量。

同时，我们使用展开运算符 (...) 提取了剩余的元素，赋给了 rest 变量。

// 基本对象解构
let obj = { foo: 'bar', baz: 42 };
let { foo, baz } = obj;
console.log(foo, baz); // 输出：'bar' 42

// 解构时重命名变量
let obj2 = { firstName: 'Alice', lastName: 'Smith' };
let { firstName: first, lastName: last } = obj2;
console.log(first, last); // 输出：'Alice' 'Smith'

// 默认值
let { name = 'Guest', age } = { age: 30 }; // 当属性不存在时使用默认值
console.log(name, age); // 输出：'Guest' 30

// 解构嵌套对象
let nestedObj = { person: { firstName: 'John', lastName: 'Doe' } };
let { person: { firstName, lastName } } = nestedObj;
console.log(firstName, lastName); // 输出：'John' 'Doe'

此外，只要对象具有可迭代性（比如实现了Iterator接口），也可以对这样的对象进行解构赋值。这意味着某些类型的集合如Set、Map以及类数组对象都可以利用解构赋值进行数据提取。

Map结构数据解构：

在ES6中，Map结构虽然不能直接使用解构赋值的方式来提取键值对，但可以通过迭代器（Iterator）配合for...of循环或者.entries()、.values()和.keys()方法来间接实现类似解构的效果。

例如，要将Map的键值对解构到单独的变量中，可以这样做：

let myMap = new Map();
myMap.set('name', 'Alice');
myMap.set('age', 30);

// 使用 for...of 配合 .entries() 方法进行解构
for (let [key, value] of myMap.entries()) {
  let { key: mapKey, value: mapValue } = { key, value };
  console.log(mapKey, mapValue);
}

// 或者临时转为数组后解构
let entries = [...myMap.entries()];
let [ [nameKey, name], [ageKey, age] ] = entries;
console.log(nameKey, name); // 输出 "name" "Alice"
console.log(ageKey, age);   // 输出 "age" 30

这样做的实质是通过迭代获取Map中的每个键值对，并将其作为元组赋值给一个临时变量，然后对该临时变量进行解构。由于解构赋值语法本身不支持直接应用于Map对象上，所以需要借助额外的转换步骤。

ES6 Map

在ES6中，Map是一种新的数据结构，它提供了“值-值”对应的键值对存储方式。与JavaScript传统的对象不同的是，Map的键可以是任何类型的数据，包括对象、数组、函数等，而不仅仅是字符串。

以下是Map结构的主要特点和方法：

创建Map：

let myMap = new Map();
// 或者用数组初始化
let mapFromArray = new Map([
    ['key1', 'value1'],
    ['key2', {another: 'value'}],
    [Symbol('key3'), 3]
]);

添加/设置键值对：

myMap.set(key, value);

获取值：

let value = myMap.get(key);

判断是否存在键：

let hasKey = myMap.has(key);

删除键值对：

myMap.delete(key);

遍历Map：

for (let [key, value] of myMap) {
    console.log(key, value);
}
// 或者使用forEach方法
myMap.forEach((value, key, map) => {
    console.log(key, value);
});

获取Map的大小（键值对数量）：

let size = myMap.size;

清除所有键值对：

myMap.clear();

由于Map的键可以是任意类型，并且它的迭代顺序是根据插入顺序保持一致的，所以Map非常适合那些需要依赖于特定键插入顺序或者使用非字符串键的应用场景。

ES6 Map VS 对象

ES6 中的 Map 和传统的 JavaScript 对象（Object）在键值对存储方面有着相似之处，但也有显著的不同点：

Map:

键类型灵活：

Map 的键可以是任何类型的值，包括对象、函数、Symbol，甚至是另一个 Map 或 Set。这是与 Object 最大的不同点，因为 Object 的键只能是字符串或 Symbol。

顺序性：

Map 保留了插入键值对的顺序，也就是说迭代 Map 时会按照插入顺序返回结果。

迭代：

Map 可以直接被迭代，提供了 entries(), keys(), values() 方法以及支持 for...of 循环和 forEach() 方法。

大小统计：

Map 提供了 .size 属性，可以直接获取键值对的数量。

不存在原型干扰：

Map 的键值查找不会受到原型链的影响，避免了 Object 键查找可能存在的原型属性问题。

Object:

键类型限制：

Object 的键默认会被转换为字符串，除非它们已经是 Symbol 类型。这意味着相同的数值作为键，在 Object 中会被视为同一个键（例如 {}[1] 和 {}[1.0] 指向同一位置）。

无顺序保证：

JavaScript 对象的属性没有明确的顺序，尽管现代引擎在某些情况下可能保持插入顺序，但这不是语言规范所保证的。

迭代：

虽然 Object 不可直接迭代，但在 ES6 中引入了 Object.keys(obj), Object.values(obj), Object.entries(obj) 方法来获取键、值、键值对数组，进而进行迭代。

大小计算：

获取 Object 的键值对数量需要手动遍历或使用一些工具函数来计算。

原型属性：

Object 的键查找过程中会检查原型链，如果某个键在原型上存在，则会影响到当前对象的属性读取。

如果你需要一个能够保持插入顺序、键可以是任意类型且能方便地获取元素数量的数据结构，Map 是更好的选择。而如果键仅限于字符串和 Symbol，并且不需要考虑顺序性和原型影响，或者希望利用到对象字面量简洁的语法和原生 JSON 支持等特性，那么 Object 可能更为合适。

原文始发于微信公众号（前端爱好者）：es6 如何解构数组