深入浅出Array.from()和Array.of()

程序猿小野

已于 2023-11-07 11:24:29 修改

阅读量1.5k

点赞数 5

分类专栏： JavaScript 文章标签： javascript es6 前端

于 2023-06-09 10:44:02 首次发布

本文链接：https://blog.csdn.net/weixin_42289279/article/details/131118128

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

Array.from用于将类似数组对象或可遍历对象转为数组，常用于DOMNodeList和arguments对象。而Array.of主要解决Array构造函数因参数个数不同导致的行为不一致问题，始终返回参数值组成的数组。扩展运算符也可用于某些数据结构转数组，依赖于遍历器接口。

摘要由CSDN通过智能技术生成

Array.from()

Array.from 方法用于将两类对象转为真正的数组：1.类似数组的对象；2.可遍历对象（包括ES6新增的数据结构Set和Map）。

下面是一个类似数组的对象，Array.from将它转为真正的数组。

let arrLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
// ES5的写法
var arr1 = [].slice.call(arrLike);
console.log(arr1); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrLike);
console.log(arr2); // ['a', 'b', 'c']

实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from()都可以将它们转为真正的数组。

// NodeList对象

<!DOCTYPE html>
<html lang="en">

<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>

<script>
    let ps = document.querySelectorAll('p');
    console.log(ps);
</script>

</html>

在ES6标准入门一书中提到：“querySelectorAll方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach方法”。这句话是错误的，因为从上图可以看到，querySelectorAll方法返回的NodeList类数组对象中是有forEach方法的，NodeList可以使用forEach方法，但是不能使用数组身上的其他方法。例如：map、concat等方法。

<script>
    let ps = document.querySelectorAll('p');
    console.log(ps);
    ps.forEach((p) => {
        console.log(p);
    })
    ps.map((p) => {
        console.log(p);
    })
</script>

forEach成功输出、map报错

// arguments对象

如果直接遍历arguments对象就会报错，因为arguments对象身上并没有forEach方法

function fn() {
    console.log(arguments);
    arguments.forEach(arg => {
        console.log(arg);
    });
}
fn('程序', '猿', '小野');

使用Array.from()之后，就可以使用forEach方法了。

function fn() {
    console.log(arguments);
    Array.from(arguments).forEach((arg) => {
        console.log(arg);
    })
}
fn('程序', '猿', '小野');

另外，只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组。

值得一提的是，扩展运算符（...）也可以将某些数据结构转为数组。

function fn() {
    console.log(arguments);
    console.log([...arguments]);
    // Array.from(arguments).forEach((arg) => {
    //     console.log(arg);
    // })
}
fn('程序', '猿', '小野');

扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署该接口，就无法转换。

可以用Array.prototype.slice方法替代：


    let ps = document.querySelectorAll('p');
    console.log(ps);
    const toArray = (() =>
        obj => [].slice.call(obj)
    )();
    console.log(toArray(ps));

Array.from方法还可以传多个参数：

Array.from(arraylLike, MapFn, thisArg)

        arrayLike：第一个参数，指定一个类数组对象or可迭代对象

        MapFn(可选)：第二个参数，新数组中的每一个元素执行该回调函数

        thisArg(可选)：第三个参数，执行回调函数MapFn时的this对象

返回值：一个新数组实例

第二个参数：

const arr1 = [2, 4, 6, 8];
const arr2 = Array.from(arr1, x => x + 1);
console.log(arr2);
// [3, 5, 7, 9]

第三个参数：

let obj = {
    add(value) {
        return value * 2;
    }
}
const arr1 = [2, 4, 6, 8];
const arr2 = Array.from(arr1, obj.add, obj);
console.log(arr2);
// [4, 8, 12, 16]

Array.of()

Array.of方法用于将一组值转换为数组。

Array.of(1,2,3)    // [1,2,3]
Array.of(3)        // [3]
Array.of(3).length // 1

这个方法的主要目的是弥补数组构造函数Array的不足。因为参数个数的不同会导致Array()的行为有差异。比如：
console.log(Array());           // []
console.log(Array(3));          // [empty × 3]
console.log(Array(3).length);   // 3
console.log(Array(1, 2, 3));    // [1, 2, 3]
上面的代码中，Array方法没有参数、有1个参数或3个参数时，返回结果都不一样。只有当参数个数不少于2个时，Array()才会返回由参数组成的新数组。参数个数只有1个时，实际上是指定数组的长度。

Array.of()方法基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一， Array.of() 总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

Array.of()           // []
Array.of(undefined)  // [undefined]
Array.of(3)          // [3]
Array.of(1, 2, 3)    // [1, 2, 3]

Array.of 方法可以用下面的代码模拟实现：

function ArrayOf() {
    return [].slice.call(arguments)
}
console.log(ArrayOf());            // []
console.log(ArrayOf(undefined));   // [undefined]
console.log(ArrayOf(3));           // [3]
console.log(ArrayOf(1, 2, 3));     // [1,2,3]

如果帮助到您了，可以留下一个赞👍告诉我