ES6 数组新特性（map，filter，forEach，reduce，array.from）

最新推荐文章于 2024-09-03 11:07:48 发布

Ethanzyc

最新推荐文章于 2024-09-03 11:07:48 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： ES6 数组 reduce 遍历过滤

本文链接：https://blog.csdn.net/zhuyuchen321/article/details/82634197

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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
 */

Array.from(arr)

Array.from(arr)的作用就是将 array-like 类型的数据转变成 array。

比如下例中，如果直接用 aDiv 去调用 forEach 会报错，因为 aDiv 其实并不是一个 array，而是 array-like。

报错信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: #eeeeee;
      margin: 20px;
      float: left;
    }
  </style>
  <script>
    window.onload = () => {
      let aDiv = document.getElementsByTagName('div');
      console.log(aDiv);
      // aDiv 其实并不是一个数组，而是个 array-like，在控制台中打印出来是个 HTMLCollection，所以不能用 forEach
      // 这时候就需要用 Array.from(arr)将一个 array-like 转换成一个真正的 array

      // aDiv.forEach(div => {
      //   div.style.background = 'red';
      // })

      Array.from(aDiv).forEach(div => {
        div.style.background = 'red';
      })
    }
  </script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>