JavaScript Array.from() 方法

JavaScript Array.from() 语法

Array.from() 是一个静态方法，它用于将一个 “类数组对象” 或 “可迭代对象（如Set或Map）” 转换成一个 “真正的数组”。

语法：

Array.from(object, mapFn, thisArg)

说明：

Array.from() 方法可以接收 3 个参数。

object（必选）：是一个类数组对象或可迭代对象（如 Set、Map）。
mapFn（可选）：每个元素调用的映射函数。
thisArg（可选）：回调函数中 this 的值，一般不需要用到该参数。

需要清楚的是，下面两种方式是等价的。

// 方式1
Array.from(object, mapFn, thisArg)

// 方式2
Array.from(object).map(mapFn, thisArg)

类数组对象

所谓的 “类数组对象（array-like object）”，指的是类似数组的对象。在 JavaScript 中，类数组对象是一个非常重要的概念。其中，常见的类数组有以下 3 种。

字符串。
函数的 arguments。
DOM 的 NodeList。

类数组对象，又叫做 “伪数组”，它并不是真正的数组，只是类似于数组而已。类数组对象一般都有这样的特点：① 拥有 length 属性；② 可以使用下标方式。但类数组对象不能使用数组的其他方法，比如 push()、slice()、join()、splice() 等。

JavaScript Array.from() 摘要

属于	JavaScript Array 对象
使用频率	中
官方文档	查看
MDN	查看

JavaScript Array.from() 示例

Array.from() 方法可以将字符串、arguments、NodeList、Set 和 Map 等转换成一个数组，我们通过几个简单例子来学习一下。

示例 1：Array.from() 转换字符串

运行代码

const str = "绿叶网";
const arr = Array.from(str);

console.log(arr);
console.log(Array.isArray(arr));
console.log(arr.join(","));       // 使用数组方法

运行结果如下。

[ '绿', '叶', '网' ]
true
绿,叶,网

分析：

这个例子使用 Array.from() 来将字符串转换为一个真正的数组，这样就可以使用数组提供的方法了。其中，Array.isArray() 方法用于判断一个值是否为数组。

示例 2：Array.from() 转换 arguments

运行代码

function fn() {
    const arr = Array.from(arguments);
    console.log(arr);
    console.log(Array.isArray(arr));
}

fn("红", "绿", "蓝");

运行结果如下。

[ '红', '绿', '蓝' ]
true

分析：

arguments 是函数自带的一个东西，它是函数所有参数的集合，不过 arguments 只能在函数内部使用。

示例 3：Array.from() 转换 NodeList

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function() {
            const oLis = document.querySelectorAll("li");
            const arr = Array.from(oLis);
            console.log(arr);
            console.log(Array.isArray(arr));
        }
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

运行结果如下。

[li, li, li]
true

分析：

字符串、arguments、NodeList 这几个都是 “类数组对象”，因此它们只能使用 length 属性以及下标方式，而不能使用真正数组的 push()、join()、splice() 等方法的。对于这一点，小伙伴可以自己去试一下。

实际上，Array.from() 除了可以把类数组转换为数组，还可以把 Set、Map 转换为数组，请看下面几个例子。

示例 4：Array.from() 转换 Set

运行代码

const set = new Set(["red", "green", "blue"]);
const arr = Array.from(set);
console.log(arr);
console.log(arr.join(","));           // 使用数组方法

运行结果如下。

[ 'red', 'green', 'blue' ]
red,green,blue

示例 5：Array.from() 转换 Map

运行代码

const map = new Map([["name", "Jack"], ["age", 24]]);
const arr = Array.from(map);
console.log(arr);
console.log(arr.splice(0, 1));        // 使用数组方法

运行结果如下。

[ [ 'name', 'Jack' ], [ 'age', 24 ] ]
[ [ 'name', 'Jack' ] ]

分析：

小伙伴们要特别注意一点，Set 和 Map 并不属于 “类数组对象”，而是属于独立的数据结构。也就是说，Array.from() 可以将 3 种数据结构转换为真正的数组：

类数组对象。
Set。
Map。

示例 6：带映射函数的 Array.from()

运行代码

function fn(value) {
    return value * 2;
}

const set = new Set([1, 3, 5, 7, 9]);
const result = Array.from(set, fn);
console.log(result);

运行结果如下。

[2, 6, 10, 14, 18]

分析：

对于这个例子来说，下面两种方式是等价的。

// 方式1
const result = Array.from(set, fn);

// 方式2
const result = Array.from(set).map(fn);

JavaScript Array.from() 应用

最后，我们来看几个 JavaScript Array.from() 实际应用的例子。

示例 7：Array.from() 实现数组去重

运行代码

const arr = [1, 1, 2, 2, 3, 3];
const result = Array.from(new Set(arr));
console.log(result);

运行结果如下。

[1, 2, 3]

分析：

Set 类似数学中的集合，它会自动去掉重复的值。new Set(arr) 的返回值为 new Set([1, 2, 3])，然后我们使用 Array.from() 方法将 Set 转换为数组即可。

示例 8：Array.from() 的实际应用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        window.onload = function() {
            let oLis = document.querySelectorAll("li");
            oLis = Array.from(oLis);

            const colorArr = ["red", "green", "blue"];
            oLis.forEach((item, index) => {
                item.style.color = colorArr[index];
            });
        }
    </script>
</head>
<body>
    <ul>
        <li>红色</li>
        <li>绿色</li>
        <li>蓝色</li>
    </ul>
</body>
</html>

浏览器效果如下图所示。

Array.from() 的实际应用

分析：

在这个例子中，首先我们获取一个 NodeList，然后使用 Array.from() 将 NodeList 转换为数组，这样就可以使用数组的 forEach() 方法了。最后在 forEach() 循环内部来修改每一个 li 元素的颜色。

示例 9：Array.from() 快速生成数字序列

运行代码

const arr = Array.from({ length: 5 }, (v, index) => index + 1);
console.log(arr);

运行结果如下。

[1, 2, 3, 4, 5]

分析：

如果需要生成一个从 1 到 5 的数组，我们可以利用 Array.from 结合 { length: 5 } 伪对象来实现。其中，{ length: 5 } 是一个典型的类数组对象（只有 length 属性），Array.from 会根据这个长度创建数组，并利用第 2 个参数（映射函数）生成具体的值。