ES6数组的扩展--Array.from()和Array.of()

￡神魔★判官ぃ 2022-04-10 11:17 259阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

## 一、 Array.from() : 将伪数组对象或可遍历对象转换为真数组 ##

### 1.何为伪数组 ###

**如果一个对象的所有键名都是正整数或零，并且有length属性**，那么这个对象就很像数组，语法上称为“类似数组的对象”(array-like object),即为伪数组。

var obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
    };
    obj[0] // 'a'
    obj[1] // 'b'
    obj.length // 3
    obj.push('d') // TypeError: obj.push is not a function

上面代码中，对象obj就是一个类似数组的对象。但是“类似数组的对象”并不是数组，因为它们不具备数组特有的方法。对象obj没有数组的push方法，使用该方法就会报错。

### 2.有哪些是伪数组 ###

典型的“类似数组的对象”是**函数的arguments对象，以及大多数 DOM 元素集，还有字符串。**

### 3.如何转化为真数组 ###

**①数组的slice方法可以将“类似数组的对象”变成真正的数组**

function doSomething(){
        console.log(arguments)
        var args = Array.prototype.slice.call(arguments);
        args.push("hj")
        console.log(args)
        return args
    }
    doSomething(1,2,3)

![2922596973-5c2eb6dba79c6\_articlex (578Ã256)][2922596973-5c2eb6dba79c6_articlex _578_256]

或者你也可以写成：

function doSomething(){
        var args = [].slice.call(arguments);
        return args
    }
    doSomething(1,2,3)

尽管这种方法，也可以实现将类数组转变为数组的目的，但并不直观。ES6新增Array.from()方法来提供一种明确清晰的方式以解决这方面的需求，更推荐后者的办法。

**②Array.from()**

<button>测试1</button>
    <br>
    <button>测试2</button>
    <br>
    <button>测试3</button>
    <br>
    <script type="text/javascript">
    let btns = document.getElementsByTagName("button")
    console.log("btns",btns);//得到一个伪数组
    //btns.forEach(item=>console.log(item)) Uncaught TypeError: btns.forEach is not a function
    Array.from(btns).forEach(item=>console.log(item))将伪数组转换为数组
    </script>

![1460000017755196_w_570_h_172][]  
![3120892510-5c2eb6dba637b\_articlex (570Ã172)][3120892510-5c2eb6dba637b_articlex _570_172]

**在ES6中，扩展运算符(...)也可以将某些数据结构转为数组**。只不过它需要在背后调用遍历器接口Symbol.iterator。值得注意的是如果一个对象没有部署遍历器接口，使用扩展运算符是无法将类似数组对象转换成数组。

function doSomething (){ 
      return [...arguments] 
    }
    doSomething('a','b','c'); // ["a","b","c"]

### 4.Array.from()用法 ###

Array.from接受三个参数，但只有input是必须的：

*  input: 你想要转换的类似数组对象和可遍历对象
 *  map: 类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
 *  context: 绑定map中用到的this

**只要是部署了iterator接口的数据结构，Array.from都能将其转为数组**:

let arr = Array.from('juejin'); 
    console.log(arr); //["j", "u", "e", "j", "i", "n"]

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，处理后的值放入返回的数组。

Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]
    // 等同于
    Array.from([1,2,3].map(x => x * x))

如果map函数里面用到了this关键字，还可以传入Array.from的第三个参数，用来绑定this。

**Array.from()可以将各种值转为真正的数组，并且还提供map功能。这实际上意味着，只要有一个原始的数据结构，你就可以先对它的值进行处理，然后转成规范的数组结构，进而就可以使用数量众多的数组方法。**

Array.from({ length: 2 }, () => 'jack')// ['jack', 'jack']

## 二、Array.of(v1, v2, v3) : 将一系列值转换成数组 ##

当调用 new Array( )构造器时，根据传入参数的类型与数量的不同，实际上会导致一些不同的结果， 例如：

let items = new Array(2) ;
    console.log(items.length) ; // 2
    console.log(items[0]) ; // undefined
    console.log(items[1]) ;

let items = new Array(1, 2) ;
    console.log(items.length) ; // 2
    console.log(items[0]) ; // 1
    console.log(items[1]) ; // 2

当使用单个数值参数来调用 Array 构造器时，数组的长度属性会被设置为该参数。 如果使用多个参数(无论是否为数值类型)来调用，这些参数也会成为目标数组的项。数组的这种行为既混乱又有风险，因为有时可能不会留意所传参数的类型。

ES6 引入了Array.of( )方法来解决这个问题。该方法的作用非常类似Array构造器，但在使用单个数值参数的时候并不会导致特殊结果。**Array.of( )方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型**：

let items = Array.of(1, 2);
    console.log(items.length); // 2
    console.log(items[0]); // 1
    console.log(items[1]); // 2
    items = Array.of(2);
    console.log(items.length); // 1
    console.log(items[0]); // 2

**Array.of基本上可以用来替代Array()或newArray()，并且不存在由于参数不同而导致的重载，而且他们的行为非常统一。**

## 参考文章 ##

[深入理解ES6][ES6]

[Javascript教程][Javascript]

[JavaScript学习笔记：ES6数组方法][JavaScript_ES6]

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、[金山软件][Link 1]、[百姓网][Link 2]等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[2922596973-5c2eb6dba79c6_articlex _578_256]: /images/20220331/2d23075039ca4e0692f285e2c0b998f0.png
[1460000017755196_w_570_h_172]: /images/20220331/487d8afcf9fb478c9fdb4d4530d2f317.png
[3120892510-5c2eb6dba637b_articlex _570_172]: /images/20220331/7e7ddc7403f54376b185df34b063b016.png
[ES6]: https://book.douban.com/subject/27072230/
[Javascript]: https://wangdoc.com/javascript/
[JavaScript_ES6]: https://www.w3cplus.com/javascript/es6-array-methods.html
[Link 1]: https://www.baidu.com/s?wd=%E9%87%91%E5%B1%B1%E8%BD%AF%E4%BB%B6&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[Link 2]: https://www.baidu.com/s?wd=%E7%99%BE%E5%A7%93%E7%BD%91&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[2018121912254161]: /images/20220331/ecfe721b326e43359a08f143fa3619a5.png