JavaScript高级复习04-ES6新语法(箭头函数,展开运算符,数据结构Set,数组迭代方法)

ES6文档推荐：ES6 入门教程

声明变量let 与 const

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

         预解析: 变量提升

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

2. ES6中声明变量let与const特点:

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

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

3. let与const的区别:

         let: 变量.可以修改变量中的数据

         const: 常量.只能在声明的时候赋值一次,不可以修改

  <script>
    //1.1 没有预解析：变量必须要先声明，才能使用
    // console.log( num )//报错  变量不允许在声明之前使用
    let num = 10
    console.log(num) //10
​
    //1.2 有块级作用域： if和for大括号里面声明的变量是局部
​
    if (true) {
      let age = 30
      console.log(age) //30
    }
    // console.log(age)//报错 age is not defined
​
    for (let i = 1; i <= 5; i++) {
      console.log(i)
    }
    // console.log( i )//报错 i is not defined
​
​
    /* let与const区别 */
    //const : 常量。 只能在声明的时候赋值一次,不可以修改
    const aaa = '666'
    console.log(aaa)
  </script>

变量的解构赋值

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

1. 重点掌握:对象解构:

        (1)取出对象属性 赋值给 变量

                语法: let {name, gender, age} = 对象名

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

        (2)取出变量的值 赋值给 对象的属性

                语法: let 对象名 = {name, gender, age}

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

2. 解构赋值其他用法

        (1)解构默认值

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

        (2)自定义解构变量名

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

对象解构

<script>
// (1)取出对象属性 赋值给 变量
    let obj = {
      name: '张三',
      gender: '男',
      age: 18
    }
​
    // ES5
    // let name = obj.name
    // let gender = obj.gender
    // let age = obj.age
    // console.log(name, gender, age)
​
    // ES6解构赋值
    let {name, gender, age, hobby} = obj
    console.log(name, gender, age, bobby) // bobby is not defined 
</script>

<script>
// (2)取出变量的值 赋值给 对象的属性
    let name = '李四'
    let gender = '女'
    let age = 20
​
    // ES5
    // let obj = {
    //   name: name,
    //   gender: gender,
    //   age: age
    // }
    // console.log(obj)
​
    // ES6
    let obj = {
      name, // name:name,
      gender,
      age,
      eat(){ // eat:function(){}
        console.log('吃东西')
      }
    }
    console.log(obj)
</script>

数组解构

  <script>
    // (1)取出数组的元素 赋值给 变量
    let arr = [22,34,56,7]
    // let n1 = arr[0]
    // let n2 = arr[1]
    // let n3 = arr[2]
    // let n4 = arr[3]
    let [n1, n2, n3, n4] = arr
    console.log(n1, n2, n3, n4)
​
    // 取出变量的值 赋值给 数组
    let num1 = 11
    let num2 = 23
    let num3 = 77
    let