HMVue5.1【JS中数组的some()、every()、reduce()】

1、数组的some方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const arr = ['小红', '你大红', '苏大强', '宝']

        /*
        arr.forEach(
            (item, index)=>{
                if(item === '苏大强'){
                    console.log(index) //2
                }
            }
        )
        */
        
        /*
        //结论：forEach 循环一旦开始，无法在中间被停止
        arr.forEach(
             (item, index)=>{
                console.log('ok') //共输出4次，故return不起作用
                if(item === '苏大强'){
                    console.log(index) 
                    return //js-forEach循环中不能使用break，会直接报错
                }
             }
        )
        */

        arr.some(
            (item, index)=>{
                console.log('ok') //3
                if(item === '苏大强'){
                    console.log(index) //2
                    // 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环
                    return true
                }
             }
        )

        //循环效率性能问题，推荐some

    </script>
</body>
</html>

2、数组的every方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    // 需求：判断数组中，水果是否被全选了！

    const arr = [
      { id: 1, name: '西瓜', state: true },
      { id: 2, name: '榴莲', state: false },
      { id: 3, name: '草莓', state: true },
    ]
    // const result = arr.every(item => item.state===true)
    const result = arr.every(item => item.state) //item => item.state可以简单理解为一个判断条件
    console.log(result) //false

    const arr2 = [
      { id: 1, name: '西瓜', state: true },
      { id: 2, name: '榴莲', state: true },
      { id: 3, name: '草莓', state: true },
    ]
    const result2 = arr2.every(item => item.state)
    console.log(result2) //true

  </script>
</body>

</html>

3、数组的reduce方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    // 需求：把购物车数组中，已勾选的水果，总价累加起来

    const arr = [
      { id: 1, name: '西瓜', state: true, price: 10, count: 1 },
      { id: 2, name: '榴莲', state: false, price: 80, count: 2 },
      { id: 3, name: '草莓', state: true, price: 20, count: 3 },
    ]

    /*
    //一般实现方法
    let sum = 0 //总价
    arr.filter(item => item.state).forEach(
        item => {
            sum += item.price*item.count
        }
    )
    console.log(sum) //70
    */
    
    /*
   //高级实现方法
   //arr.filter(item => item.state).reduce( (累加的结果, 当前循环项)=>{}, 初始值)
   const result = arr.filter(item => item.state).reduce(
       (sum,item)=>{
           return sum += item.price*item.count
       },
       0
   )
   console.log(result) //70
   */

   //简写
   const result = arr.filter(item => item.state).reduce( (sum,item)=>sum+=item.price*item.count, 0)
   console.log(result) //70

  </script>
</body>

</html>

 

posted @ 2021-11-22 20:53  yub4by  阅读(181)  评论(0)    收藏  举报