ES6之Array.from()方法

Array.from()方法就是将一个类数组对象或者部署了Iterator接口的对象(Set、Map、Array)转换成一个真正的数组。
那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。

基本用法

var arrayLike = {
    0: '张三',
    1: 18,
    2: ['lei','hai','yuan'],
    3: '上海市',
    length: 4
}
const arr = Array.from(arrayLike)
console.log(arr)    // ["张三", 18, Array(3), "上海市"]

注意：
        一定要有length属性
        length属性的长度是除了本属性其它属性的个数。
        类数组的key是数字

下面看下如果不是真正的类数组会出现什么情况

// 1、 将length属性去掉,会返回空数组[]
var arrayLike = {
    0: '张三',
    1: 18,
    2: ['lei','hai','yuan'],
    3: '上海市',
}
const arr = Array.from(arrayLike)
console.log(arr)    // []

// 2、key不为数字
var arrayLike = {
    'a': '张三',
    'b': 18,
    'c': ['lei','hai','yuan'],
    'd': '上海市',
    length: 4
}
const arr = Array.from(arrayLike)
console.log(arr)    // [undefined, undefined, undefined, undefined]

// 3、数字key不从0开始
var arrayLike = {
    1: '张三',
    3: 18,
    2: ['lei','hai','yuan'],
    4: '上海市',
    length: 4
}
const arr = Array.from(arrayLike)
console.log(arr)    // [undefined, "张三", Array(3), 18]

可以看到length=4就代表arr[0]、arr[1]、arr[2]、arr[3] 这个数字就是类数组对象的key。

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

var arrayLike = {
    0: 2,
    1: 4,
    2: 6,
    length:3
}
console.log(Array.from(arrayLike, x => x * x))  // [4, 16, 36]
// 等同于
console.log(Array.from(arrayLike).map(x => x*x))

应用场景

1、字符串转数组

var s = "dkandedg"
var arr = Array.from(s)
console.log(arr)    // ["d", "k", "a", "n", "d", "e", "d", "g"]

2、数组去重

function dupRem(arr) {
    return Array.from(new Set(arr))
}
console.log(dupRem([3,5,3,2,6,5,3]))    // [3, 5, 2, 6]

3、arguments转对象

// 求最大值 
function max() {
    return Math.max.apply(null,Array.from(arguments))
}
console.log(max(16,28,23))  // 28

// 求和
function sum() {
    return Array.from(arguments).reduce((sum,key) => sum+key)
}
console.log(sum(1,2,3))    // 6

4、set转数组

var arr = [2,3,6,8]
var set = new Set(arr)
console.log(Array.from(set))    // [2, 3, 6, 8]