常用的数组的方法

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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值