揭秘JavaScript 数组的妙用，不容错过的 5 种 Array.from() 实战技巧

Array.from()方法 简介

JavaScript 的 Array.from() 方法是将可迭代对象或类似数组的对象转换为数组的强大工具，它既好用又灵活。在本文中，我们将深入探讨 Array.from() 方法的 5 种妙用，帮助您充分发挥它的潜力，将您的编程技能提升到一个新的水平。

1. 将字符串转换为数组

字符串本身并不是数组，但我们可以使用 Array.from() 方法轻松地将其转换为数组。

const str = "Hello World";
const arr = Array.from(str);
console.log(arr); // ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

这种方法非常有用，尤其是当我们需要对字符串进行逐个字符的操作时。例如，我们可以使用 map() 方法将字符串中的每个字符转换为大写：

const upperCaseArr = arr.map((char) => char.toUpperCase());
console.log(upperCaseArr); // ["H", "E", "L", "L", "O", " ", "W", "O", "R", "L", "D"]

2. 将类数组对象转换为数组

类数组对象是指那些具有长度属性并且可以像数组一样通过索引访问元素的对象。比如，arguments 对象和 NodeList 对象都是类数组对象。

我们可以使用 Array.from() 方法将类数组对象转换为数组：

const args = Array.from(arguments);
console.log(args); // [1, 2, 3, 4, 5]

const nodeList = document.querySelectorAll("li");
const arr = Array.from(nodeList);
console.log(arr); // [<li>...</li>, <li>...</li>, <li>...</li>]

通过这种方式，我们可以轻松地将类数组对象转换为数组，并对它们进行进一步的操作。

3. 创建指定长度的填充数组

我们可以使用 Array.from() 方法创建指定长度的填充数组。

const arr = Array.from({length: 5}, () => 0);
console.log(arr); // [0, 0, 0, 0, 0]

这种方法非常有用，尤其是在我们需要创建具有相同元素的数组时。例如，我们可以使用它来创建一组初始值为 0 的计数器：

const counters = Array.from({length: 5}, () => 0);
for (let i = 0; i < counters.length; i++) {
  counters[i]++;
}
console.log(counters); // [1, 1, 1, 1, 1]

4. 展开嵌套数组

我们可以使用 Array.from() 方法展开嵌套数组。

const arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const flatArr = Array.from(arr.flat());
console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

通过这种方式，我们可以轻松地将嵌套数组展开成一维数组，并对它们进行进一步的操作。

5. 降维数组

我们可以使用 Array.from() 方法将多维数组降维。

const arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const flatArr = Array.from(arr, (subArr) => subArr[0]);
console.log(flatArr); // [1, 4, 7]

通过这种方式，我们可以轻松地将多维数组降维成一维数组，并对它们进行进一步的操作。

结语

Array.from() 方法是一个非常强大的工具，它可以帮助我们轻松地将可迭代对象或类似数组的对象转换为数组。通过本文介绍的 5 种妙用，您可以充分发挥 Array.from() 方法的潜力，将您的编程技能提升到一个新的水平。