ES6的数组方法之Array.from

Posted 2020-12-30 hjj2ldq

首先说说什么是数组：数组在类型划分上归为Object,属于比较特殊的对象，数组的索引值类似于对象的key值。

数组的几个注意点：

1.数组的长度是可读属性，不可更改，数组的长度根据索引最大值。

2.数组的索引值可以是字符串等，但这个不影响数组的长度。

3.数组根据下标最大值，会自动补齐对应的其他索引值，且值为空。

ES6新增了数组的一系列方法，如Array.of,Array.from,Array.find等等

数组与类数组的最大区别在于数组自身具有迭代器iterator

 

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

任何有length属性的都可以转换为数组。

document.querySelectorAll() //返回的是object，但是内有迭代器，可循环

document.getElementsByClassName()//类数组集合，不可循环

function fn(){
    let args = arguments //不定参集合，不可循环
}

 

解决方法

var arr1 = [].slice.call(arrayLike); // [‘a‘, ‘b‘, ‘c‘] //ES5

或者

arr = Array.from(likeArr) //ES6  不改变原来的类数组，返回新的数组

在解决不定参的转为数组也可以用扩展运算符

function foo() {  var args = [...arguments]; } //扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换

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

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

利用这一特性，可以这样做：

Array.from([1, , 2, , 3], (n) => n || 0) // [1, 0, 2, 0, 3]

或者这样

function typesOf () {  return Array.from(arguments, value => typeof value) }

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

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

对于不支持Array.from的浏览器，可以用Array.prototype.slice方法去弥补

const toArray = (() => 
　　 Array.from ? Array.from : obj => [].slice.call(obj)
 )();