js 实现数组方法 forEach、filter、map、some、every、find、findIndex

三原 创作等级LV.3
js 实现数组方法 forEach、filter、map、some、every、find、findIndex

js 数据处理 操作数组

请添加图片描述

这是一篇关于数组的操作的个人理解，目的是让你更加方便的操作数组

forEach

forEach 大家应该都不陌生 就是循环一个数组。

  • 参数1 是数组的每一条数据
  • 参数2 是数组的索引
  • 参数3 是数组自己本身
const arr = [{name: '张三'}, {name: '李四'}, {name: '王五'}]；
arr.forEach((item,idx) => console.log(`我是${item.name}, 在数组的第 ${idx}位`))

/*
* 我是张三, 在数组的第 0位
* 我是李四, 在数组的第 1位
* 我是王五, 在数组的第 2位
*/
复制代码

那么怎么自己实现一个数组自己的forEach呢

  • 确定参数1 function
  • 在array原型上面写想要实现的方法 也就是myForEach
//1、在myForEach内部的this 就是咱们循环的数组 this = [{name: '{name: '张三'}, {name: '李四'}, {name: '王五'}'}]

//2、参数cb 也就是咱们传的函数了 需要咱们调用下输出结果

Array.prototype.myForEach = function(cb) {
    console.log(this,'this')
    for (let i = 0; i < this.length; i++) {
         cb(this[i], i, this)
    }
 }
   
 const arr1 = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
 
 arr1.myForEach((item,idx) => {
    console.log(`我是${item.name}, 在数组的第 ${idx}位`) 
  })


/*输出
* 我是张三, 在数组的第 0位
* 我是李四, 在数组的第 1位
* 我是王五, 在数组的第 2位
*/
复制代码

接下来咱们在完善下咱们的myforEach break;

Array.prototype.myForEach = function(cb) {
    if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')
    console.log(this,'this')
    for (let i = 0; i < this.length; i++) {
        if(!cb(this[i], i, this)) {
            break;
        }
    }
 }
   
 const arr1 = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
 
 arr1.myForEach((item,idx) => {
    if(idx === 1) return false;
    console.log(`我是${item.name}, 在数组的第 ${idx}位`) 
  })
//输出：
//我是张三, 在数组的第 0位

//其他的就不会输出了
复制代码

filter

filter 是做数组过滤用的

  • 参数1 该数据项
  • 参数2 索引
  • 返回一个新数组 不改变原数组
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const filterArr = arr.filter(item => item.name === '张三')
//输出 [{name: '张三'}]
复制代码

自己实现一个 myfilter

  • 确定参数1 function
  • 在array原型上面写想要实现的方法 也就是myFilter
  • 返回过滤后的新数组
Array.prototype.myFilter = function(cb) {
       if(typeof(cb) !== 'function') throw new Error('myFilter api only support function!')
       let arr = []; 
       for (let i = 0; i < this.length; i++) {
           if(cb(this[i], i, this)) {
             arr.push(this[i]);
           }
       }

       return arr;
}

const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const filterArr = arr.myFilter((item,idx) => item.name === '张三')
console.log(filterArr,'filterArr')

//输出 [{name: '张三'}]
复制代码

map

  • 参数1 该数据项
  • 参数2 索引
  • 返回一个自己想定义的新数组
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});

const newArrMap = arr.map(item => item.name);
console.log(newArrMap)
// 输出 ['张三', '李四', '王五']
复制代码

实现一个自己的myMap

  • 确定参数1 function
  • 在array原型上面写想要实现的方法 也就是myMap
  • 返回过滤后的新数组
Array.prototype.myMap = function(cb) {
       if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')
       let arr = []; 
       for (let i = 0; i < this.length; i++) {
           const newItem = cb(this[i], i, this);
           arr.push(newItem);
       }

       return arr;
}

const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const newArrMap = arr.myMap((item,idx) => item.name)
console.log(newArrMap,'newArrMap')
// 输出 ['张三', '李四', '王五']
复制代码

some

  • 参数1 该数据项
  • 参数2 索引
  • 当有一个为真就返回true, 全部为假返回false;
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});

const result1 = arr.some(item => item.name === '张三');
console.log(result1)
//输出 true
 
const result2 = arr.some(item => item.name === '赵四');
console.log(result2)
//输出 false
复制代码

实现一个自己的some

  • 确定参数1 function
  • 在array原型上面写想要实现的方法 也就是mySome
  • 当有一个为真就返回true, 全部为假返回false;
Array.prototype.mySome = function(cb) {
       if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')

       let result = false;
       for (let i = 0; i < this.length; i++) {
          const newItem = cb(this[i], i, this);
          if(newItem) {
            result = true;
            break;
          }
       }

       return result;
}

const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const result1 = arr.mySome((item,idx) => item.name === '张三')
const result2 = arr.mySome((item,idx) => item.name === '赵四')
console.log(result1, 'result1');
console.log(result2, 'result2');
//输出 true
//输出 false
复制代码

every

  • 参数1 该数据项
  • 参数2 索引
  • 当有所有为真就返回true, 一个为假返回false;
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});

