一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

JavaScript–一文吃透 可迭代对象 与 类数组对象

本文将带大家从认识可迭代对象 与 类数组对象,并手搓一个IRange类,他既是可迭代对象又是类数组对象😎

IRange类:该类需要传入两个参数:from to(from和to是整数),然后该类的实例对象即是可迭代对象又是类数组对象,迭代的每一项是[from,to]区间的所有整数;

可迭代对象

可迭代对象是遵从可迭代协议的对象,并且JavaScript专门为可迭代对象提供了遍历的方法:for..of(这也是验证一个对象是否是可迭代对象的依据–能否使用for..of遍历);

可迭代协议

那什么是可迭代协议呢?

可迭代协议允许JavaScript对象定义或定制它们的迭代行为!

在JavaScript中,有以下类型的对象都实现了可迭代协议并有其迭代行为:

  • String (也是类数组对象)
  • Array (也是类数组对象)
  • TypedArray (也是类数组对象)
  • Map
  • Set

可迭代协议要求一个可迭代对象必须实现@@iterator方法,也就是必须要有一个@@iterator属性,而这个键可以通过Symbol.iterator访问—>也就是说以上的JavaScript内置的可迭代对象都拥有一个Symbol.iterator属性;

[Symbol.iterator]属性的值是一个无参函数,且返回一个符合迭代器协议的对象

现在我们知道了这一点后,已经可以实现支持可迭代的IRange类了:

分析:

  • 该类有两个属性:from to;
  • 拥有一个[Symbol.iterator]属性,其功能是使得该类实例对象可以使用for..of遍历[from,to]内的所有整数;

虽然你现在还不知道迭代器协议是什么,但是我们知道Array的实例身上有属性[Symbol.iterator],且其返回值为一个符合迭代器协议的对象,那么我们可以利用他来实现:

function IRange(from, to) {
  this.from = from;
  this.to = to;
  this[Symbol.iterator] = function () {
    const array = new Array(to - from + 1).fill(0).map((_, index) => from + index);
    //注意我们构造了一个from到to的Array,而他的[Symbol.iterator]属性的值是一个函数,该函数的返回值才是我们这个[Symbol.iterator]属性所需要的,因此一定要记得返回的是array[Symbol.iterator]的返回值
    return array[Symbol.iterator]();
  }
}

然后你可以使用for..of测试一下:

const range = new IRange(2,4);
for(const cur of range){
    console.log(cur);
}// 2 3 4

当然到这里肯定还不够,我们需要去了解迭代器协议

迭代器协议

迭代器协议规定了迭代器对象,一个对象需要包含以下属性,才可以被称为一个迭代器对象:

  • next()方法 (必须)
    • 返回值必须是一个对象,以下属性均为可选
      • done:boolean 表示迭代器是否可以生成下一个值
      • value:any 表示被迭代的值

因此我们可以得到下图所示的知识结构:

JavaScript--一文吃透 可迭代对象 与 类数组对象

一个可迭代对象应该与下图类似:

JavaScript--一文吃透 可迭代对象 与 类数组对象

依靠前面的知识,我们就可以完善IRange类了:

function IRange(from, to) {
  this.from = from;
  this.to = to;
  this[Symbol.iterator] = function () {
    let current = this.from;
    const last = this.to;
    return {
      next() {
        if (current <= last) {
          return { done: false, value: current++ };
        } else {
          return { done: true };
        }
      }
    }
  };
  let index = 0;
  for (const item of this) {
    this[index] = item;
    index++;
  }
  this.length = index;
}

类数组对象

类数组对象十分简单,一个类数组对象需要满足以下两个条件:

  1. 被遍历项有索引
  2. length属性

那么我们构造一个类数组对象是非常简单的:

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

对于这样的对象,我们只能使用普通的for循环来遍历:

for(let i = 0; i<arrayLike.length;i++){
    console.log(arrayLike[i]);
}

类数组对象十分的普通,对他的要求就是这么简单!

那么再完善我们的IRange类,此时我们只需要再对象上添加对应的索引和值以及length即可,我们直接利用刚刚实现的可迭代协议:使用for..of😎

最终的完整代码如下:

function IRange(from, to) {
  this.from = from;
  this.to = to;
  this[Symbol.iterator] = function () {
    let current = this.from;
    const last = this.to;
    return {
      next() {
        if (current <= last) {
          return { done: false, value: current++ };
        } else {
          return { done: true };
        }
      }
    }
  };
  let index = 0;
  for (const item of this) {
    this[index] = item;
    index++;
  }
  this.length = to - from + 1;
}

扩展

为什么一开始讲解可迭代对象时,要先借助其他内置可迭代对象的[Symbol.iterator]?

一方面是因为这样能循序渐进的讲述,另一方面是因为遇见了一个面试题:如何让下面的代码成立:const [a,b] = {a:3,b:4}

我们知道这是一个解构语法,但是右边是对象,左边是数组,显然是不成立的,但是如果你知道解构这个语法糖背后做了什么,你就可以解决了;

支持解构的对象,必须是一个可迭代对象

那么问题就在于这个普通对象{a:3,b:4}不是可迭代对象,而我们只要将其转换为可迭代对象就可以了,简单的方法就是利用数组的[Symbol.iterator]属性;

Object.prototype[Symbol.iterator] = function () {
  // const arr = [3, 4]; //这种方式不是动态的
  const arr = Object.values(this) //使用Object.values(obj)返回obj 自有 可枚举 字符串类型的键 对应的值所组成的数组
  return arr[Symbol.iterator]();
}

Object.values()


Array.from()方法

Array.from 可以接受一个可迭代或类数组的值,并从中获取一个“真正的”数组。然后我们就可以对其调用数组方法了。

这个方法使得:

  • 一个类数组对象或可迭代对象能够拥有数组的方法:push pop map forEach...
  • 还能使一个类数组对象变为可迭代对象,或者使可迭代对象变为类数组对象,因为我们知道Array类型对象两者都是;
Array.from(obj[, mapFn, thisArg])

我们可以借助Array.from来修改IRange类:

function IRange(from, to) {
  return Array.from({ length: to - from + 1 }, (_, index) => from + index);
}

这好像没啥意义了,IRange成了一个创建数组的方法了😅;

不过有个小知识点:就是当使用new关键词调用构造函数生成对象时,如果返回的是原始类型,则返回值无效,最终返回的是构造的对象,如果返回值是对象那么这个对象有效;

总结

  • 可迭代对象:遵循可迭代协议,对象必须拥有[Symbol.iterator]属性,值是一个无参函数,并且返回一个迭代器;
    • 迭代器:遵循迭代器协议,必须拥有next()方法,next方法返回一个对象{done:boolean,value:any};
  • 类数组对象:需要遍历的值都有类似数组一样的索引,并且具有length属性;

原文链接:https://juejin.cn/post/7326738921471868937 作者:Ys_OoO

(0)
上一篇 2024年1月22日 下午5:13
下一篇 2024年1月23日 上午10:05

相关推荐

发表评论

登录后才能评论