都2022年了，再不学ES6你就out了 —— 一篇文章搞懂ES6

var let ：

  1. ES5声明变量 var

var 1 会预解析  2 没有块级作用域

2.ES6声明变量 let const

let  1 不会预解析  2 有块级作用域

let const 的区别：

• let 是变量  可以修改
• const 是常量 不能修改  **实际开发过程中,只要不修改的话就用常量,需要改的时候用let

---

对象数组解构：

解构赋值 :  变量赋值的简写(解构的精髓:当变量名和属性名一致的时候只需要写一个)

1. 取出对象的属性,赋值给变量  语法  let {对象属性,对象属性...} = obj
2. 取出变量的属性,赋值给对象    let obj = {变量属性,变量属性.....}

---

数组解构：

• 取出数组的属性,赋值给变量  语法  let[     ] = arr
• 取出变量的属性,赋值给数组    let arr= [     ]

---

函数参数解构：当函数参数是对象类型,就可以对形参进行解构

---

• 传参的本质 实参给形参赋值
• 对形参进行解构

   //传参本质： 实参给形参赋值
           function fn(obj){// let obj = {name:'张三',age:20,sex:'男'}
              console.log( obj )
              //对函数形参进行解构
              let {name,sex,age} = obj
              console.log( name,sex,age )
           }
  
           function fn1( {name,sex,age} ){// let {name,sex,age} = {name:'张三',age:20,sex:'男'}
              console.log( name,sex,age )
           }
  
           fn( {name:'张三',age:20,sex:'男'} )
           fn1( {name:'张三',age:20,sex:'男'} )

箭头函数：相当于 function函数的简写

语法 去掉function,改成箭头=>,形参小括号写到箭头的左边

注意点

• 如果箭头函数的形参只有一个形参,则可以省略小括号
• 如果箭头函数的函数体只有一行代码时, 可以省略大括号, (同时 return 也必须省略)

箭头函数的this指向： 没有this指向

箭头函数的本质是访问  上级作用域中的this

---

箭头函数的this指向：相当于 function函数的简写

语法 去掉function,改成箭头=>,形参小括号写到箭头的左边

注意点

• 如果箭头函数的形参只有一个形参,则可以省略小括号
• 如果箭头函数的函数体只有一行代码时, 可以省略大括号, (同时 return 也必须省略)

箭头函数的this指向： 没有this指向

箭头函数的本质是访问  上级作用域中的this

---

展开运算符：相当于 对象遍历的简写

应用 : (1) 连接两个数组   (2) 求数组的最大值

例 :     let arr1 = [10,20,30]

        let arr2 = [40,50,60]

//ES5 :  concat()

        // let arr = arr1.concat(arr2)

        // arr.push(70)

        //ES6 连接两个数组

        let arr = [...arr1,...arr2,70]

        console.log( arr )

//求数组最大值      let max = Math.max(...arr1,...arr2)

        console.log( max )

---

数据类型Set： 集合

**Set 相当于是数组类型,和数组Array唯一的区别是不能存储重复的元素

应用场景 : 数组去重

•  let newArr = [...new Set(需要去重的数组)]

---

数组迭代方法

数组map方法:  作用 映射数组

应用场景 :全场八折    数组的每一个元素 * 0.8

数组map方法特点: 

• 回调函数执行次数 === 数组长度
• 回调函数内部的return   (1) return 新数组的元素 (2)如果没有return ,返回的都是undefined
• map方法的返回值   返回映射之后的新数组

数组filter方法:  作用 筛选数组

应用场景:  筛选数组,将符合条件的元素放入新数组中  例 :找出数组中所有大于10的元素

数组filter方法特点: 

• 回调函数执行次数 === 数组长度
• 回调函数内部的return                                                                                                                    (1) return true: 符合筛选条件,放入新数组                                                                                  (2) returnfalse: 不符合筛选条件,不放入新数组 
• filter方法的返回值   返回筛选之后的新数组                      

数组forEach方法:  作用遍历数组

应用场景:  和  for(let i=0;i<arr.length;i++){} 功能一致

数组forEach方法特点: 

• 回调函数执行次数 === 数组长度
• 回调函数内部的return              没有返回值                                                                              
• forEach方法的返回值     没有返回值                       

数组some方法:  作用 判断数组是否有符合条件的元素

应用场景:  非空判断（判断多个表单元素，有没有空文本）例 判断数组中有没有负数

数组some方法特点: 

• 回调函数执行次数 != 数组长度
• 回调函数内部的return                                                                                                                  (1) return true: 循环结束, 找到了满足循环条件的元素                                                          (2) returnfalse: 循环继续, 没找到,循环继续.如果遍历所有元素还是没找,最后结果就是false                                                           
• some方法的返回值    true : 有符合条件的元素     false : 没有符合条件的元素
                

数组every方法:  作用 断数组中是否 的所有元素都满足条件

应用场景: 开关思想(购物车全选框)    例 ： 判断数组中是不是都是正数

数组every方法特点: 

• 回调函数执行次数 != 数组长度
• 回调函数内部的return                                                                                                                  (1) return true: 循环继续,满足条件,如果所有的元素全部遍历还是true,最终结果就是 true   (2) return false: 循环结束.只要有不满足条件的元素,循环结束 最终结果就是false
• every方法的返回值    true 所有的元素 都符合条件    false : 有元素 不符合条件

数组findIndex方法:  作用 查找元素的下标

数组的findIndex与indexOf异同点

  相同点：功能一致，都是查找元素下标。 有则返回下标，无则返回固定值-1

不同点：应用场景不同

              indexOf : 查找数组中的元素都是值类型

              findIndex : 查找数组中的元素都是引用类型

数组findindex方法特点: 

• 回调函数执行次数 != 数组长度
• 回调函数内部的return                                                                                                                  (1) return true:  循环结束。 找到了,此时返回值就是下标                                                          (2) return false: 循环继续。 没找到，循环继续。 如果所有元素全部遍历还是没找到，最终结果就是-1
• findindex方法的返回值    元素下标 或者 -1

数组reduce方法:  作用 数组累加器方法

对数组每一个元素执行一次回调函数,累加最后一次回调的结果

应用场景   数组元素求和、求数组元素最大值

 第一个参数：回调   (上一次值,当前值,当前下标)=>{}

            * 默认下标不是从0开始，而是从1开始。 开发中一般需要设置默认值

            * return 值 就是下一次 sum的值

        第二个参数: 初始值

            * 一般需要设置初始值为0, 如果不设置遇到空数组则会报错

        reduce方法返回值是 ： 最后一次sum的结果

        let res = arr.reduce( ( sum,item )=>sum + item , 0 )

        console.log( res )

       

---