js 数据处理操作数组-CFANZ编程社区

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、在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位
*/

确定参数1function
在array原型上面写想要实现的方法也就是myForEach

接下来咱们在完善下咱们的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

确定参数1function
在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

确定参数1function
在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

确定参数1function
在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

确定参数1function
在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

确定参数1function
在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

确定参数1function
在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