数据类型Set与数组迭代方法

159 阅读2分钟

image.png

以下所有的方法,都可以使用传统的for循环来代替,只是语法不同而已

数组几种遍历介绍(共同点:回调函数一样)应用场景回调执行次数函数返回值回调是否需要return
map遍历映射数组== 原数组长度新数组(==)一定要return(当前元素)
filter遍历过滤数组== 原数组长度新数组(!=)return true(元素添加到新数组)
forEach遍历遍历数组== 原数组长度
some遍历找出符合条件的数!= 原数组长度布尔类型return true;循环结束
every遍历判断所有元素是否符合条件!= 原数组长度布尔类型return true; 循环继续
findIndex遍历获取符合条件的第一个元素位置(下标)!= 原数组长度数字return true; 循环结束
includes方法(底层是遍历)判断数组/字符串是否包含某一个值无回调布尔类型无回调

image.png

数据类型Set与数组迭代方法

<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>
  </head>
  <body>
    <script>
      /* 
        1. Set :集合。 ES6新增的数据类型,类似于ES5的数组
        2. Set与Array最大的区别 : Set不支持重复元素
        3. Set经典应用场景 : 数组去重
      */

      //1.基本使用
      let set1 = new Set([10, 20, 30, 40, 10, 40])
      console.log(set1) //Set(4) {10, 20, 30, 40}

      //2.经典场景:数组去重
      // let arr = [...set1];
      // console.log(arr);//[ 10, 20, 30, 40 ]

      //经典面试题:请使用一行代码实现数组去重
      let arr = [20, 60, 88, 50, 20, 66, 100]

      let arr1 = [...new Set(arr)]
      console.log(arr1) //[ 20, 60, 88, 50, 66, 100 ]
    </script>
  </body>
</html>




findIndex作用与场景

image.png

    /* 


            1. findIndex作用与场景 : 找元素下标
                * 数组中的元素是值类型:  arr.indexOf()
                * 数组中的元素是引用类型:  arr.findIndex()
            2.语法特点 :
                2.1 循环执行次数  !=   数组长度
                2.2 回调函数内部return作用
                    (1)return true : 找到了,循环结束。 此时findIn是当前元素下标
                    (2)return false : 没找到,循环继续。 如果执行完毕还找不到,最终返回固定值-1
                2.3 findIndex本身返回值作用
                    return -1 : 没有
                    return 下标 : 有
    */
    
    

数组findIndex.png

数组reduce方法(经典应用: 求数组累加和)

image.png /* 1.数组reduce方法作用: 为每一个元素执行一次回调,并最终返回最后一次结果 */
let arr = [10,20,30]

    //累加和
    //(1)声明变量存储结果
    let sum = 0
    //(2)遍历数组
    for(let i = 0;i<arr.length;i++){
        //(3)累加
        sum += arr[i]
    }
    // console.log( sum )
    
     /* 
    第一个参数:回调    (sum,value,index)=>{}
        sum : 累加和变量
        value:当前元素
        index: 当前下标
        return : 下一次回调sum的值
    第二个参数: sum初始值
        * 如果不传,sum默认是第一个元素值
        * 一般要传0, 如果不传空数组的话reduce直接报错
    */
       //标准写法
//    let res =  arr.reduce( (sum,value,index)=>{
//         console.log(sum,value,index)
//         return sum+value
//     } , 0 )

       //简写
        let res =  arr.reduce( (sum,value)=>sum+value , 0 )

        console.log( res )