const result1 = arr.every(item => item.name !== '张三');
console.log(result1,'result1')
//arr 有一个等于张三的 返回 false
//输出 false
const result2 = arr.every(item => item.name !== '赵四');
//arr 所有都不等于 赵四 返回true
console.log(result2,'result2')
//输出 true
复制代码

实现一个自己的myEvery

  • 确定参数1 function
  • 在array原型上面写想要实现的方法 也就是myEvery
  • 当有所有为真就返回true, 一个为假返回false;
 Array.prototype.myEvery = function(cb) {
       if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')

       let result = true;
       for (let i = 0; i < this.length; i++) {
          const newItem = cb(this[i], i, this);
          if(!newItem) {
            result = false;
            break;
          }
       }

       return result;
}

const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const result1 = arr.myEvery((item,idx) => item.name !== '张三')
const result2 = arr.myEvery((item,idx) => item.name !== '赵四')
console.log(result1, 'result1');
console.log(result2, 'result2');
复制代码

find

  • 参数1 该数据项
  • 参数2 索引
  • 查找某条 符合条件的数据 找不到返回 undefined
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});

const findItem1 = arr.find(item => item.name === '张三');
console.log(findItem1);
//输出：{name: 张三}

const findItem2 = arr.find(item => item.name === '赵四');
console.log(findItem2);
//输出： undefined
复制代码

实现一个自己的 myFind

  • 确定参数1 function
  • 在array原型上面写想要实现的方法 也就是myFind
  • 查找某条 符合条件的数据 找不到返回 undefined;
   Array.prototype.myFind = function(cb) {
       if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')

       let findItem;
       for (let i = 0; i < this.length; i++) {
          const newItem = cb(this[i], i, this);
          if(newItem) {
            findItem = this[i];
            break;
          }
       }

       return findItem;
}

const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const findItem1 = arr.myFind((item,idx) => item.name === '张三')
const findItem2 = arr.myFind((item,idx) => item.name === '赵四')
console.log(findItem1, 'result1');
//输出： {name: 张三}
console.log(findItem2, 'result2');
//输出： undefined
复制代码

findindex

  • 参数1 该数据项
  • 参数2 索引
  • 查找某条 符合条件的索引 找不到返回 -1
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});

const findItem1 = arr.findIndex(item => item.name === '张三');
console.log(findItem1);
//输出：0

const findItem2 = arr.findIndex(item => item.name === '赵四');
console.log(findItem2);
//输出： -1
复制代码

实现一个自己的 myFindIndex

  • 确定参数1 function
  • 在array原型上面写想要实现的方法 也就是myFindIndex
  • 查找某条 符合条件的索引 找不到返回 -1;
   Array.prototype.myFindIndex = function(cb) {
       if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')

       let index = -1;
       for (let i = 0; i < this.length; i++) {
          const newItem = cb(this[i], i, this);
          if(newItem) {
            index = i;
            break;
          }
       }

       return index;
}

const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});

const findItem1 = arr.myFindIndex((item,idx) => item.name === '张三')
const findItem2 = arr.myFindIndex((item,idx) => item.name === '赵四')
console.log(findItem1, 'result1');
//输出：0
console.log(findItem2, 'result2');
//输出： -1
复制代码

结束语：

嘿嘿 看到这里希望对您有所帮助 写关于数组的几个循环的作用以及自己实现该方法 有任何问题，有可以优化的点 可以一块沟通讨论吖

源码：稍后贴

