Skip to content

可迭代与类数组

前言

我们在学js时,有两个概念可能会弄混,可迭代对象和类数组对象。说某个对象是可迭代的,比如数组let arr = [1,2,3]或者let map = new Map([[1, 2], [3, 4]]),它们可以使用for of进行遍历。然后又说某个对象是类数组,我们可以将它转换为数组,因为它有数值索引和length属性。来看一个小例子:

js
let o1 = {
    0: 'aa',
    1: 'bb',
    length: 2
}

let arr1 = Array.from(o1)
console.log(arr1); // [ 'aa', 'bb' ]

for (const item of arr1) {
    console.log(item);
}
// aa
// bb

let map = new Map([[1, 2], [3, 4]])
for (const item of map) {
    console.log(item);
}
// [ 1, 2 ]
// [ 3, 4 ]

如上面的例子,有一个类数组对象o1,使用Array.from()显示的将其转换为数组,然后这个对象就可以使用for of进行遍历了,其实上面这个小例子就涉及到了这两个概念:

  1. 类数组对象(array-like object):有数值索引属性和length属性的对象,称为类数组对象,比如例子中的o1
  2. 可迭代对象(iterable object):可以使用for of 进行遍历的对象,就称为可迭代的,比如例子中的arr1(转换后的数组)和map

那么为什么有的对象可以使用for of遍历(也即是可迭代对象),而有的对象却不可以,这是为什么呢?

可迭代对象

实际上那些可以直接使用for of遍历的对象,是系统内置实现了Symbol.iterator迭代器方法。我们来看下面这个例子。

一个小例子

如下面的例子所示,有一个普通对象range,显然是不可迭代的(因为它就是一个普通对象,啥也没干),我们使用for of检验一下,果然也报错了,TypeError: range is not iterable。那么如果我们想要让它变为可迭代的,该怎么办呢?比如,我们想实现这样的效果:使range对象可以使用用for of进行遍历,依次从1输出到5

js
let range = {
    from: 1,
    to: 5
}

for (const iterator of range) {
    console.log(iterator);
}
// TypeError: range is not iterable

我们来改写一下,既然想让这个对象变为可迭代的,那么就必须实现Symbol.iterator迭代方法。

js
let range = {
    from: 1,
    to: 5
}

/* 
1. 迭代器实际就是一个对象,对象上有 next() 方法
2. 迭代器每次调用一个next()方法后,都会返回一个标识对象
{
    value: '', // 本次迭代获得的值
    done: true|false // 标识是否还有下个值
}
3. for of 会获取到这个迭代对象,每遍历一次,调用一次迭代器的next方法,输出返回值中的value
*/
range[Symbol.iterator] = function () {
    // 返回一个迭代器对象
    return {
        current: this.from,
        last: this.to,

        next() {
            // 结束条件
            if (this.current > this.last) {
                return { done: true }
            } else {
                return {
                    value: this.current++, // current++ 第一次调用的时候,取值还是 1,
                    done: false
                }
            }
        }
    }
}

for (const item of range) {
    console.log(item);
}
// 1 2 3 4 5

我们通过实现range[Symbol.iterator]方法,让range对象也变成了可迭代对象,是不是很简单。我们只需要注意下几点

  1. range本身是没有next()方法的,是通过调用range[Symbol.iterator]()方法,返回了一个对象,即所谓的迭代器对象,通过迭代器对象上的next()方法获取到的值。

  2. next()方法返回的值也是一个对象,对象的格式遵循下面的规范

    js
    {
        value: '', // 本次迭代的值
        done: true|false // 标识是否迭代完成 
    }
  3. for of的工作原理,实际上就是调用了对象的[Symbol.iterator]()方法,生成了一个迭代器对象,然后每次循环就调用一次next()方法,然后获取到返回值上的value,当标识符done === true时,就结束循环。

显示调用迭代器

还用上面的例子举例,其实我们可以显示的调用range的迭代器方法,生成一个迭代器对象,然后模拟出和for of一样的效果,比如:

js
// 获取迭代器对象
let iterator = range[Symbol.iterator]()
while (true) {
    let result = iterator.next()
    // 出口
    if (result.done) {
        break
    }
    console.log(result.value);
}
// 1 2 3 4 5

很少需要我们这样做,但是比 for..of 给了我们更多的控制权。例如,我们可以拆分迭代过程:迭代一部分,然后停止,做一些其他处理,然后再恢复迭代。

