总结JavaScript中常见的ES6新语法特性

let与const

ES5中声明变量var关键字特点:

1. 预解析: 变量声明提升

2. 没有块级作用域: if和for大括号里面声明的变量也是全局的

ES6中声明变量let和const特点:

1. 没有预解析: 变量必须先声明,才能使用

2. 块级作用域: if和for大括号里面的变量是局部的

let与const区别:

1. let声明：变量,可以修改变量中的数据

2. const声明: 常量,只能赋值一次 不能修改

对象解构赋值

解构赋值本质 就是 变量赋值语法的简写语法

（1）取出 对象的属性值 赋值给 变量

        let {uname,age,sex} = 对象名

（2）取出 变量的值 赋值给 对象的属性

        let 变量名 = {uname,age,sex}

      //1：取出 对象的属性 赋值 给变量

      // let obj = {
      //   name: '张三',
      //   age: 18,
      //   sex: '男'
      // }

      /* ES5 */
      let name = obj.name;
      let age = obj.age;
      let sex = obj.sex;
      console.log(name,age,sex)

      /*这行代码本质:声明三个变量 name，age，sex。取出右边obj对象对应的属性名赋值给左边的变量*/
      // let{name,age,sex}= obj
      // console.log(obj)

      let name = '李四';
      let age = 20;
      let sex = '男';
      let sayHi = function(){
          console.log('你好');
      } 

      /* ES6 */
      let obj = {
        name,
        age,
        sex,
        sayHi(){
          console.log('困zzzzzz')
        }
      }
      console.log(obj)

数组解构赋值

      let arr = [10, 20, 30]

      /* ES6 */
      // 1.取出数组的元素,赋值给变量
      let [n1, n2, n3, n4] = arr
      console.log(n1, n2, n3, n4) 

      // 2.取出变量的值,数组的元素
      let num1 = 23
      let num2 = 12
      let num3 = 76
      let arr1 = [num1,num2,num3]
      console.log(arr)

结构赋值语法及应用总结

结构赋值本质: 变量赋值简写

1. 重点掌握: 对象结构

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

        语法: let{uname,age,sex} = obj

        场景: 如果函数参数是对象,就可以进行结构

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

        语法: let obj = {uname,age,sex}

        场景: 获取多个表单数据,装入对象中

      2. 结构赋值及其他用法

        2.1 结构赋值默认值

        let{name,age=18,sex} = obj

        2.2 自定义结构变量名

        let{sex:gender} = obj 相当于 let gender = obj.sex

箭头函数

      1.箭头函数语法: 就是function简写

        1.1 把function单词 替换成箭头 =>

        1.2 把形参() 一到箭头的左边

      2.箭头函数其他用法

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

        a=>{return a*2}

        2.2 如果函数体只有一行,则可以省略大括号,此时必须要省略return

        a=>a*2

箭头函数this指向: 箭头函数没有this

* 箭头函数中使用this，会访问上级作用域this

*原因(作用域链)：箭头函数没有this,就会往上级作用域找

      //1.箭头函数常见用法
      /* ES5 */
      let fn = function () {
        console.log('111')
      }
      fn()

      /* ES6
        箭头函数规则： （1）function变成 箭头符号 =>   (2)形参小括号写到箭头 => 左边
        */
      let fn1 = () =>{
        console.log('222')
      }
      fn1()

      //2.箭头函数其他用法
      //2.1 如果函数只有一个形参，则可以省略形参小括号
      // let fn2 = (a) =>(return a*2)
      let fn2 = a =>{
        return a*2
      }
      let res = fn2(10)
      console.log(res)

      //2.2 如果函数体只有一行代码，则可以省略函数体大括号
      //注意点： 如果省略函数体大括号，则返回值也要省略return
      //下面代码等价于：  let fn3 = function(a){ return a*2 }
      let fn3 = a => a*2
      let res1 = fn3(20)
      console.log(res1)

展开运算符

      1.拓展运算符： ...

      2.作用：类似于 对象遍历的一种简写形式

      3.应用场景介绍

        3.1 连接数组（上拉加载下一页） arr.push(...arr2)

        3.2 求数组最大值 Math.max(...arr)

	//1. 连接两个数组
    let arr1 = [10, 20, 30]
    let arr2 = [40, 50, 60]

    /* ES5写法：arr.push.apply(arr1,arr2) */
    // arr1.push.apply(arr1,arr2)
    // console.log(arr1)

    /* ES6写法：arr.push(...arr2)*/
    arr1.push(...arr2)
    console.log(arr1)

    //2. 求数组最大值和最小值

    let arr = [88, 25, 60, 90, 100]

    /*  ES5写法 Math.max.apply(Math,arr)*/
    let max = Math.max.apply(Math,arr);
    console.log(max)

    /* ES6写法 Math.max(...arr)*/
    let max1 = Math.max(...arr)
    console.log(max1)

数据类型

      1.数据类型Set (集合) : 类似于数组，与数组唯一的区别是 ： 不能存储重复元素

      2.应用 ： 数组去重

        一行代码去重： let newArr = Array.from( new Set(数组) )

let arr = [10,10,20,20,30,30,40,40]

        //1.声明Set
        // let set =  new Set(arr)
        // console.log( set )
        //2.把set转成真数组
        // let newArr = Array.from(set)
        // console.log(newArr)

        /* 一行代码实现数组去重 */
        let newArr =  Array.from(new Set(arr))
        console.log(newArr)