分类：
前端
标签：
JavaScript前端
相关推荐
  • 张亚博
    2年前
    JavaScript
    数组方法some、every和find的使用
    在MDN中这样定义：some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。 简而言之就是：它对数组中的每一项进行校验，只要有一项通过了就是true。 最近做后台管理系统遇到一个需求：弹出一个Dialog，只要这个Dialog…
    • 2842
    • 4
  • hsqfight
    2年前
    JavaScript
    Javascript数组查重和数组去重的N种办法（包含优缺点分析）
    网上去重的办法很多，查重的办法不多，先实现一个利用indexOf实现查重的办法。 三、for嵌套循环，splice实现。这种办法的缺点是NaN无法去重 四、数组排序后，比较相邻2项，将重复的去除，缺点是只能针对数字去重，如果加入其它（比如字符串，布尔类型，对象类型，那么会把相同…
    • 3420
    • 评论
  • 王大冶
    3年前
    JavaScript ECMAScript 6
    通过事例重温一下 JS 中 常见的15 种数组操作(备忘清单)
    数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法，如array. forEach()、array.map()等来操作数组。 在实战中，我经常对数组可能的操作和相应采用哪个更好的方法不知所措，所以本文就列出 15 种常用数据方法，让咱们重温加强记忆一下。 1. 数…
    • 1.4w
    • 33
  • 海澈
    2年前
    JavaScript
    Object.keys遍历对象数组
    实现：主要利用Object.keys方法获取对象的key,value值，配上forEach循环实现最终想要的结果。
    • 950
    • 评论
  • cv搬砖工
    1年前
    前端
    JS中的数组遍历 map, filter, find, findIndex,some, every, forEach, for in, for of 用法总结
    JS中的数组遍历 map, filter, find, findIndex,some, every, forEach, for in, for of 用法总结和区别。
    • 638
    • 评论
  • 一只老小白
    3年前
    ECMAScript 6
    foreach无法return - 如何中断foreach循环
    数组的 forEach 用于循环遍历数据，会对数组中有效的每一项执行一次回调函数，但是在遍历回调中使用 break 或 continue 会报错，使用 return 也无法终止循环。 currentValue: 数组中正在处理的当前元素。 index(可选): 数组中正在处理的…
    • 7196
    • 评论
  • panshihao
    2年前
    JavaScript
    js Array中filter、map、find的区别
    filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。 find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
    • 2042
    • 评论
  • 陆荣涛
    1年前
    前端
    如果再写for循环，我就锤自己了
    我要是急了，连自己都锤！ 几种遍历方法中for执行最快，它 没 有 任 何额外的函数调用栈和上下文。
    • 4.4w
    • 107
    如果再写for循环，我就锤自己了
  • 鲸木
    2年前
    源码
    自己实现一个reduce，reduce数组去重
    数组中reduce根据传递的回调函数和初始化返回对应的结果MDN中的描述reduce为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：accumul
    • 990
    • 评论
  • 慢慢编程
    3年前
    JavaScript
    JS数组中every, some, filter, map方法
     1.every()方法：作用：用于检测数组中所有元素是否符合指定条件。（全部）说明：如果数组中检测到有一个元素不满足，则整个表达式返回false，剩下的元素不会再进行检测，如果所有元素都满足条件，则
    • 2022
    • 评论
  • 前端郭德纲
    1年前
    前端
    JS Object 对象的相关方法
    Object.getPrototypeOf(),Object.setPrototypeOf(),Object.create(),Object.prototype.isPrototypeOf()
    • 1350
    • 2
  • Ariel_Bo
    4年前
    JavaScript
    indexOf()的用法
    1. indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 必需。 规定需检索的字符串值。 fromindex 可选的整数参数。 规定在字符串中开始检索的位置。 它的合法取值是 0 到 stringObject.length - 1。 如省略该参数，则将从…
    • 881
    • 评论
  • itclanCoder
    3年前
    JavaScript
    JavaScript数组中一些实用的方法(forEach,map,filter,find)
    代码是写给人看的,顺便在机器上运行。从这一角度上讲,个人支持多用Es5,Es6的迭代器方法,有时候在一些面试当中,会问你这其中的一些性能比较的
    • 1.0w
    • 20
  • 执着明日
    3年前
    JavaScript
    判断数组不为空
    假设后台返回的接口数据res里包含了一个字段list，list不是空数组的时候我们才会进行循环，否则就会报错，但是怎么判断他不是空数组呢？ let list=res.list if(list){ if(list.length>0){ //循环 } } 上面的代码中我是在第二层判…
    • 1745
    • 评论
  • 程序员Better
    1年前
    JavaScript 前端
    JavaScript一文搞定常用数组处理方法与数组去重
    后端传过来的那么多数据我们怎么处理？本文对数据的处理方式做了全面的总结 数据处理方式 归类: 常见改变原数组的: splice() 添加/删除
    • 396
    • 1
    JavaScript一文搞定常用数组处理方法与数组去重
  • sid_chen
    3年前
    JavaScript
    JavaScript中常用的数组操作方法
    concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。 join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用','号分割，不改变原数组。 push() 方法可向数组的末尾添加一个或多个…
    • 3191
    • 评论
  • dkwuwei
    1年前
    JavaScript
    JavaScript日常开发中常用的Object操作方法
    JavaScript日常开发中常用的Object操作方法 1. Object.assign() Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目
    • 1107
    • 4
  • 威少xyz
    3年前
    前端
    js循环以及跳出循环的总结
    初始化表达式，可以是一个任意复杂度的表达式，也可以声明变量。 执行for循环的条件表达式，如果值为true，循环中的语句会被执行，如果值为false，for循环终止。如果condition语句被省略，默认为true。 for循环的执行体。 更新表达式，一般用于更新循环变量，使得…
    • 3887
    • 评论
  • cfang
    3年前
    JavaScript
    js reduce 累加器#
    init 表示初始值。这个参数只是了返回值的类型,当没有的时候,arr[0]为默认值 常用的参数只有两个：prev 和 cur。
    • 614
    • 评论

    • 友情链接：

    三原 创作等级LV.3
    前端工程师
    私信
    获得点赞
    文章被阅读
    相关文章
    让整个网站界面无滚动条
    173点赞
     · 
    28评论
    大屏开发你需要知道哪些
    92点赞
     · 
    12评论
    【d3js】d3js实现一个围绕圆运动的动画效果
    11点赞
     · 
    4评论
    【d3js】手把手教你绘制一个折线图
    17点赞
     · 
    4评论
    【d3js（五）】d3.transtion() 过渡动画篇
    10点赞
     · 
    3评论