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

·  阅读 605
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
复制代码

结束语:

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

源码:稍后贴

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改