手写 javascript ES6 数组新增的迭代器,加深理解和巩固。

已于 2024-04-18 14:16:07 修改
阅读量887 收藏 31
点赞数 19
文章标签： javascript es6 前端
于 2024-04-16 18:35:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pangGeee/article/details/137829698
版权

手写 js es6 数组新增的迭代器,加深理解和巩固。

背景：在使用 es6 数组提供的 find，some，filter…等迭代器，原理上都是 es5 普通 for 循环的一种通用场景的实现的语法糖。这里手写简单实现，来加深巩固，供大家参考指正。

迭代器描述参考【mdn 官方文档】

文章目录

数据示例

//下面所写方法使用数据均参考下面list定义

let arr = [
  {
    id: 1,
    name: "小明",
    age: 18,
    site: "https://blog.csdn.net/pangGeee?type=blog",
  },
  {
    id: 2,
    name: "小红",
    age: 22,
    site: "https://blog.csdn.net/pangGeee?type=blog",
  },
  {
    id: 3,
    name: "小力",
    age: 25,
    site: "https://blog.csdn.net/pangGeee?type=blog",
  },
  {
    id: 4,
    name: "小吖",
    age: 33,
    site: "https://blog.csdn.net/pangGeee?type=blog",
  },
  {
    id: 5,
    name: "小范",
    age: 18,
    site: "https://blog.csdn.net/pangGeee?type=blog",
  },
  {
    id: 6,
    name: "小平",
    age: 20,
    site: "https://blog.csdn.net/pangGeee?type=blog",
  },
  {
    id: 7,
    name: "小北",
    age: 18,
    site: "https://blog.csdn.net/pangGeee?type=blog",
  },
  {
    id: 8,
    name: "小法",
    age: 16,
    site: "https://blog.csdn.net/pangGeee?type=blog",
  },
];

数组：手写 forEach

forEach() 方法是一个迭代方法。它按索引升序地为数组中的每个元素调用一次提供的 callbackFn 函数。与 map() 不同，forEach() 总是返回 undefined，而且不能继续链式调用。其典型的用法是在链式调用的末尾执行某些操作。

Array.prototype.pangGeForEach = function (callbackFn) {
  for (let i = 0; i < this.length; i++) {
    // 检查数组是否包含当前索引
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入当前元素、当前索引和原数组
      callbackFn(this[i], i, this);
    }
  }
};

// 示例用法
arr.pangGeForEach((item, index, arr) => {
  console.log(item, index, arr);
});

数组：手写 fliter

filter() 方法是一个迭代方法。它为数组中的每个元素调用提供的 callbackFn 函数一次，并构造一个由所有返回真值的元素值组成的新数组。未通过 callbackFn 测试的数组元素不会包含在新数组中。

Array.prototype.pangGeFilter = function (callbackFn) {
  const newArr = [];
  const length = this.length;
  for (let i = 0; i < length; i++) {
    // 检查数组是否包含当前索引
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入当前元素、当前索引和原数组
      if (callbackFn(this[i], i, this)) {
        // 如果回调函数返回 true，则将当前元素添加到新数组中
        newArr.push(this[i]);
      }
    }
  }

  // 返回新数组，其中包含满足条件的元素
  return newArr;
};

// 示例用法
let newArr = arr.pangGeFilter((item, index, arr) => {
  console.log(item, index, arr, "每行打印");
  return item.age === 18;
});
console.log(newArr, "结果");

数组：手写 map

map() 方法是一个迭代方法。它为数组中的每个元素调用一次提供的 callbackFn 函数，并用结果构建一个新数组。

Array.prototype.pangGeMap = function (callbackFn) {
  const newArr = [];

  for (let i = 0; i < this.length; i++) {
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入当前元素、当前索引和原数组
      const mappedValue = callbackFn(this[i], i, this);
      // 将映射后的结果添加到新数组中
      newArr.push(mappedValue);
    }
  }
  return newArr;
};

// 示例用法
let newArr = arr.pangGeMap((item, index, arr) => {
  console.log(item, index, arr, "每行打印");
  return {
    ...item,
    gender: item.age === 18 ? "女" : "男",
  };
});
console.log(newArr, "结果");

数组：手写 find

