千家信息网

es6中数组新增常用的方法有哪些

发表于:2025-01-19 作者:千家信息网编辑
千家信息网最后更新 2025年01月19日,这篇文章主要介绍"es6中数组新增常用的方法有哪些",在日常操作中,相信很多人在es6中数组新增常用的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"es6中数
千家信息网最后更新 2025年01月19日es6中数组新增常用的方法有哪些

这篇文章主要介绍"es6中数组新增常用的方法有哪些",在日常操作中,相信很多人在es6中数组新增常用的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"es6中数组新增常用的方法有哪些"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

es6中数组新增常用的4个方法是:1、forEach(),用于遍历数组,无返回值;2、filter(),过滤掉数组中不满足条件的值;3、map(),遍历数组,返回一个新数组;4、reduce(),让数组的前后两项进行某种计算,然后返回其值。

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

ES6中新增4个很实用的数组方法,分别有:forEach,filter,map ,reduce。

1.forEach

遍历数组,无返回值,不改变原数组,仅仅只是遍历 --相当于for循环遍历

 let arr=[23,44,56,22,11,99]   let res=arr.forEach(item=>{     console.log(item);     //23,44,56,22,11,99   })   let res2=arr.forEach((item,index)=>{     console.log(item,index);     //23 0     //44 1     //....   })

2.filter:

filter()函数过滤掉数组中不满足条件的值,如果回调函数返回true就留下,返回一个新数组,不改变原数组,!!!可以用来做数组去重

   let arr = [1,5,2,16,4,6]   //1.找出数组中的偶数   let newArr=arr.filter((v,i)=>     v%2==0)     console.log(newArr,'newArr');//2,16,4,6   //2.过滤器 保留为TRUE的结果   let arrTue=[13,14,9,33]   let newArr2=arrTue.filter(item=>(item%3===0)?true:false)   console.log(newArr2,'newArr2');//9,33   //3.利用filter去重' // 第一种   let arr3=[2,3,5,1,2,3,4,5,6,8],newArr3   function unique(arr){    const res = new Map()    return arr.filter((item)=>      !res.has(item) && res.set(item,1)    )    }   console.log(newArr3=unique(arr3),'newArr3');//2,3,5,1,4,6,8//第二种  let testArray = [        {key:"01",name:'张三'},        {key:"02",name:'小李'},        {key:"03",name:'小罗'},        {key:"04",name:'张三'},        {key:"03",name:'小李'},      ];      let deduplicationAfter = testArray.filter((value,index,array)=>{      //findIndex符合条件的数组第一个元素位置。        return array.findIndex(item=>item.key === value.key && item.name === value.name) === index      })      console.log(deduplicationAfter)

3.map :

map遍历数组,返回一个新数组,不改变原数组, 映射 一个对一个,映射到一个新数组

let arr = [6,10,12,5,8]let result = arr.map(function (item) {    return item*2})let result2 = arr.map(item=>item*2) // es6的箭头函数简写,若想了解,后面的文章有介绍console.log(result)console.log(result2)let score = [18, 86, 88, 24]let result3 = score.map(item => item >= 60 ? '及格' : '不及格')console.log(result3)

4.reduce:

reduce()汇总 一堆出来一个(用于比如,算个总数,算个平均),reduce让数组的前后两项进行某种计算,然后返回其值,并继续计算,不改变原数组,返回计算的最终结果,如果不给定初始值,则从数组的第二项开始遍历

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) ,第一个参数回调函数,第二个参数初始值

4.1求和

//第一种给定初始值       var arr = [1, 3, 5, 7];        // 原理: 利用reduce特性 prev初始值设置0 并把函数的返回值再次带入函数中        var sum = arr.reduce(function (tmp, item,index) { // prev 初始为0 以后则为函数返回的值          console.log(tmp,item,index);                    //  0 1  0                        //      1 3  1                        //       4 5  2                        //       9 7  3            return tmp + item; // 数组各项之间的和        }, 0);       console.log(sum); //16   //第二种不给初始值   var arr2 = [1, 3, 5, 7]        var result = arr2.reduce(function (tmp, item, index) {            //tmp 上次结果,item当前数,index次数1开始            console.log(tmp, item, index)                //1 3 1                    // 4 5 2                    // 9 7 3             return tmp + item;        })console.log(result,)   //16

4.2 求平均数

var arr = [1, 3, 5, 7]var result = arr.reduce(function (tmp, item, index) {  console.log(tmp,item,index);  // 1 3  1 //  4 5  2 //  9 7  3    if (index != arr.length - 1) { // 不是最后一次        return tmp + item    } else {        return (tmp + item)/arr.length    }})console.log(result,'[[[u99')  // 平均值  4

到此,关于"es6中数组新增常用的方法有哪些"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

0