es6_数组新增的遍历方法

[1]map方法

(1)作用：以某种规则映射数组；

(2)语法

• arr.map((item,index)=>{
    return 值
  })
  1
  2
  3

(3)返回值

• map方法 不对原数组进行操作而是返回一个新数组；

• map方法的返回值为 (return)值 组成的新数组；

• map方法其实返回的是一层深拷贝的数组；

  •  const arr = [
            'a',
            {
              text:'吃食',
              id:1,
              children:[
                {
                  text:'水果',
                  id:11,
                },
                {
                  text:'零食',
                  id:12,
                },
                {
                  test:'肉类',
                  id:13,
                }
              ]
            },
            {
              text:'服装',
              id:2,
              children:[
                {
                  text:'春装',
                  id:21
                },
                {
                  text:'夏装',
                  id:22
                },
                {
                  text:'秋装',
                  id:23
                },
                {
                  text:'冬装',
                  id:23
                },
              ]
            }
          ]
          const maparr = arr.map(item => item)
          console.log('arr', arr)
          console.log('maparr', maparr)
          maparr[0] = 'b'
          maparr[1].id=1111
          console.log('arr', arr)
          console.log('maparr', maparr)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50

    • 第一次打印

      • 

      • map方法不对原数组进行操作而是返回一个由 (return)值 组成的新数组；

    • 第二次打印

      • 

      • 可以看出，map拷贝为1层深拷贝；

        • 当我们修改数组中基本数据类型时，不会影响arr;
        • 当我们修改数组中复杂数据类型时，会影响arr;

(4)举例说明

• 数组对象中，只需要每个元素的某个属性

• <!-- 获取每个数组元素的name属性 -->
  <script>
    let arr = [
      { name: 'chaochao', sex: '女' },
      { name: 'niuniu', sex: '男' },
      { name: 'wenwen', sex: '男' },
      { name: 'linlin', sex: '女' }
    ]
    let newArr = arr.map(item => item.name)
    console.log(newArr)  //['chaochao','niuniu','wenwen','linlin']
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

[2]filter方法

(1)作用：以某种规则过滤数组元素

(2)语法

• arr.filter((item,index)=>{
      return boolean ? ture : false
  })
  // 若是返回值为true，就将该数据添加到返回数组中，若不是就不添加
  1
  2
  3
  4

(3)返回值

• filter方法与map方法类似

  • filter方法 不对原数组进行操作而是返回一个新数组；
  • filter方法其实返回的是一层深拷贝的数组；

• filter方法的返回值为 过滤后的新数组；

• 举例说明

  • <!-- 返回性别为男的信息 -->
    <script>
      let arr = [
        { name: 'chaochao', sex: '女' },
        { name: 'niuniu', sex: '男' },
        { name: 'wenwen', sex: '男' },
        { name: 'linlin', sex: '女' }
      ]
      let newArr = arr.filter(item => item.sex=='男')
      console.log(newArr) //[{ name: 'niuniu', sex: '男' },{ name: 'wenwen', sex: '男' },]
    </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

[3]forEach方法

(1)作用：相当于for循环，对数组数据做某些处理;

(2)语法

• 数组.forEach((item,index)=>{
    // 对数据做处理
  })
  1
  2
  3

(3)返回值

• 该方法没有返回值，对当前数组进行处理；

(4)注意点

forEach方法中的return有时不会终止循环->具体原因和解决办法可看forEach中的return，

(5)举例说明

• <script>
       let arr = [
         { name: 'chaochao', sex: '女' },
         { name: 'niuniu', sex: '男' },
         { name: 'wenwen', sex: '男' },
         { name: 'linlin', sex: '女' }
       ]
       arr.forEach((item, index) => {
         item.age = 18
       })
       console.log(arr)
     </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

[4]some方法

(1)作用：判断数组中是否有符合条件的元素、

(2)语法

• // 循环遍历 -> 判断当前元素是否符合条件
  // 若是返回值为false -> 不符合条件 -> 继续判断
  // 若是返回值为true -> 符合条件 -> 结束循环
  arr.some(item => {
     return  boolean ? true : false
  })
  1
  2
  3
  4
  5
  6

(3)举例说明

• <script>
      let arr = [
        { name: 'chaochao', sex: '女' },
        { name: 'niuniu', sex: '男' },
        { name: 'wenwen', sex: '男' },
        { name: 'linlin', sex: '女' }
      ]
      let bol = arr.some((item, index) => {
        // 判断该数组中是否有男生
        return item.sex === '男'
      })
      console.log(bol) //true
    </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

[5]every方法

(1)作用：判断数组中的元素是否全部符合条件；

(2)语法

arr.every(item=>{
	return 表达式/变量
})
1
2
3

(3)返回值

• 循环遍历数组，每个元素 return 值
  • 若是 return true -> 当前元素符合条件 -> 继续遍历；
  • 若是 return false -> 当前元素不符合条件 -> 终止

(4)举例说明

let arr = [
  { name: 'chaochao', sex: '女' },
  { name: 'niuniu', sex: '男' },
  { name: 'wenwen', sex: '男' },
  { name: 'linlin', sex: '女' }
]
let bol = arr.every((item, index) => {
  // 判断该数组中是否全部为男生
  return item.sex === '男'
})
console.log(bol) //false
1
2
3
4
5
6
7
8
9
10
11

[6]findIndex方法

(1)作用：查找数组有没有符合条件的元素，若是有，返回第一个符合元素的下标，若是没有返回false

(2)语法

数组.findIndex((item,index)=>{
  if(boolean){
    // 为true, 结束执行，返回当前元素的索引
    // 若是为false,继续执行
  }
})
1
2
3
4
5
6

(3)举例说明

 <script>
      let arr = [
        { name: 'chaochao', sex: '女' },
        { name: 'niuniu', sex: '男' },
        { name: 'wenwen', sex: '男' },
        { name: 'linlin', sex: '女' }
      ]
      let index = arr.findIndex((item, index) => {
        // 返回第一个男生的索引
        return item.sex === '男'
      })
      console.log(index) //1
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13

[7]includes方法

作用：判断该数组中是否有符合条件的元素，有则返回true，没有返回false

[8]reduce方法

/*
  reduce方法接收两个参数 [1]回调函数function [2]初始值 init
  reduce方法会遍历数组中的每一个元素，每遍历一次就会执行一次回调函数。当遍历完之后会将最后的结果返回出去。
  pre:函数上一次计算的结果，最初值为init;
  cur:遍历的当前元素；
  index:当前元素的索引
  arr:原数组
*/
arr.reduce(function(pre,cur,index,arr){
  return XXX
}，init)
1
2
3
4
5
6
7
8
9
10
11

可以使用reduce方法进行求和计算

this.cartList.reduce(function(pre,cur){
	return cur.checked ? pre+cur.goods_price*cur.num : pre
},0)
1
2
3