ES5 新增数组方法 ES6 新增数组方法

ES5 新增数组方法

| 对象调用的方法                                              | 作用                         | 返回值   |
| --------------------------------------------------------- | --------------------------- | --------|
| array.forEach(function(item, index, array){})             | 遍历                         | 无      |
| array.map(function(item, index, array){})                 | 遍历&收集返回的项              | 新数组   |
| array.filter(function(item, index, array){ return 条件 })  | 过滤&保留return true的项      | 新数组   |
| array.reduce(function(sum, item, index, array) {}, 0)     | 遍历&累计求和                 | 累计结果 |
| array.every(function(item, index, array){ return 条件})    | 遍历&判断是否都满足条件         | 布尔值   |
| array.some(function(item, index, array){return 条件})      | 遍历&判断是否有某个满足条件      | 布尔值   |
| Array.from(伪数组)                                         | 伪数组转真数组                 | 真数组   |

ES6 新增数组方法

| 对象调用的方法                                               | 作用      | 返回值               |
| ------------------------------------------------------     | -------- | --------------------|
| array.find(function(item, index) { return 条件 })           | 遍历查找  | 找到的项 / undefined |
| array.findIndex(function(item, index) { return 条件 })      | 遍历查找  | 下标 / -1            |

let arr = [1, 5, 7, 3, 10, 2, 4]
// 1. forEach可以用于遍历一个数组, 每个元素都会执行一次函数
arr.forEach(function(item, index) {
  console.log(item, index)
})

// 2. map() 映射, 遍历数组, 收集每次函数return的结果 - 返回全新数组
let resultArr = arr.map(function(item, index) {
  return item * item
})
console.log(resultArr)

// 3. filter() - 过滤 - 遍历数组, 收集return true的结果, 返回一个新数组
let result2Arr = arr.filter(function(item, index) {
  return item > 5
})
console.log(result2Arr)

// 4. reduce 累加运算 - 遍历数组,需要返回累加的值, 可以进行累加操作
// arr.reduce(function(sum, item, index) { .. }, 起始累加值)
let result3 = arr.reduce(function(sum, item, index) {
  return sum + item
}, 0)
console.log(result3)

// 5. every 每个
// 作用: 遍历一个数组, 每个元素都会执行一次函数, 必须每次执行都返回true, 最终才会返回true
let flag = arr.every(function(item, index) {
  return item > 0
})
console.log(flag)

// 6. some 某个
// 作用: 遍历一个数组, 每个元素都会执行一次函数, 只要有一次执行返回true, 结果就是true
let flag2 = arr.some(function(item, index) {
  return item > 8
})
console.log(flag2)

// 7. Array.from(伪数组) 作用: 将伪数组转换成真数组
let divs = document.querySelectorAll('div')
Array.from(divs).some(function (item, index) {
  if (item.className === 'active') {
    return true
  } else {
    return false
  }
})

// -----------------------------------------------------------
// 8. find 找第一个符合条件的项, 没找到会返回 undefined
let arr2 = [
  { name: 'zs', score: 100 },
  { name: 'ls', score: 99 },
  { name: 'zs', score: 100 }
]
let obj = arr2.find(function(item, index) {
  return item.score === 100
})
console.log(obj)

// 9. findIndex 找第一个符合条件项的下标, 没找到会返回 -1
let index = arr2.findIndex(function(item, index) {
  return item.score === 101
})
console.log(index)

arr.reduce(function(累计值, 当前元素){}, 起始值) 用于累计求和

  <body>
    <script>
      // arr.reduce(function(累计值, 当前元素){}, 起始值) 用于累计求和

      let arr = [20, 30, 50, 100, 80];
      //从100开始累加
      // const res = arr.reduce(function (prev, item) {
      //   // console.log(item); //每一项
      //   console.log(prev); //从哪一项开始加 默认值为0
      //   return prev + item;
      // }, 100);
      // 优化 简写
      const res = arr.reduce((prev, item) => prev + item, 100);
      console.log(res);
    </script>
  </body>

Array常用的方法

<body>
    <script>
      let arr = [
        {
          brand: "小米",
          price: 1999,
        },
        {
          brand: "华为",
          price: 5999,
        },
      ];
      // find（）用于查找对象如果有返回要查找的那一项 否则返回undefined
      const res = arr.find(function (item, index) {
        console.log(item.brand);
        return item.brand === "小米";
      });
      console.log(res);
      // findIndex() 用于查找对象通过索引号查找 找到返回索引号 找不到返回-1
      const res1 = arr.findIndex(function (item, index) {
        return item.brand === "华为"; //找到下标为1
      });
      console.log(res1);
      // every 返回的是布尔值 所有条件都满足返回true 否则返回false
      let arr1 = [1, 3, 5, 6, 10, 20];
      const flag = arr1.every(function (item, index) {
        return item >= 1; //true
        // return item <= 19; //false
      });
      console.log(flag);
    </script>
  </body>

forEach 就是遍历加强版的for循环适合于遍历数组对象

forEach没有返回值没有return map可以return

<body>
    <script>
      /* 
       forEach 就是遍历  加强版的for循环  适合于遍历数组对象
       forEach没有返回值 没有return  map可以return
        */
      // 被遍历的数组.foreach(function (当前数组元素每一项, 下标索引) {});
      let arr = ["关羽", "姜维", "刘备", "吕布", "司马懿"];
      // arr.forEach(function (item, index) {
      //   console.log(item);
      // });
      arr.forEach((item, index) => {
        console.log(item);
      });
    </script>
  </body>

filter：

语法：被筛选的数组.filter(function(item数组中的每一项,index下标){})

作用：过滤符合条件的数据放在新数组中有返回值

<body>
    <script>
      /*  
     语法： 被筛选的数组.filter(function(item数组中的每一项,index下标){}) 
     作用：  过滤符合条件的数据 放在新数组中 有返回值
      */
      let arr = [10, 30, 80, , 20, 100];

      // const newArr = arr.filter(function (item, index) {
      //   // 把满足条件的return 出来
      //   // console.log(item);
      //   return item >= 30;
      // });
      // console.log(newArr);
      // 方法2 优化简写
      const newArr = arr.filter((item) => item >= 30);
      console.log(newArr);
    </script>
  </body>