ES6 新增 API：Array 篇（一）

2024-01-28 07:14:30

前言

在 JavaScript 中，数组是一种非常重要的数据结构，它可以存储一系列有序的数据。在 ES6 中，Array 类型新增了两个静态函数——Array.of 与 Array.from——为数组操作带来了新的可能性。本篇文章将对这两个函数进行详细介绍，帮助您更好地理解和使用它们。

Array.of

Array.of 函数可以创建一个新的数组，并传入任意数量的参数作为数组的元素。与使用字面量创建数组不同，Array.of 函数不会对传入的参数进行类型转换。这使得它在某些情况下非常有用，例如当我们需要创建一个包含不同类型元素的数组时。

// 使用字面量创建数组
const arr1 = [1, 2, 3];

// 使用 Array.of 创建数组
const arr2 = Array.of(1, 2, 3);

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

从上面的例子中可以看出，使用 Array.of 函数创建的数组与使用字面量创建的数组完全相同。但是，如果我们传入的参数不是简单的数据类型，而是对象或数组，就会出现不同。

// 使用字面量创建数组
const arr1 = [1, [2, 3], {name: 'John'}];

// 使用 Array.of 创建数组
const arr2 = Array.of(1, [2, 3], {name: 'John'});

console.log(arr1); // [1, [2, 3], {name: 'John'}]
console.log(arr2); // [1, 2, 3, {name: 'John'}]

在上面的例子中，使用字面量创建的数组包含三个元素：一个数字、一个数组和一个对象。而使用 Array.of 函数创建的数组包含四个元素：一个数字、两个数组和一个对象。这是因为 Array.of 函数不会对传入的参数进行类型转换，而是直接将它们作为数组的元素。

Array.from

Array.from 函数可以将一个类似数组的对象（如字符串、Map、Set 等）转换为一个真正的数组。这使得我们可以轻松地将其他数据结构转换为数组，而无需手动遍历并复制元素。

// 将字符串转换为数组
const str = 'Hello World';
const arr1 = Array.from(str);

// 将 Map 转换为数组
const map = new Map([['name', 'John'], ['age', 20]]);
const arr2 = Array.from(map);

// 将 Set 转换为数组
const set = new Set([1, 2, 3]);
const arr3 = Array.from(set);

console.log(arr1); // ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']
console.log(arr2); // [['name', 'John'], ['age', 20]]
console.log(arr3); // [1, 2, 3]