JS中ES6语法

一、let、const和var

// ES6语法
        // 1、let和congst不能进行重复定义，let声明的变量不比赋值，但是const声明的变量必须赋值；var可;

        // 2、let和const不可进行预解析，不能在声明之前使用
        console.log(str1); //undefined
        var str1
        console.log(str2); //报错 Cannot access 'str2' before initialization at window.onload
        let str2

        // 3、let和const只能在声明的块级作用域中使用，var全局可用
        {
          let str3 = 'haha'
          var str4 = 'huhu'
          console.log(str3);
        }
        console.log(str4); // huhu
        console.log(str3); // 报错
        
        // let和const的区别
        // let定义的变量，可替换，可修改；
        // const定义的常量，不可替换，不可修改；若是对象，可修改
        let str5 = 'qw123'
        str5 += '456'
        console.log(str5); // qw123456
        str5 = str5.replace('456','A')
        console.log(str5); // qw123A
        const str6 ='qw123'
        str6 += '456'
        console.log(str6); //报错
        str6 = '456'
        console.log(str6);

二、解构赋值对象

	  let obj = {
        name: 'kelly',
        age: 25
      }
      // 赋值方式1
      let name = obj.name
      console.log(name); //kelly
      // 赋值方式2
      let {age,name} = obj
      console.log(age); // 25
      console.log(name); // kelly
      // 赋值方式3：解构赋值重命名
      let {name:userName,age:userAge} = obj // 相当于let userName = obj.name
      console.log(userName); // kelly
      console.log(userAge); // 25

三、解构赋值数组

 // 解构赋值数组
      let arr = [1,2,'k']
      // 常规赋值
      let n1 = arr[0]
      let n2 = arr[1]
      // 解构赋值
      let [n1,n2] = arr
      console.log(n1,n2); // 1 2
      // 案例1：交换两个变量的值
      var n1 = 1
      var n2 = 2
      var [n2,n1] = [n1,n2]
      console.log(n1,n2); // 2 1

四、模板字符串

反引号（``）叫做模板字符串

// 模板字符串
      // 我们管反引号（``）叫模板字符串
      // 普通字符串不可识别换行,模板字符串可以
      let str1 = '<tr><td>123</td></tr>'
      let str2 = `
        <tr>
          <td>456</td>
        </tr>
      `
      // 模板字符串中识别变量 ${变量}
      let name = 'kelly'
      let age = 25
      let str3 = `大家好，我是${name},今年${age}岁`
      console.log(str3); // 大家好，我是kelly,今年25岁
    }

五、拓展运算符 三个点（…）

5.1展开数组

// 拓展运算符 三个点（...）可展开数组、对象
      let arr1 = [1,'a',true]
      // 将数组展开并输出
      console.log(...arr1); // 1 'a' true
      // 使用展开运算符合并数组
      let arr2 = [1,2,3]
      let arr3 = [4,5,6]
      let res1 = arr2.concat(arr3)
      console.log(res1); // [1, 2, 3, 4, 5, 6]
      let res2 = [...arr2,...arr3]
      console.log(res2); // [1, 2, 3, 4, 5, 6]
      // 数组展开，当作参数
      let arr4 = [4,8,3]
      console.log(Math.max(...arr4)); // 8

5.2展开对象

// 展开数组
      let obj1 = {
        name: 'kelly',
        age: 25
      }
      let obj2 = {
        ...obj1,
        city: 'nb'
      }
      console.log(obj2); // {name: 'kelly', age: 25, city: 'nb'}
      // 关于...的另一个用法
      let fn = (a,b,...arr) => {
        console.log(a,b);
        console.log(arr);
      }
      fn(1,2,3,4,5,6) // 1 2 和 [3, 4, 5, 6]