map()、filter()、reduce()等常用数组的用法和js模拟实现

153 阅读4分钟

一、map数组

1、定义:map方法对数组进行遍历,并返回一个新的数组 2、用法:

  let arr = [1,2,3,4,5]
          let newArr = arr.map((item,index)=>{
              return item * 10
          })
          console.log(newArr)//[10, 20, 30, 40, 50]

3、JS模拟实现:

/**
 * @function  map方法模拟
 * @arr  数组
 * @callback  方法调用
 */
   function mapSimulate(arr,callback){
      let result = []
      for(let i = 0;i<arr.length;i++){
         result.push(callback(arr[i],i))
      }
      return result
}
   let result =  mapSimulate(arr,(item,index)=>{
              return item * 10
        })
   console.log('结果',result)//[10, 20, 30, 40, 50]

二、filter

1、定义:filter方法对数组遍历,返回符合条件的值,组成新的数组 2、用法:取数组的偶数

let arr = [1,2,3,4,5]
let newArr = arr.filter((item)=>item%2 === 0)
console.log(newArr) //[2,4]

3、JS模拟实现

/**
 * @function  filter函数
 * @param  arr 数组
 * @param  callback   回调函数
 */
function filterSimulate(arr,callback){
      let result = []
      for(let i = 0;i<arr.length;i++){
         if(callback(arr[i])){
           result.push(arr[i])
         }
      }
      return result
}

   let arr = [1,2,3,4,5]
   let newArr = filterSimulate(arr,(item)=>{
         return item%2 === 0
   })
   console.log(newArr)//[2,4]

三、reduce

1、定义:遍历数组,接受一个回调函数和一个初始值,回调函数两个参数,第一个为上一次的结果,第二个参数为当前项,返回一个计算结果。 2、用法:累加获取总数

 let arr = [1,2,3,4,5]
let result = arr.reduce(((res,item)=>{
     return res + item
}),0)
console.log(result) //15

3、JS模拟实现

/**
 * @function  filter函数
 * @param  arr 数组
 * @param  callback   回调函数
 * @param  initialValue   初始值
 */
function reduceSimulate(arr,callback,initialValue){
      let result = initialValue
      for(let i=0;i<arr.length;i++){
         result = callback(result,arr[i])
      } 
      return result
}
  let arr = [1,2,3,4,5]
  let result = reduceSimulate(arr,((res,item)=>{
      return res + item
  }),0)
  console.log(result)//15

四、find和findIndex

1、定义 两个有点类似,都是查找数组中符合条件的,当查找到一个符合的就返回,区别在于返回值,find返回当前项,没查找到返回undefined,findIndex返回当前下的下标值,没查找到就返回-1 2、使用

let arr = [1,2,3,4,5]
let res = arr.find(item=>item>2)
console.log(res)  //3


let arr = [1,2,3,4,5]
let res = arr.findIndex(item=>item>2)
console.log(res) //2

3、JS模拟实现

/**
 * @function  find函数
 * @param  arr 数组
 * @param  callback   回调函数
 */
function findSimulate(arr,callback){
      let result = null
      for(let i=0;i<arr.length;i++){
           if(callback(arr[i])){
             result = arr[i]
             return result
           }
      } 
}
let arr = [1,2,3,4,5]
let res = findSimulate(arr,item=>item>2)
console.log(res)  //3



/**
 * @function  findIndex函数
 * @param  arr 数组
 * @param  callback   回调函数
 */
function findSimulate(arr,callback){
      let result = null
      for(let i=0;i<arr.length;i++){
           if(callback(arr[i])){
             result = i
             return result
           }
      } 
}
let arr = [1,2,3,4,5]
let res = findSimulate(arr,item=>item>2)
console.log(res) //2

五、some和every

1、定义 some:遍历数组如果有一个条件满足就返回true,全部不满足返回false evey:遍历数组如果每一项都满足条件就返回true,否则返回false 2、使用

let arr = [1,2,3,4,5]
let res = arr.some(item=>item>1)
console.log(res) //true

let arr = [1,2,3,4,5]
let res = arr.every(item=>item>1)
console.log(res) //false

3、JS代码实现

/**
 * @function  some函数
 * @param  arr 数组
 * @param  callback   回调函数
 */
function someSimulate(arr,callback){
      let result = false
      for(let i=0;i<arr.length;i++){
           if(callback(arr[i])){
             result = true
           }
      } 
      return result
}
let arr = [1,2,3,4,5]
let res = someSimulate(arr,(item)=>item>1)
console.log(res) //true