find() 方法是一个迭代方法。它按索引升序顺序为数组中的每个元素调用提供的 callbackFn 函数，直到 callbackFn 返回一个真值。然后 find() 返回该元素并停止迭代数组。如果 callbackFn 从未返回真值，则 find() 返回 undefined。

Array.prototype.pangGeFind = function (callbackFn) {
  for (let i = 0; i < this.length; i++) {
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入当前元素、当前索引和原数组
      if (callbackFn(this[i], i, this)) {
        // 如果回调函数返回 true，则返回当前元素
        return this[i];
      }
    }
  }
  return undefined;
};

// 示例用法
let newArr = arr.pangGeFind((item, index, arr) => {
  console.log(item, index, arr, "每行打印");
  return item.name === "小红";
});
console.log(newArr, "结果");

Alt

数组：手写 findLast

findLast() 是一个迭代方法。该方法对数组每一个元素按降序（索引从大到小）执行 callbackFn 函数，直到 callbackFn 返回一个真值。然后 findLast() 返回该元素的值并停止遍历数组。如果 callbackFn 没有返回一个真值，则 findLast() 返回 undefined。

Array.prototype.pangGeFindLast = function (callbackFn) {
  const length = this.length;

  for (let i = length - 1; i >= 0; i--) {
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入当前元素、当前索引和原数组
      if (callbackFn(this[i], i, this)) {
        // 如果回调函数返回 true，则返回当前元素
        return this[i];
      }
    }
  }

  return undefined;
};

// 示例用法
let newArr = arr.pangGeFindLast((item, index, arr) => {
  console.log(item, index, arr, "每行打印");
  return item.name === "小北";
});
console.log(newArr, "结果");

结果图片描述

数组：手写 findIndex

findIndex() 是一种迭代方法。它按照索引升序依次遍历数组中的每个元素，并调用提供的 callbackFn 函数，直到 callbackFn 返回一个真值。然后 findIndex() 返回该元素的索引并停止遍历数组。如果 callbackFn 从未返回一个真值，则 findIndex() 返回 -1。

Array.prototype.pangGeFindIndex = function (callbackFn) {
  const length = this.length;

  for (let i = 0; i < length; i++) {
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入当前元素、当前索引和原数组
      if (callbackFn(this[i], i, this)) {
        // 如果回调函数返回 true，则返回当前索引
        return i;
      }
    }
  }
  // 如果没有找到符合条件的元素，则返回 -1
  return -1;
};

// 示例用法
let newArr = arr.pangGeFindIndex((item, index, arr) => {
  console.log(item, index, arr, "每行打印");
  return item.name === "小北";
});
console.log(newArr, "结果");

结果图片描述

数组：手写 findLastIndex

findLastIndex() 方法是一个迭代方法。它为数组中的每个元素按索引降序调用一次提供的 callbackFn 函数，直到 callbackFn 返回一个真值。然后 findLastIndex() 返回元素的索引并且停止遍历数组。如果 callbackFn 没有返回一个真值，则 findLastIndex() 返回 -1。

Array.prototype.pangGeFindLastIndex = function (callbackFn) {
  const length = this.length;

  for (let i = length - 1; i >= 0; i--) {
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入当前元素、当前索引和原数组
      if (callbackFn(this[i], i, this)) {
        // 如果回调函数返回 true，则返回当前索引
        return i;
      }
    }
  }
  // 如果没有找到符合条件的元素，则返回 -1
  return -1;
};

// 示例用法
let newArr = arr.pangGeFindLastIndex((item, index, arr) => {
  console.log(item, index, arr, "每行打印");
  return item.name === "小北";
});
console.log(newArr, "结果");

数组：手写 some

some() 方法是一个迭代方法。它为数组中的每个元素调用一次指定的 callbackFn 函数，直到 callbackFn 返回一个真值。如果找到这样的元素，some() 方法将会立即返回 true 并停止遍历数组。否则，如果 callbackFn 对所有元素都返回假值，some() 就会返回 false。

Array.prototype.pangGeSome = function (callbackFn) {
  const length = this.length;
  for (let i = 0; i < length; i++) {
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入当前元素、当前索引和原数组
      if (callbackFn(this[i], i, this)) {
        // 如果回调函数返回 true，则返回 true
        return true;
      }
    }
  }
  // 如果没有找到符合条件的元素，则返回 false
  return false;
};

