• 技术文章 >web前端 >前端问答

    es6中数组新增常用的4个方法是什么

    青灯夜游青灯夜游2022-04-19 14:24:07原创104

    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
         //....
       })

    1.png

    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)

    2.png

    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)

    3.png

    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

    【相关推荐:javascript视频教程web前端

    以上就是es6中数组新增常用的4个方法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ES6
    上一篇:什么是es6模块化 下一篇:es6可以用双引号吗
    Web大前端开发直播班

    相关文章推荐

    • es6的set和map的区别是什么• es6数组怎么去掉规定的值• 新增的es6数据结构有哪些• es6中let与var的区别是什么• 强推:20个值得收藏的ES6小技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网