类数组对象

通过上面的学习,我们已经认清了可迭代对象的本质,实际上就是对象按照规范实现了Symbol[iterator]方法。那什么是类数组对象呢?我们工作中总能碰到这样的场景,某个对象它是可迭代的,某个对象它是类数组,某个对象即可迭代又是个类数组。可迭代我们已经知道了,类数组的本质其实也很简单,就是那些具有数值索引和length属性的对象。

一个小例子

如下面的例子,arrayLike对象即是一个类数组对象,它具备了类数组对象的特征,有数值索引、有length。但是类数组对象没有数组上的方法,比如pushpop等等,如果想用,就得使用call或者apply等改变一下this指向,借用一下Array原型上的方法。

js
let arrayLike = { // 有索引和 length 属性 => 类数组对象
    0: "Hello",
    1: "World",
    sayHi() {
        console.log('hhh');
    },
    length: 2
};
[].push.call(arrayLike, 'nn');
console.log(arrayLike);
/* 
{
  '0': 'Hello',
  '1': 'World',
  '2': 'nn',
  sayHi: [Function: sayHi],
  length: 3
}
*/
let str = [].join.call(arrayLike, '-')
console.log(str); // Hello-World-nn

我们发现,arrayLike对象是个类数组对象,但是它是不可迭代的,因为我们没有实现它的Symbol[iterator]迭代器方法。而在可迭代对象中举的例子,range对象,它是可迭代的,但它不是一个类数组,因为它没有类数组对象的特征(没有数值索引和length)。不过在我们实际工作中,有很多对象它即是类数组,又是可迭代的。比如字符串(for..of 对它们有效,并且有数值索引和 length 属性)。

Array.from

Array.from我们常用来将一个类数组对象转换为真正的数组。其实它还可以将可迭代对象也转换为数组。

类数组转数组

先看一下类数组转数组的例子:

js
let arrayLike = {
    0: 'hello',
    1: 'world',
    length: 2
}

console.log(Array.from(arrayLike)); // [ 'hello', 'world' ]

实际就是按照数值索引的位置,将对应的值塞到一个新数组中,数组的长度取决于length的长度,长度不够就截断,长度超出就在对应位置补undefined

可迭代转数组

再看一个可迭代转数组的例子,还拿我们写的range举例子。

js
let range = {
    from: 1,
    to: 5
}

range[Symbol.iterator] = function () {
    // 返回一个迭代器对象
    return {
        current: this.from,
        last: this.to,

        next() {
            // 结束条件
            if (this.current > this.last) {
                return { done: true }
            } else {
                return {
                    value: this.current++, // current++ 第一次调用的时候,取值还是 1,
                    done: false
                }
            }
        }
    }
}

// 将可迭代对象,转换为了数组
console.log(Array.from(range)); // [ 1, 2, 3, 4, 5 ]

实际就是获取到迭代器的next().value的值,依次塞到新数组中去,然后返回这个新数组。

总结

  1. 可迭代对象(iterable object):可以使用for of遍历的对象就是可迭代对象。

    可迭代的本质是该对象实现了Symbol.iterator迭代器方法。迭代器返回的是一个对象,即是所谓的迭代器对象。

    迭代器对象有next()方法,next()方法的返回值也是一个对象,遵循这样的规范{value: 'xxx', done: true|false}

  2. for of实际就是调用了一下[Symbol.iterator]()方法,获取了迭代器对象,然后每次遍历时调用一次迭代器对象的next()方法,获取到value的值,当标识符done === true时,表示遍历完成,结束for of

  3. 类数组对象(array-like object):具有数值索引和length属性的对象。

    类数组对象没有数组上的push、pop等方法,要想使用的话有两个办法:

    • 转换为数组,使用Array.from(arrayLike)
    • 使用call、apply、bind改变this的指向,借用Array原型上的方法,比如[].push.call(arrayLike, 'xxx')
  4. Array.from可以将可迭代对象或者类数组对象转换为一个真正的数组。

    • 转换类数组对象时,就是把索引值获取到,依次按照索引值塞进一个新数组中(长度由length属性确定,塞入的位置由索引值确定,长度不够就截断,长度超出就在对应位置塞undefined)。
    • 转换可迭代对象时,就是获取到每次迭代器对象next().value的值,依次塞到一个新数组中。

参考

https://zh.javascript.info/iterable#array-like