Array.from 和[...]的区别

qwe_177

于 2021-10-23 17:34:34 发布

阅读量525

点赞数

分类专栏： # JavaScript 文章标签： javascript es6 前端

原文链接：https://segmentfault.com/a/1190000023382314

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文探讨了Array.from()和...操作符在将类数组对象转换为数组时的区别，重点讲解了类数组的定义、两者转换条件，并通过实例展示了如何处理不能迭代的对象使其适配。同时，介绍了如何在对象上添加[Symbol.iterator]来实现...运算。

摘要由CSDN通过智能技术生成

Array.from 和[…]的区别
Array.from(arr) 和[…arr] 都可以将类数组arr转换成数组
什么叫类数组

有数字索引
有长度length
是个对象
能被迭代
如果arr只有索引和长度，并且是对象，所以可以被Array.from转换成数组的，但是[…arr]方法，就必须可以被迭代

let obj = {'0': 1,'1': 2,'2': 3,length: 3}
let arr = Array.from(obj)
console.log(arr)
let arr1= [...obj]
console.log(arr1)

上面的obj 因为不能被迭代所以在进行[…obj]转换的时候就会报错object is not iterable,所以我们如果需要在obj上进行…运算，还需要在上面增加一个属性[Symbol.iterator]

let obj = {
    '0': 1,
    '1': 2,
    '2': 3,
    length: 4,
    [Symbol.iterator]: function(){
        let index = 0
        let next = () => {
            return {
                value: this[index],
                done: this.length == ++ index
            }
        }
        return {
            next
        }
    }
}
let arr = Array.from(obj)
console.log(arr)
let arr1= [...obj]
console.log(arr1)