ES6 全栈知识点

Question

let 和 const

• let 用于变量声明，相对于 var 不会提升成全局变量

if(true){
    let a = 1; //这个 a 在外部无法访问
}

• const 用于值不会改变的量（常量）的声明

// 变量
let num = 1;

// 常量
const PI = 3.14;
PI = 3.15; //报错

// 对象里面的东西可以改变
const obj = { name: 'jack' }
obj.name = 'rose'
obj = { name: 'rose' }	//报错

箭头函数

• 相对于 function，ES6 更简洁
• （左边）一个参数小括号可省

// ES5
var fn = function (num) {
    return num
}

// ES6，（左边）一个参数小括号可省
let fn = (num) => {
    return num
}

• （右边）一行代码大括号可省

// ES5
var fn = function (n1, n2) {
    return n1 + n2
}

// ES6
let fn = (n1, n2) => {
    return n1 + n2
}
// （右边）一行代码大括号可省
let fn = (n1, n2) => n1 + n2

• 箭头函数 this 会向上级函数绑定
• 同时 arguments 也向上绑定

var button = document.querySelector('button');

// ES5
var obj = {
    name: 'jack',
    init: function(){
        //这里的 this 是 init 的 this，也是 obj
        var that = this;
        button.onclick = function() {
            console.log(this); //这里的 this 是 button
            console.log(that.name); //jack
        }
    }
}
obj.init();

// ES6
var obj = {
    name: 'jack',
    init: function() {
        button.onclick = () => {
            //箭头函数自身没有 this，向上层 function 绑定 this
            console.log(this); //这里的 this 是 obj
            console.log(this.name); //jack
        }
    }
}
obj.init();

• 箭头函数本身没有 this，会向上级 function 绑定 this，因此，其不可以作为构造函数的使用

promise

promise 有三种状态，该状态一经改变，无法回退和暂停：

• resolve 调用=>resoleved/fullfilled，成功
• reject 调用=>rejected，失败
• 没有调用这两种任意一个=>pending（初始状态），待发

promise 是一个存储异步操作的容器，异步执行后，标记不同的成功/失败/发生中状态，后续根据状态控制异步执行顺序

// ES5，回调地狱
$.ajax('/a', function(){
    //请求 a 后请求 b
    $.ajax('./b', function(){
        //请求 b 后的操作
	})
})

//ES6
new Promise(function(resolve, reject){
    //成功调用 resolve(data)
    //失败调用 reject(err)
}).then(function(data){
    //成功对应的代码
}, function(err){
	//失败对应的代码
})

解构赋值

let obj = {a: 1, b: 2, c: 3}
let a = obj.a；
let b = obj.b;

//等同于
let obj = {a: 1, b: 2, c: 3}
let {a, b} = obj; //a:1, b:2 关键是 key

let arr = [1, 2, 3, 4];
let [a,,,d] = arr; //a:1, d:4 关键是顺序