ES6知识点

1. 变量相关的

let  const

1. 都不可以重复声明

2. 都有块级作用域

     3. const必须在声明的时候赋值   const声明的变量不能被修改值

2. 对象相关的

对象的简写 :

var name = "王春生"；
var obj = {
    name: name
}
// 简写如下
var obj = {
    name
}


var obj = {
    sayHello: function(){

    }
}
// 简写如下
var obj = {
    sayHello(){

    }
}

3. 解构赋值

// 1. 对象的解构
var obj = {
    name: "",
    age: 18
}
// 可以自动将对对象中指定的属性的值赋值给一个新的变量
var {对象的属性名: 要声明的变量名, 对象的属性名: 要声明的变量名, }
var {name, age} = obj;

// 2. 数组的解构
var arr = [1, 2, 3]
var [num1, num2, num3] = arr;
var [,,num3] = arr;

4. 剩余元素

1. 只能有一个
2. 必须是最后一个

var arr = [1, 2, 3]
var [num1, ...num2] = arr;
// num2 获取到的就是剩余的元素  2,3组成的数组

5. 剩余参数(Rest Pramater)

// 在函数的参数列表中可以使用剩余参数来获取传入的实参
// 1. 只能有一个
// 2. 必须是最后一个
// 3. 剩余参数是一个真数组！

function test(a, ...b){

}
test(1, 2, 3, 4, 5)

6. 箭头函数

var func = (参数) => {
    // 函数体
}
// 1. 如果只有一个参数则()省略
// 2. 如果函数体只有一句代码则{}省略
// 3. 如果函数体只有一句代码并且是个返回语句则{}和return都可省略

箭头函数中没有this

平时确定一个函数中的this是谁，我们需要通过调用模式来确定

1. 函数调用模式 this ---> window 函数名()

2. 方法调用模式 this ---> 调用方法的对象 对象.方法名()

3. 构造函数调用模式 this ---> 创建出来的实例 new 函数名()

 4. 上下文调用模式 this ---> call和apply的第一个参数 函数名.call()

在箭头函数中访问this的时候会沿着作用域链向上进行查找使用场景： var that = this; 的情况都可以使用箭头函数来解决

let obj = {
     name: "春生",
     sayHello() {
         var that = this;
         setTimeout(function () { 
             console.log("我叫" + that.name)
         }, 1000)
     }
 }

 let obj = {
     name: "春生",
     sayHello() {
         setTimeout(() => { 
            console.log("我叫" + this.name)
         }, 1000)
     }
 }

箭头函数中没有arguments

如果要在箭头函数中使用不定个数的参数，则直接用剩余参数

7. 对象扩展运算符...

var p = {
    name: "",
    age: 18
}

var s = {...p, 自己的属性}

8. 数组的拆解...

function sum(a, b, c){}
var arr = [1, 2, 3];
sum(...arr)

9. class

成员： 属性和方法的统称。

实例成员： 指的就是通过实例访问的成员。

静态成员： 指的就是通过构造函数本身访问的成员。

class 类名{
    constructor(){
        // 给实例添加属性
    }

    // 给实例添加方法，方法会被添加到原型中
    sayHello(){}

    // 给构造函数添加静态方法
    static 方法名(){}
}

实现继承 :

class Person(){
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayHello(){}
    static sayHi(){}
}

class Student extends Person{
    constructor(name, age){
        super(name, age)
        // 写自己的属性
        this.属性名 = ""
    }

}

var stu = new Studnet("", 18)

10. 模板字符串

 

反引号 `

1. 模板字符串可以换行

     var str = `字符

     串`

2. 可以直接在字符串中嵌入变量的

var name = "王春生"
var age = 45
var str = `我叫${name},
我今年${age}岁`