// 示例用法
let newArr = arr.pangGeSome((item, index, arr) => {
  console.log(item, index, arr, "每行打印");
  return item.name.indexOf("红") > -1;
});
console.log(newArr, "结果");

在这里插入图片描述

数组：手写 every

every() 方法是一个迭代方法。它为数组中的每个元素调用一次指定的 callbackFn 函数，直到 callbackFn 返回一个假值。如果找到这样的元素，every() 方法将会立即返回 false 并停止遍历数组。否则，如果 callbackFn 为每个元素返回一个真值，every() 就会返回 true。

Array.prototype.pangGeEvery = function (callbackFn) {
  const length = this.length;

  for (let i = 0; i < length; i++) {
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入当前元素、当前索引和原数组
      if (!callbackFn(this[i], i, this)) {
        // 如果回调函数返回 false，则返回 false
        return false;
      }
    }
  }

  // 如果所有元素都满足条件，则返回 true
  return true;
};

// 示例用法
let newArr = arr.pangGeEvery((item, index, arr) => {
  console.log(item, index, arr, "每行打印");
  return item.name.indexOf("pangGe") > -1;
});
console.log(newArr, "结果");

在这里插入图片描述

数组：手写 reduce

reduce() 方法是一个迭代方法。它按升序对数组中的所有元素运行一个“reducer”回调函数，并将它们累积到一个单一的值中。每次调用时，callbackFn 的返回值都作为 accumulator 参数传递到下一次调用中。accumulator 的最终值（也就是在数组的最后一次迭代中从 callbackFn 返回的值）将作为 reduce() 的返回值。

Array.prototype.pangGeReduce = function (callbackFn, initialValue) {
  const length = this.length;

  // 如果初始值未提供，则使用数组的第一个元素作为初始值，并将索引设置为 1
  let accumulator = initialValue === undefined ? this[0] : initialValue;
  let startIndex = initialValue === undefined ? 1 : 0;

  for (let i = startIndex; i < length; i++) {
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入累加器、当前元素、当前索引和原数组
      accumulator = callbackFn(accumulator, this[i], i, this);
    }
  }

  // 返回最终的累加值
  return accumulator;
};
// 示例用法,计算年龄总和
let sumAge = arr.pangGeReduce((acc, cur, index, arr) => {
  console.log(acc, cur, index, arr, "每行打印");
  acc += cur.age;
  return acc;
}, 0);
console.log(sumAge, "结果");

在这里插入图片描述

数组：手写 reduceRight

reduceRight() 方法是一个迭代方法。它为数组中的所有元素降序调用“reducer”回调函数，并将它们累积到一个单一的值中。

Array.prototype.pangGeReduceRight = function (callbackFn, initialValue) {
  const length = this.length;

  // 如果初始值未提供，则使用数组的最后一个元素作为初始值，并将索引设置为 length - 2
  let accumulator =
    initialValue === undefined ? this[length - 1] : initialValue;
  let startIndex = initialValue === undefined ? length - 2 : length - 1;

  // 遍历数组的每个元素，从右到左
  for (let i = startIndex; i >= 0; i--) {
    if (this.hasOwnProperty(i)) {
      // 调用回调函数，传入累加器、当前元素、当前索引和原数组
      accumulator = callbackFn(accumulator, this[i], i, this);
    }
  }

  // 返回最终的累加值
  return accumulator;
};

// 示例用法,计算id总和
let sumId = arr.pangGeReduceRight((acc, cur, index, arr) => {
  console.log(acc, cur, index, arr, "每行打印");
  acc += cur.id;
  return acc;
}, 0);
console.log(sumId, "结果");

在这里插入图片描述

总结：

上述代码中

  • 只是和 es6 中实现结果相同，相比 es6 源码少了严谨性，少了很多边界判断，仅供参考和理解。
  • 在过完所有自定义的迭代方法后，是不是更加明了，在每个语法糖实现的背后，存在的都是大道至简。

有疑问的同学可以私信我、对帮助到同学欢迎大家收藏评论。

