js(es6)数组有哪些常用方法

102 阅读3分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

js数组的类是Array,数组的方法有很多,最基础的比如push/pop/unshift/shift/join/concat/sort/reverse/splice等等,这些比较简单就不说了。

es6中也新增了一些,比如map方法、find方法、findIndex方法、filter方法、every方法、some方法、reduce方法、reduceRight方法、foreach方法、keys方法等等。

今天就来讲讲几个平时比较常用的,写到哪儿算哪儿吧。

  1. foreach 方法,原型上的一个方法,用于对数组遍历   
const arr = ["a", "s", "d"];
arr.forEach((item,index)=>{
    console.log(item);
    console.log(index);
})

foreach 没有返回值(返回值是undefined)

  1. map 方法, 遍历数组(原型上的一个方法,返回值是一个数组,所以必须加 return 返回值),将数组一一映射成一个新的数组,内部一定要使用return
var arr = ["a", "s", "f"];
const newArr=arr.map((item,index)=>{
  return `this is ${item}`
})
console.log(newArr)
  1. filter 方法, 过滤 从数组中找出所有符合条件的元素,并返回一个新的数组,不改变原有数组; return true 就保留原来的数组,return false 就不保留; 当return 的条件成立就是 true ,不成立就是 false
const arr= [
  
  {"name":"a","sort":1},

  {"name":"b","sort":2},

  {"name":"c","sort":3},

  {"name":"d","sort":4}

  ]

  const t=arr.filter((item,index)=>{
  
    return item.sort>2
    
  })

数组里有符合条件的,所以是 true ,所以返回符合条件的新数组

  1. find 方法, 对数组逐个查找,当返回值为 true 说明查找到,直接返回结果,不再往下查找了
const arr= [
  
  {"name":"a","sort":1},

  {"name":"b","sort":2},

  {"name":"c","sort":3},

  {"name":"d","sort":4}

  ];
  const t=arr.find((item,index)=>{

    return item.sort>1

  })

  console.log(t)
  
  1. reduce和reduceRight方法

reduce方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。reduce接受一个函数,函数有四个参数,分别是:上一次的值previousValue,当前值currentValue,当前值的索引index,数组array。

reduceRight方法和reduce方法一样,都是求数组累计数。不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。

reduceRight()首次调用回调函数callbackfn时,prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数,则 prevValue 等于 initialValue,curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数,则 prevValue 等于数组最后一个值, curValue 等于数组中倒数第二个值。

console.clear();

var arr = [0,1,2,3,4];

var total = arr.reduce((a, b) => a + b); ``//10

console.log(total);

var sum = arr.reduce(``function``(previousValue, currentValue, index, array){

  ``console.log(previousValue, currentValue, index);

  ``return previousValue + currentValue;

});

console.log(sum);

//第二个参数为5,第一次调用的previousValue的值就用传入的第二个参数代替

var sum1 = arr.reduce(``function``(previousValue, currentValue, index){

  ``console.log(previousValue, currentValue, index);

  ``return previousValue + currentValue;

},5);

console.log(sum1);

var sum2 = arr.reduceRight(``function (preValue,curValue,index) {

    ``return preValue + curValue;

}); ``// 10

var sum3 = arr.reduceRight(``function (preValue,curValue,index) {

    ``return preValue + curValue;

}, 5); ``// 15

//计算数组arr的平方和

var arr1 = arr.map((oVal) => {``return oVal*oVal;})

console.log(arr1);

var total1 = arr1.reduce((a, b) => a + b); ``//30

console.log(total1);

//计算指定数组和

let nums = [1, 2, 3, 4, 5];``// 多个数的累加

let newNums = nums.reduce(``function``(preSum,curVal,array) {

return preSum + curVal;

}, 0);

console.log(newNums)``//15

方法很多,今天先写到这里吧。