1.解构赋值

快速从对象或者数组中获取成员
解构赋值分成两种：

• 数组的解构赋值;

  // 1. 解构数组
  var arr = [ 'hello', 'world' ]
  // 开始解构
  // 注意: 解构数组使用 []
  // a 获取的内容就是 arr[0]
  // b 获取的内容就是 arr[1]
  var [ a, b ] = arr
  console.log(a)    // hello
  console.log(b)    // world
   

• 对象的解构赋值；

// 2. 解构对象
var obj = { name: 'Jack', age: 18 }
// 开始解构
// 注意: 解构对象使用 {}
// 表示定义一个叫做 name 的变量, 获取的是 obj 内一个叫做 name 的成员的值
var { name, age, a } = obj
console.log(name)
console.log(age)
console.log(a)

var a = obj.age
console.log(a) 

// 相当于定义变量 a 从 obj 内获取一个叫做 a 的成员的值
var { a } = obj
console.log(a) 
// 可以起一个别名
// 相当于顶一个 a 变量, 从 obj 内获取一个叫做 age 的值
var { age: a } = obj // => var a = obj.age
console.log(a)  

2.模板字符串

模板字符串就是 ES6 内新增的定义字符串的方式
以前:
var str = ‘内容’
var str = “内容”

现在:
var str = 内容
区别:

• 可以换行书写

var s1 = '今年18的肖言 是御用女主'
var s2 = "今年18的肖言 是御用女主"
var s3 = `
今年18的肖言
是御用女主
`
console.log(s1)
console.log(s2)
console.log(s3)

• 可以直接在字符串内解析变量

   当你需要解析变量的时候, 直接书写 ${ 变量 }
    var age = 18
    var s1 = `我叫肖言是御用女主, 今年 ${age} 岁`
    console.log(s1)

    var s2 = '我叫肖言是御用女主, 今年 ${age} 岁'
    console.log(s2)

    var s3 = "我叫肖言是御用女主, 今年 ${age} 岁"
    console.log(s3)

3.展开运算符

• ES6 的展开运算符…

作用: 展开数组的[] 或者展开对象的 {}

console.log(100, 200, 300, 400)                结果：100 200 300 400
var arr = [ 100, 200, 300, 400 ]  
console.log(arr)                               结果： [ 100, 200, 300, 400 ]
console.log(...arr)					               结果：100 200 300 400

作用1: 合并数组

var arr1 = [ 10, 20 ]
var arr2 = [ 30, 40 ]
var arr3 = [ 50, 60, 70 ]
var arr4 = [ 80, 90 ]
var arr5 = [ ...arr1, ...arr2, ...arr3, ...arr4 ]
console.log(arr5)           结果： [10，20，30，40，50，60，70，80，90]

作用2: 给函数传递参数

var arr1 = [ 10, 20, 17, 7, 31, 22, 12 ]
// var max = Math.max(10, 20, 17, 7, 31, 22, 12)                结果：31
// var max = Math.max(arr1)                                   结果：报错
var max = Math.max(...arr1)                                     结果：31
console.log(max)    

展开对象

var obj = { name: 'Jack', age: 18 }
console.log(obj) 
// 作用1: 用来复制对象
// 注意: 展开书写的顺序问题, 在有相同成员的时候
var obj2 = {
  gender: '男',
  ...obj,
  name: 'Rose',
}
console.log(obj2)

4.ES6 的类语法

语法:
class 类名 {
// 原先 ES5 内的构造函数体
constructor () {}
// 直接书写原型上的方法即可
// 书写静态属性和方法, 需要加上一个 static 关键字即可
}

  <script>
    function Person(name, age) {
      this.name = name
      this.age = age
    }

    // 原型添加一个方法
    // 2. 原型上的方法, 目的是为了给 实例使用
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 书写静态属性和方法
    Person.a = 100
    Person.go = function () { console.log('跑起来') }

    var p1 = new Person('jack', 18)
    console.log(p1)
    p1.sayHi()

    // 1. 构造函数本质还是一个函数, 可以不和 new 关键字连用
    var p2 = Person('Rose', 20)
    console.log(p2)

    console.log(Person.a)
    Person.go()
    // 类的书写
    class Person {
      constructor (name, age) {
        // 这里按照 ES5 的构造函数体书写
        this.name = name
        this.age = age
      }

      // 直接书写原型上的方法即可
      sayHi () { console.log('你好 世界') }

      // 静态属性
      static a = 100

      // 静态方法
      static go () { console.log('running') }
    }

    var p1 = new Person('张三', 18)
    console.log(p1)
    p1.sayHi()

    // 使用静态属性和静态方法
    Person.go()
    console.log(Person.a)
  </script>

5.总结

解构赋值
解构赋值分成两种： 数组的解构赋值；对象的解构赋值。
模板字符串： ES6 内新增的定义字符串的方式（可以换行书写；可以直接在字符串内解析变量；）
展开运算符：展开数组的[] 或者展开对象的 {}。
ES6 的类语法：
class 类名 {
constructor () {}
}

-----------------------------------------------------------------
好了，关于前端之ES6解构赋值、模板字符串、展开运算符、类语法的基本语法知识已经写的非常清楚了，具体实战有什么问题的小伙伴可留言或者私信，看到一定帮您解决，我们别的文章再见。