强大的Array.from()函数，简介与调试

Array.from([参数1], [参数2可选]) 函数接收两个参数：

参数	解释
参数1	数组，集合，类数组对象，字符串
参数2[可选]	一个函数，用来处理每个遍历的值，与map一致

逐一测试，均在Chrome最新版的控制台下。

数组

arr = [1, 2, 3] // (3) [1, 2, 3]
console.log(Array.from(arr)) //(3) [1, 2, 3]

返回一样的数组。

arr = [{
    a: {
        aa: 11
    }
}]
console.log(Array.from(arr).a === arr.a) // true

返回的数组相当于浅拷贝。

集合

set = new Set([1, 2, 3]) // Set(3) {1, 2, 3}
console.log(Array.from(set)) // [1, 2, 3]

集合转为数组。

集合构建方法可以用来做数组去重。

类数组对象

什么叫类数组对象？

定义：一个对象必须有length属性，并且key均为自然数或"自然数"的字符串。

obj = {
    0: 'first',
    '1': 'second',
    3: 'third',
    99: '99',
    test: 'test',
    length: 5
}
console.log(Array.from(obj)) // ["first", "second", undefined, "third", undefined]

注意看上面的例子，表达以下意思：

1. key不是自然数的无法转换，得到的是undefined。

2. 自然数的key与value，按key做索引落在了新数组内。

3. 转换后的数组长度来源自length的值，不够或超出的为undefined。

obj = {a: 1}
console.log(Array.from(obj)) // []

这种转换直接获取个空数组了。

字符串

str = 'hello, world!'
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d", "!"]

这个好理解，不解释了。

---

关于参数2

console.log(Array.from([1,  2,  3], i => i + 1)) // [2, 3, 4] 

恩，就是map。

---

强烈推荐多用用Array.from()，用来来替换map，以及一些可以让代码看起来更讲究的技巧。

提升薪资，从小技巧做起……

---

喜欢的话请关注一波，定期更新技术文章，满满的都是干货。