常用的数组的方法-CSDN博客

forEach()

forEach()用于数组的遍历，参数接收一个回调函数，回调函数中接收三个参数，分别代表每一项的值、下标、数组本身。
要保证数组能访问到我们自己手写的API，必须将其挂到数组的原型上。
示例

const arr = [
  { name: 'zt', age: 18 },
  { name: 'aa', age: 19 },
  { name: 'bb', age: 18 },
  { name: 'cc', age: 21 },
]

//代码实现
Array.prototype.my_forEach = function (callback) {
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this)
  }
}

//验证
arr.my_forEach((item, index, arr) => {      //111  111
  if (item.age === 18) {
    item.age = 17
    return   
  }
  console.log('111');
})

map()

map()也用于数组的遍历，与forEach不同的是，它会返回一个新数组，这个新数组是map接收的回调函数的返回值。
示例

const arr = [
  { name: 'zt', age: 18 },
  { name: 'aa', age: 19 },
  { name: 'bb', age: 18 },
  { name: 'cc', age: 21 },
]

Array.prototype.my_map=function(callback){
  const res=[]
  for(let i=0;i<this.length;i++){
    res.push(callback(this[i],i,this))
  }
  return res
}

//验证
let newarr=arr.my_map((item,index,arr)=>{
  if(item.age>18){
    return item
  }
})
console.log(newarr);  
//[
 // undefined,
 // { name: 'aa', age: 19 },
 // undefined,
 // { name: 'cc', age: 21 }
//]

filter()

filter()用于筛选过滤满足条件的元素，并返回一个新数组。

const arr = [
  { name: 'zt', age: 18 },
  { name: 'aa', age: 19 },
  { name: 'bb', age: 18 },
  { name: 'cc', age: 21 },
]

Array.prototype.my_filter = function (callback) {
  const res = []
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this) && res.push(this[i])
  }
  return res
}

//验证
let newarr = arr.my_filter((item, index, arr) => {
  return item.age > 18
})
console.log(newarr);   [ { name: 'aa', age: 19 }, { name: 'cc', age: 21 } ]

reduce()

reduce()用于将数组中所有元素按指定的规则进行归并计算，返回一个最终值。
reduce()接收两个参数：回调函数、初始值（可选）。
回调函数中接收四个参数：初始值或存储上一次回调函数的返回值、每一项的值、下标、数组本身。
若不提供初始值，则从第二项开始，并将第一个值作为第一次执行的返回值。

const arr = [
  { name: 'zt', age: 18 },
  { name: 'aa', age: 19 },
  { name: 'bb', age: 18 },
  { name: 'cc', age: 21 },
]

Array.prototype.my_reduce = function (callback,...arg) {
  let pre,start=0
  if(arg.length){
    pre=arg[0]
  }
  else{
    pre=this[0]
    start=1
  }
  for (let i = start; i < this.length; i++) {
    pre=callback(pre,this[i], i, this)   
  }
  return pre
}

//验证
const sum = arr.my_reduce((pre, current, index, arr) => { 
  return pre+=current.age
},0)  
console.log(sum);  //76

fill()

fill()用于填充一个数组的所有元素，它会影响原数组，返回值为修改后的原数组。
fill()接收三个参数：填充的值、起始位置（默认为0）、结束位置（默认为this.length-1）。
填充遵循左闭右开的原则
不提供起始位置和结束位置时，默认填充整个数组。

Array.prototype.my_fill = function (value,start,end) {
  if(!start&&start!==0){
    start=0
  }
  end=end||this.length
  for(let i=start;i<end;i++){
    this[i]=value
  }
  return this
}

//验证
const arr=new Array(7).my_fill('hh',null,3)  //往数组的某个位置开始填充到哪个位置，左闭右开
console.log(arr);   //[ 'hh', 'hh', 'hh', <4 empty items> ]

includes()

includes()用于判断数组中是否包含某个元素，返回值为 true 或 false
includes()提供第二个参数，支持从指定位置开始查找

const arr = ['a', 'b', 'c', 'd', 'e']

Array.prototype.my_includes = function (item,start) {
  if(start<0){start+=this.length}
  for (let i = start; i < this.length; i++) {
    if(this[i]===item){
      return true
    }
  }
  return false
}

//验证
const flag = arr.my_includes('c',3)  //查找的元素，从哪个下标开始查找
console.log(flag); //false

join()

join()用于将数组中的所有元素以指定符号连接成一个字符串


const arr = ['a', 'b', 'c']

Array.prototype.my_join = function (s = ',') {
  let str = ''
  for (let i = 0; i < this.length; i++) {
    str += `${this[i]}${s}`
  }
  return str.slice(0, str.length - 1)
}

//验证
const str = arr.my_join(' ')
console.log(str);  //a b c

find()

find()用于返回数组中第一个满足条件的元素，找不到返回undefined
find()的参数为一个回调函数

const arr = [
  { name: 'zt', age: 18 },
  { name: 'aa', age: 19 },
  { name: 'bb', age: 18 },
  { name: 'cc', age: 21 },
]

Array.prototype.my_find = function (callback) {
  for (let i = 0; i < this.length; i++) {
    if(callback(this[i], i, this)){
      return this[i]
    }

  }
  return undefined
}

//验证
let j = arr.my_find((item, index, arr) => {  
  return item.age > 19   
})
console.log(j);   //{ name: 'cc', age: 21 }

findIndex()

findIndex()用于返回数组中第一个满足条件的索引，找不到返回-1
findIndex()的参数为一个回调函数

const arr = [
  { name: 'zt', age: 18 },
  { name: 'aa', age: 19 },
  { name: 'bb', age: 18 },
  { name: 'cc', age: 21 },
]

Array.prototype.my_findIndex = function (callback) {
  for (let i = 0; i < this.length; i++) {
    if(callback(this[i], i, this)){
      return i
    }
  }
  return -1
}


let j = arr.my_findIndex((item, index, arr) => {  
  return item.age > 19
})
console.log(j);  //3

some()

some()用来检测数组中的元素是否满足指定条件。
若有一个元素符合条件，则返回true，且后面的元素不会再检测。

const arr = [
  { name: 'zt', age: 18 },
  { name: 'aa', age: 19 },
  { name: 'bb', age: 18 },
  { name: 'cc', age: 21 },
]

Array.prototype.my_some = function (callback) {
  for (let i = 0; i < this.length; i++) {
    if(callback(this[i], i, this)){
      return true
    }
  }
  return false
}

//验证
const flag = arr.some((item, index, arr) => {
  return item.age > 20
})
console.log(flag);  //true

every()

every() 用来检测所有元素是否都符合指定条件。
若有一个不满足条件，则返回false，后面的元素都不会再执行。

const arr = [
  { name: 'zt', age: 18 },
  { name: 'aa', age: 19 },
  { name: 'bb', age: 18 },
  { name: 'cc', age: 21 },
]

Array.prototype.my_every = function (callback) {
  for (let i = 0; i < this.length; i++) {
    if(!callback(this[i], i, this)){
      return false
    }
  }
  return true
}

//验证
const flag = arr.my_every((item, index, arr) => {
  return item.age > 16
})
console.log(flag);  //true