ES6语法

对象解构赋值

解构赋值：变量赋值的简写语法

1.对象解构

 1.1 取出对象的属性值 赋值给变量

 1.2 取出变量的值 赋值给对象

   const obj = {
      name: '千玺',
      age: 19,
      sex: '男'
    }

    //1. 取出对象的属性  赋值 给 变量
    // Es5方法是
    /*     const name = obj.name
        const age = obj.age
        const sex = obj.sex
        console.log(name,age,sex) */

    // Es6方法是
    const { name, age, sex } = obj
    console.log(name, age, sex)

   //2. 取出变量的属性  赋值 给 对象
   const username = 'abcde'
   const password = '123456'
   const icon = '123'

  //  Es5
/*   const user = {
    username:username,
    password:password
  } */

  // Es6
  const user ={
    username,
    password,
    touxiang:icon,
    eat(){
      console.log('吃东西')
    }
  }

  console.log(user)

2.数组解构

1.取出数组元素 赋值给变量

2.取出变量的值 赋值给数组元素

例子：

 // 取出数组元素 赋值给变量
        const arr = [10,20,30]
        const [n1,n2,n3] = arr
        console.log(n1,n2,n3) //10,20,30

        // 取出变量的值 赋值给数组元素
        const m1 = 10
        const m2 = 20
        const m3 = 30
        const arr1 = [m1,m2,m3]
        console.log(arr1)

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

//传参本质： 实参给形参赋值
         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:'男'} )

箭头函数

1.箭头函数 : 相当于 function函数的简写

(1)吧function,改成 箭头 =>       

(2)形参小括号()写到箭头左边

2.箭头函数语法注意点

   2.1 如果箭头函数只有一个形参,则可以省略小括号

   2.2 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）

例子：

// 具名函数
        function fn (){}
        //匿名函数
        const fn2 = function(){}

        // 箭头函数基本写法
        const fn3 = (a,b)=> {
          console.log(a+b)
        }
        fn3(10,20)

        //(1)如果箭头函数只有一个形参,则可以省略小括号
        const fn4 = a => {
          console.log(a*2)
        }
        fn4(77)

        // (2)如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
        const fn5 = a => a*2
        const res = fn5(88)
        console.log(res)

        // 正常写法
        const fn6 = function(a){
          return a*2

        }
       console.log( fn6(32))

2.箭头函数this指向

(1).function函数this有三种指向 : 谁 调用我 , 我就指向谁

普通函数: 函数名() this -> window

对象方法: 对象名.函数名() this -> 对象名

构造函数: new 函数名() this -> new创建实例

(2).箭头函数this : 没有this

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

(3).以下几种函数不能是箭头函数

   构造函数

   call()无法修改箭头函数this

   事件处理函数

年度面试题：

this的指向：

      let obj = {
        name: "ikun",
        eat() {
          //1级   this : obj
          function fn1() {
            //2级  
            console.log(this)//window  
          }
          fn1()
          let fn2 = () => {
            //2级  ： 箭头函数访问上级 1级obj
            console.log(this)//obj   
          }
          fn2()
        },
        learn: () => {
          //1级 ： 上级 this->window
          function fn1() {
            console.log(this)//window 
          }
          fn1()
          let fn2 = () => {
            //2级  访问1级 this -> window  
            console.log(this)//window  
          }
          fn2()
        }
      }

      obj.eat()
      obj.learn()

展开运算符

1.展开运算符: ...

相当于对象遍历的简写

语法：...对象名

2.应用

2.1 连接两个数组

2.2 求数组最大值

例子：

// 1 连接两个数组
            const arr1 = [10,20,30,40]
            const arr2 = [50,60,70,80]
            const arr = [...arr1,...arr2]
            console.log(arr)

            // 2 求数组最大值
            const max = Math.max(...arr)
            console.log(max)
            // 2 求数组最小值
            const min = Math.min(...arr)
            console.log(min)

            // 连接对象
            const student = {
              score:88,
              className:'108'
            }

            const obj = {
              name:'千玺',
              age:19,
              ...student
            }
            console.log(obj)

数据类型Set

（1）数据类型 Set : 集合

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

（2）场景 : 数组去重

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

例子：

const arr = [20,30,40,20,30,50,60]
        console.log(arr)

        //  创建Set 去除数组重复元素
        const set = new Set(arr)
        console.log(set)
        //  把set变成真数组
        const newArr = [...set]
        
      //经典面试题： 一行代码实现数组去重
      const newArr1 = [...new Set(arr)]
      console.log(newArr1)

