frontLearn

Appearance

目录：

一、Array.from()介绍

二、类似数组的对象

三、可遍历（iterable）的对象

四、Array.from第二个参数

五、Array.from将各种值转为真正的数组

六、Array.from解决Unicode 字符bug

七、Array.from第三个参数

字数：大约750字

一、Array.from()介绍 ​

Array.from()方法用于将两类对象转为真正的数组：

1、类似数组的对象（array-like object）

2、可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

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

js
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5 的写法
// ['a', 'b', 'c']
var arr1 = [].slice.call(arrayLike); 

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

二、类似数组的对象 ​

上面说了是将两类对象转为真正的数组。第一个类是类数组。

所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from()方法转为数组，而此时扩展运算符就无法转换。

js
// [ undefined, undefined, undefined ]
const obj = { length: 3 }

变成类数组

js
// ['Array from', 'jecksonli', undefined]
const obj ={ 0: 'Array from',1: 'jecksonli', length: 3 }

也就是如果类数组长度不够，就用undefined替代啦。

注意：

1、属性名代表了数组的索引号，如果没有这个索引号，转出来的数组中对应的元素就为length长度个undefined。

2、如果没有length属性，转换出来的数组也是空的；

三、可遍历（iterable）的对象 ​

只要是部署了 Iterator 接口的数据结构，Array.from()都能将其转为数组。所以Map、Set都能方便的使用。

ts
 const set = new Set();
 set.add('999');
 set.add('888');
 set.add('今天很不错！');
 // ['999', '888', '今天很不错！']
 Array.from(set);
ts
const map = new Map();
map.set('name','小丽');
map.set('sex','male');
// [["name", "小丽"],["sex", "male"]];
Array.from(map);

四、Array.from第二个参数 ​

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

js
const obj ={ 0: 10,1: 20, 2: 30, length: 3 }
// [200, 400, 600]
Array.from(obj, item => item * 20);

五、Array.from将各种值转为真正的数组 ​

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

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

上面代码中，Array.from()的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活。

六、Array.from解决Unicode 字符bug ​

Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于\uFFFF的 Unicode 字符，算作两个字符的 bug。

js
function countSymbols(string) {
  return Array.from(string).length;
}

七、Array.from第三个参数 ​

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

js
// ['jecksonli、age=26', 'jecksonli、age=26']
Array.from({ length: 2 }, function(){
   return 'jecksonli、age=' + this.age
}, { age: 26 })