ES6 | 解构、模板字符串、简化对象、箭头函数

目录

一、解构（数组、对象）

1.数组解构

2.对象的解构

二、ES6引入新的声明字符串的方式【``】

 三、简化对象写法

四、箭头函数

1.this是静态的，this始终指向函数声明明所在作用域下

2.不能作为构造实例化对象

3.不能用做arguments变量

 4.箭头函数的简化

---

一、解构（数组、对象）

1.数组解构

• 模式匹配

          let arr = [1,2,3]
          let [a,b,c] = arr
          console.log(a,b,c)
  

  

  不仅仅是一维数组，也可以是多维数组！

          let arr = [1,[2,3],4]
          let [a,b,c] = arr
          console.log(a,b,c)
  

  

• ...扩展运算符（省略参数，后面的变为数组） 

        // ...扩展运算符
        let arrs = [1,2,3,4,5,6]
        let [a,...b] = arrs
        console.log(a,b)

 

• 合并数组

          //合并数组
          let arr1 = [1,2,3]
          let arr2 = [4,5,6]
          let arr = [...arr1,...arr2]
          console.log(arr)
  

   
•  默认值（必须是Undefined,默认值才有效）

          //默认值
          let [c,d] = [1]
          console.log(c,d)
  

  

  因为右边的数组只有一个1，d没有被赋值，所以d是undefined。

          let [c,d=2] = [1]
          console.log(c,d)
  

   

  当右边的的数组中的元素不够左边的变量时，可以用【d=2】来设置变量的默认值。BUT！如果：

          let [c,d=2] = [1,'undefined']
          console.log(c,d)
  

   

          let [c,d=2] = [1,null]
          console.log(c,d)
  

   

  都是不行的,哒咩呦~ 哒咩哒咩！必须是undefined时，默认值才会有效。

2.对象的解构

• 基本用法

          //1.基本使用
          let Person = {name:'王仕丹',age:18}
          let {name,age} = Person
          console.log(name,age)
  

  

  key值一一对应，顺序无影响 ！

• 重命名

          //2.重命名
          let Person1 = {name:'王仕丹a',age:19}
          let {name:myname,age:myage} = Person1
          console.log(myage,myname)
  

  

  真正被赋值的是后者（myname、myage)，而不是name、age.

• 默认值

          //3.默认值
          let Person2 = {name:'王仕丹',age:19}
          let{name,age,height=180} = Person2
          console.log(name,age,height)
  

   

  你看，在Person2对象中并没有变量height，但是左边的对象中有【height = 180】，所以王仕丹才有了180的身高，这就是默认值！！！和数组解构的默认值是没有什么区别的。

二、ES6引入新的声明字符串的方式【``】

1. 声明

           //1.声明
           let str = `我也是一个字符串`
           console.log(str,typeof str)
   

    
2. 内容中可以直接出现换行符

           //2.内容中可以直接出现换行符
           let str = `
                     
   沈腾