数组迭代方法

数组map方法

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

说人话：按照某种映射关系, 把数组的每一个元素给修改了

举例：全场8折: 数组的每一个元素 * 0.8

2. map方法特点

  2.1 回调函数执行次数 == 数组长度

  2.2 回调函数内部的return

* return 新数组的元素

* 如果没有return, 则map的返回值都是undefined

2.3 map方法的返回值

* 返回映射之后的新数组

例子：

       let arr = [ 88,90,100,20,50 ]
        //完整写法
        /* let res =  arr.map( (item,index) => {
           return item*0.8
       } ) */
       
       //箭头函数如果形参只有一个可以省略小括号， 如果函数体只有一行可以省略大括号(必须省略return)
       let res =  arr.map( item=>item*0.8 )
       console.log( res )

数组filter方法

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

 * 应用场景: 筛选数组,将符合条件的元素放入新数组中

2. filter方法特点

 (1) 回调函数执行次数 == 数组长度

 (2) 回调函数内部的return

 * return true : 符合筛选条件，放入新数组中

 * return false : 不符合筛选条件，不放入新数组中

(3) filter方法的返回值

* 返回筛选之后的新数组

例子：

 // 找出数组中的偶数
       const arr = [20,35,40,60,55,67]
      //  标准写法
      /* const res =  arr.filter((item,index)=>{
         if(item % 2 == 0){
           return true
         }else{
           return false
         }
       })
       console.log(res) */

      //  简写
       const res = arr.filter(item=>item % 2 == 0)
       console.log(res)

数组forEach方法

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

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

2. forEach方法特点

(1) 回调函数执行次数 == 数组长度

(2) 回调函数内部的return

* 没有返回值

(3) forEach方法的返回值

* 没有返回值

例子：

const arr = [20,30,40,50,66]
       arr.forEach((item,index)=>{
         console.log(item,index)
       })

数组some方法

1.数组some方法作用: 判断数组中是否有符合条件的元素 (逻辑或|| 有任意一个满足即可)

应用场景:

(1)判断数组中有没有奇数

(2)非空判断：判断表单数组中 有没有元素value为空

2. some方法特点

   (1) 回调函数执行次数 !=(不等) 数组长度

   (2) 回调函数内部的return

* return true : 循环结束。 找到了满足条件的元素

* return false : 循环继续。 没找到，循环继续。 如果所有元素全部遍历还是没找到，最终结果就是false

 (3) some方法的返回值

* true : 有符合条件的元素

* false : 没有符合条件的元素

  //(1)判断数组中有没有奇数
    const arr = [10,21,30,40,50]

/*     // 标准写法
      let res = arr.some((item,index)=>{
        if(item % 2 == 1){
            return true
        }else{
            return false
        }
    }) */

    // 简写语法
   const res= arr.some(item=>item%2 == 0)
    console.log(res)

数组every方法

1. every作用与场景 : 判断数组是否所有的元素都满足条件 ( 逻辑与&& )

经典场景 : 开关思想. 购物车全选

2.语法特点 :

2.1 循环执行次数 != 数组长度

2.2 回调函数内部return作用

(1)return true : 循环继续。 当前元素满足条件,继续判断. 如果循环执行完毕还是true,则every返回值就是true

(2)return false : 循环结束。当前元素不满足条件。 every的返回值也是false

2.3 every本身返回值作用

return true : 全部元素都满足条件

return false : 有元素不满足

开关思想

Arr.some():判断数组中是否有元素满足条件（只要有一个满足即可）

Arr.every():判断数组中是否所有元素满足条件(必须要全部满足)

对象转数组

Object.values()

例子：

//需求：判断数组中是否所有的元素都是正数
        let arr = [20, 61, -80, 95, 100]

        //需求：判断数组中有没有负数

        //完整写法
        // let res = arr.every((item, index) => {
        //     if(item>0){
        //         return true
        //     }
        // })

        //简洁写法
        let res = arr.every(item=>item>0)
        console.log( res )

数组findIndex方法

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 下标 : 有

 //需求：找出李四的下标
        let arr = [
            {name:'张三',age:20},
            {name:'李四',age:25},
            {name:'王五',age:30},
        ]

        let res = arr.findIndex(item=>item.name=='李四')
        console.log(res)//1

数组reduce方法

数组reduce方法作用： 为每一个元素执行一次回调,并最终返回最后一次结果

经典应用： 求数组累加和

例子：

et 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 )