web-p
关注
  • 19
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS中的迭代器（手写迭代器让对象也可迭代）
weixin_49318392的博客
08-22 431
迭代器和生成器 参考MDN：https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Iteration_protocols
js代码-手写makeIterator遍历器
07-16
此外，你还可以通过`Symbol.iterator`属性将`makeIterator`函数应用到类上，使该类具有迭代器能力，这样就能在`for...of`循环中直接使用实例。 总的来说，`makeIterator`函数是JavaScript中实现自定义迭代的重要...
js手写实现迭代器生成器函数包括【ES5】和【ES6】
Dou_Hua6的博客
03-13 497
【代码】js手写实现迭代器生成器函数包括【ES5】和【ES6】
深入浅出JS-19 手把手写个迭代器
分享前端知识，记录前端进阶
05-17 324
迭代器 迭代器是一个特殊的对象，可以帮助我们遍历另一个数据结构（数组 链表 映射表等 1. 基本结构 JS中迭代器是一个具体的对象，这个对象有一个next函数：函数无参数或者有一个参数，返回一个拥有以下两个属性的对象 done（boolean）：如果迭代器可以产生序列中的下一个值，则为 false；如果迭代器已将序列迭代完毕，则为 true。 value（任意类型）：迭代器返回的值 const iterator = { next() { reutrn { done: false, value：'任
手写自定义迭代器，秒懂迭代器底层原理
Tom弹架构
11-15 218
本文节选自《设计模式就该这样学》 迭代器模式的UML类图如下图所示。 ...
手写Promise & ES6迭代器
qq_18297591的博客
05-23 189
手写实现Promise Promise异步编程   异步编程简介：无论在浏览器环境还是node环境都需要JavaScript的异步编程，如在浏览器环境中的定时器、事件、ajax等或是node环境中的文件读取、事件等。伴随着异步编程就有回调机制，异步编程免不了回调。 异步编程问题：产生回调地狱，难于维护和扩展。 try、catch只能捕捉同步代码中出现的异常。 同步并发的异步操作存在一定的问题。 解决方案： ES6 Promise可以解决回调地狱，以及同步并发的异步问题。 jQuery的Callbacks和L
Es6+和Promise，迭代器，生成器，异常处理
qq_41950754的博客
10-12 2458
Es6+promise异步，迭代器生成器，异常处理
ES6：【深扒】 JavaScript 中的迭代器
2401_84092694的博客
04-07 871
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
ES6查漏补缺【数组的扩展】
jinchunye的博客
01-15 261
ES6查漏补缺 — 数组的扩展
JS:ES6-7 迭代器与生成器
小白目的博客
12-23 315
迭代器概述： 遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数 据结构只要部署 Iterator 接口，就可以完成遍历操作；需要自定义遍历数据的时候，要想到迭代器。 特性： ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费； 原生具备 iterator 接口的数据(可用 for of 遍历)：Array； Arguments； Set； Map； String； TypedArray； N..
前端面试常见手写题整理.zip
02-28
- Generator函数和迭代器协议，如何实现一个简单的异步流控制。 6. **模块化** - CommonJS（Node.js中）和ES6模块的区别。 - 使用`import`和`export`进行模块导入导出。 - 理解静态和动态导入的概念。 - AMD...
javascript：刘宾的博客->前端相关
02-04
javascriptjavascript基础系列学习手写原始码系列 每次地图过滤减少指数每个，一些ES6基础系列学习Set，Map，WeakSet和WeakMap的区别Iterator迭代器与浏览器相关工具类网络包Nginx的算法学习系列排序算法javascript...
js代码-013手写代码练习-----类数组转数组 ,打印出当前网页使用了多少种HTML元素
07-16
2. **Array.from()**：这是一个ES6新增的方法，能将类数组对象或可迭代对象转换为数组。如果环境支持ES6，可以使用这个简洁的方法： ```javascript var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}; var ...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 335
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 406
【代码】springboot网上商品订单转手系统bootpf
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 71
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
最新发布
u010865136的专栏
08-19 66
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
Vue路由
程小白的博客
08-19 334
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
JavaScript ES6 数组方法全解析
"这篇文档是关于JavaScript ES6中的数组方法大全，主要面向初学者，介绍了各种版本中数组的创建方式和一系列原型方法，包括ES5和ES6新增的方法。文档详细列出了每个方法的功能和是否改变原数组的特性。" 在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值