2022-11-05【技术】ES6之Array.from()方法的使用

在ES6中有个Array.from()方法，其用法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

1.将类数组对象转换为真正数组：

var obj = {
    0: '张三',
    1: '李四',
    2: '王五',
    length: 3
}
const newArr = Array.from(obj)
console.log(newArr)

如果把length属性去掉的话：结果为一个空数组 []。
如果把对象的key 换成不是数字类型的，像这样：

var obj = {
    student1: '张三',
    student2: '李四',
    student3: '王五',
    length: 3
}
const newArr = Array.from(obj)
console.log(newArr);

输出的结果为 ：[undefined, undefined, undefined]

由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。

2、该类数组对象的属性名必须为数值型或字符串型的数字

注意：比如： 长度给4

var obj = {
    0: '张三',
    2: '李四',
    3: '王五',
    length: 4
}
const newArr = Array.from(obj)
console.log(newArr);

输出结果为：["张三", "李四", "王五", undefined] obj中的length属性决定了转换数组的长度

2.从 Set 生成数组

let arr = [1, 2, 3, 4, 1, 2, 1, 3, 5, 8, 4]
const newArr = new Set(arr)
console.log(Array.from(newArr));// [1, 2, 3, 4, 5, 8]

3.生成自定义数组

例如：

var obj = {
    0: '张三',
    1: '李四',
    2: '王五',
    length: 3
}
想变成：
data:[
    {
        name:'张三',
        order:'No.0'
    },
    {
        name:'李四',
        order:'No.1'
    },
    {
        name:'王五',
        order:'No.2'
    }
]

看到这样的场景，我们一般会使用map，例如：

const data = Array.from(obj).map((item, i) => {
    return {
        name: item,
        order: 'No.' + i
    }
})

完全没有问题，但是既然用到了Array.from，有没有更简洁更好的办法？？？

Array.from()第二个参数供 ---- 回调

const data = Array.from(obj, (item,i) => {
    return {
        name: item,
        order: 'No.' + i
    }
})

当然，Array.from也可以传入第三个参数，为执行回调函数时 的this对象，完全可以这样写

const data = Array.from(obj, function (item, i) {
    return {
        name: item,
        order: this.prefix + i
    }
}, {
    prefix: 'No.'
})