频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
ES6数组新特性解析(map,filter,forEach,reduce)
2018-09-12 15:06:12      个评论      
收藏   我要投稿

ES6 数组新特性(map,filter,forEach,reduce)

map:原来数组有多少个,map 处理之后还是那么多个。参数:item,index,array

let arr = [12,35,56,79,56];
let arr1 = arr.map(item => item%2 === 0  '偶' : '奇');
let arr2 = arr.map((item,index) => index + ':' + item);

console.log(arr);  // [ 12,     35,      56,    79,     56     ]
console.log(arr1); // [ '偶',   '奇',    '偶',   '奇',   '偶'    ]
console.log(arr2); // [ '0:12', '1:35', '2:56', '3:79', '4:56' ]

filter: 过滤掉不符合条件的。参数:item,index,array

let arr = [12,75,56,79,56];
let arr1 = arr.filter(item => item>=60);
console.log(arr);  // [ 12, 75, 56, 79, 56 ]
console.log(arr1); // [ 75, 79 ]

forEach: 遍历。仅仅只是循环用,无返回值,也不会改变原数组。 参数:item,index,array

let arr = [12,35,56,79,56];
let arr1 = arr.forEach(item => item+20);
console.log(arr);  // [12,35,56,79,56]
console.log(arr1); // undefined

reduce: 汇总。下面代码中的 tmp 可以理解为前一个值。

let arr = [12,35,56,79,56];
let avg = arr.reduce((tmp,item,index) => {
  tmp += item;
  if(index === arr.length-1) tmp /= (index+1);
  return tmp;
})
console.log(avg); // 47.6  也就是这五个数的平均值

关于 reduce 的参数,其实有五个,tmp,item,index,array,init。如果没有传入 init,初始值就会取数组的第一个值,并且内部调用时,index 从1开始。

let arr = [12,35,56,79,56];
let avg = arr.reduce((tmp,item,index,array) => {
  console.log(tmp,item,index,array);
  tmp += item;
  if(index === arr.length-1) {
    console.log('我要求平均数了');
    tmp /= (index+1);
  }
  return tmp;
})
console.log(avg);

/*
  12 35 1 [ 12, 35, 56, 79, 56 ]
  47 56 2 [ 12, 35, 56, 79, 56 ]
  103 79 3 [ 12, 35, 56, 79, 56 ]
  182 56 4 [ 12, 35, 56, 79, 56 ]
  我要求平均数了
  47.6
 */

如果传入了初始值 10000,index 就从0开始。tmp 的初始值也就是10000,结果自然也不同了。

let arr = [12,35,56,79,56];
let avg = arr.reduce((tmp,item,index,array) => {
  console.log(tmp,item,index,array);
  tmp += item;
  if(index === arr.length-1) {
    console.log('我要求平均数了');
    tmp /= (index+1);
  }
  return tmp;
}, 10000)
console.log(avg);

/*
  10000 12 0 [ 12, 35, 56, 79, 56 ]
  10012 35 1 [ 12, 35, 56, 79, 56 ]
  10047 56 2 [ 12, 35, 56, 79, 56 ]
  10103 79 3 [ 12, 35, 56, 79, 56 ]
  10182 56 4 [ 12, 35, 56, 79, 56 ]
  我要求平均数了
  2047.6
 */
点击复制链接 与好友分享!回本站首页
上一篇:js之异步加载解析
下一篇:idea+maven+mybatis入门教程(mybatis简介)
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站