可迭代对象与类数组对象

by @zhangbao(zhangbao) #0107

注意，这里所指的“对象”并不是是严格意义上的对象。像字符串这样的基本类型值也叫对象。

概览

• 可迭代对象是指实现了 [Symbol.iterator] 方法属性的对象。
• 类数组对象则具备一个 .length 属性。
• 可使用 Array.from 将可迭代对象和类数组对象转为真实数组。

辨别

可迭代对象与类数组对象是两个彻底不一样的概念，不要弄混了。

• 可迭代对象 是指实现了 [Symbol.iterator] 方法属性的对象。
• 类数组对象 则具备一个 .length 属性，所以说它是相似数组的。

好比，下面的类数组对象就能不用 for...of 循环遍历。

// 由于具备 length 属性，所以属于类数组对象
let arrayLike = {
  0: "Hello",
  1: "World",
  length: 2
};

// 报错！for...of 是没法遍历没有部署 [Symbol.iterator] 属性的对象的
for (let item of arrayLike) {}
复制代码

可是，可迭代对象和类数组对象并不是是相互排斥的。好比，字符串既是可迭代对象（可以被 for...of 循环遍历），又是类数组对象。

但无论是可迭代对象仍是类数组对象，说其余它们都不是真实意义上的数组，所以不具有诸如 forEach、map、filter、reduce 等这些数组方法。这有时会给咱们操做对象带来很大的不便，那么咱们该如何作，才能在这些对象上使用数组方法呢？

答案是可使用 Array.from 方法。

Array.from

Array.from 这个方法神奇的地方在于，它能够将传入的可迭代对象或类数组对象，都能转换成真实的数组。

两个例子

举个例子：

看到没，arrayLike 传入 Array.from 以后，返回的是真实的数组。这样咱们就能很方便的使用数组方法操做数据了。

再以《可迭代对象》一文里的 range 变量为例（以下）。

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: false, value: this.current++ }
      } else {
        return { done: true }
      }
    }
  }
}
复制代码

咱们用 Array.from 处理一下。

发现也被正常处理了。

完整语法

其实上面都是基本用户，Array.from 方法的完整语法是这样的：

Array.from(obj[, mapFn, thisArg])
复制代码

除了以前使用过的第一个参数，即被处理的对象，另外两个可选参数含义是：

• mapFn：在将每一个成员添加进最终返回的数组以前，执行的映射函数。
• thisArg：指定映射函数执行上下文 this 的值。

举个例子：

从上图能够看见，经过将 mapFn 内的 this 指向 thisArg，咱们将 "apple" 转为了 "🍎"，将 "banana" 转为了 "🍌"，最后获得了最终返回的数组 ["🍎", "🍌"]。

参考连接

• javascript.info/iterable#ar…

（完）