/**
 * @function  every函数
 * @param  arr 数组
 * @param  callback   回调函数
 */
function everySimulate(arr,callback){
  let result = true
  for(let i=0;i<arr.length;i++){
       if(!callback(arr[i])){
         result = false
       }
  } 
  return result
}
let arr = [1,2,3,4,5]
let res = everySimulate(arr,(item)=>item>1)
console.log(res) //false

六、数组去重的三种方式

(1)new Set()

/**
 * @function  数组去重
 * @param  arr 数组
 */
function deweight(arr){
     return [...new Set(arr)]
}
let arr = [1,2,3,1,2,3,4,5,6,5]
let result = deweight(arr)
console.log(result) //[1,2,3,4,5,6]

(2)forEach加indexOf

function deweight(arr){
    let newArr = []
    arr.forEach(item => {
         if(newArr.indexOf(item) === -1 ){
           newArr.push(item)
         }
    });
    return newArr
}
let arr = [1,2,3,1,2,3,4,5,6,5]
let result = deweight(arr)
console.log(result) //[1,2,3,4,5,6]

(3)forEach加对象判断

function deweight(arr){
   let newArr = [] 
   let newObj = {}
   arr.forEach(item => {
       if(!newObj[item]){
         newArr.push(item)
         newObj[item] = true
       }
   });
   return newArr
}
let arr = [1,2,3,1,2,3,4,5,6,5]
let result = deweight(arr)
console.log(result) //[1,2,3,4,5,6]

七、concat数组合并

1、定义 数组和其他数组或者数值进行合并 2、使用:

let arr1 = [1,2,3]
let result = arr1.concat([4,5,6,7],8,9)
console.log(result) //[1, 2, 3, 4, 5, 6, 7, 8, 9]

3、使用JS模拟实现

function concatSimulate(arr1,...arg){ 
    let result = arr1
    let newArg = [...arg]
    newArg.forEach(item=>{
        if(Array.isArray(item)){
          result.push(...item)
        }else{
          result.push(item)
        }
    })
    return result
}

let arr1 = [1,2,3]
let result = concatSimulate(arr1,[4,5,6],7,8)
console.log(result)//[1, 2, 3, 4, 5, 6, 7, 8, 9]

八、slice()数组切割

1、定义 数组的切割,接收两个参数,第一个为开始截取的位置,包含截取的位置,第二个截取结束的位置,不包含结束位置的截取,开始位置大于数组总长度默认返回空数组,结束位置大于总长度或者不穿,则截取到最后一位。返回一个截取后的新数组,原数组不改变。 2、使用:

let arr1 = [1,2,3,4,5,6,7,8]
let result = arr1.slice(0,2) 
console.log(result)// [1,2]

3、使用JS模拟实现

function sliceSimulate(arr,start,end){ 
    let result = []
    //start传的值大于数组长度,直接返回空数组
    if(start>arr.length){
      return []
    }
    //end不传或者大于数组长度,截取到最后一位
    if(!end||end>arr.length){
      end = arr.length
    }
    for(let i= 0;i<arr.length;i++){
       if(i>=start&&i<end){
         result.push(arr[i])
       }
    }
    return result
}

let arr = [1,2,3,4,5,6,7,8]
let result = sliceSimulate(arr,2)  //[1,2]
console.log(result)

九、数组扁平化

1、定义:将多维数组转换成一维数组

2、使用递归的方式

function flatttening(arr){
   let result = []
   for(let i = 0;i<arr.length;i++){
      if(Array.isArray(arr[i])){
        result.push(...flatttening(arr[i]) )
      }else{
         result.push(arr[i])
      }
   }
   return result
}
let arr = [1,2,3,[2,3,4,[5,5,6]],4,5,6,[7,8]]
let result = flatttening(arr)
console.log(result)//[1, 2, 3, 2, 3, 4, 5, 5, 6, 4, 5, 6, 7, 8]

3、使用map加concat 更加简便的实现方式

function flatttening(arr){
  while(arr.some(item=>Array.isArray(item))){
    arr = [].concat(...arr)
    console.log(arr)
  }
  return arr
}
let arr = [1,2,3,[2,3,4,[5,5,6]],4,5,6,[7,8]]
let result = flatttening(arr)
console.log(result)//[1, 2, 3, 2, 3, 4, 5, 5, 6, 4, 5, 6, 7, 8]