ES6在工作中會用到的核心知識點講解


一、var, let, const

談到ES6,估計大家首先肯定會想到var,let,const
咱就先談談這三者的區別

var a = 3;
{
    var a = 4;
}
console.log(a);//4

let b = 5;
{
    let b = 6;
}
console.log(b);//5

const c = 7;
{
    const c = 8;
}
console.log(c);//7
c = 9;//報錯 Uncaught TypeError: Assignment to constant variable.

很簡單吧,
var聲明的變量可以重新聲明,並且是全局作用域
let聲明的變量不可以重新聲明,並且是局部作用域
const聲明的變量不可以重新聲明,並且不可以更改值局部作用域(聲明的是對象的話,可以更改對象里面某個屬性的值)
針對const,再舉個例子:

const d = {
    id: 123
};
console.log(d.id);//123
d.id = 456;
console.log(d.id);//456
d = 567;//報錯 Uncaught TypeError: Assignment to constant variable.

在實際中,let經常用在for循環上

二、Promise

談到Promise,首先先談一下jQuery的Ajax請求,工作中采用Ajax的通常都會在success回調函數之后,進行一系列的DOM相關操作,實際中,可能還會遇到在success后,再次發送一個Ajax請求,接着繼續在success里面寫一些其他代碼,如果多的話,便會產生回調地獄,而引入Promise就是為了解決以上的問題。畢竟異步請求大多采用這個了。回調函數已經不香了
在Vue項目中,我想axios大家不會陌生吧,這個便是使用Promise結合XMLHttpRequest進行的封裝。Ajax是XMLHttpRequest進行的封裝。
其實很簡單的,稍微介紹下

Promsie(function(resolved, rejected){});//使用方法,Promise是構造函數,不是基礎類型。參數是一個具有兩個函數參數的一個函數。

在Promise中,有三種狀態:Pending(進行中)、Resolved(已完成)和Rejected(已失敗)。一旦執行,返回的結果只有后面兩種的其中的一個。這正好印證了Promise英文承諾的意思。
這個構造函數有兩個參數,第一個參數指的是成功后執行resolve方法,失敗后執行rejected方法。這兩個參數是方法,就是所謂的回調函數。
Promise的本質就是回調函數。
舉個例子:

var pro = new Promise(function (resolve, reject) {
    try {
        var a = 3;//可以更改值,觸發reject函數
        if (a == 3) {//a==3
            setTimeout(() => {
                a = 6;
                resolve(a);//異步執行獲取到的數據,傳遞到resolve函數里面
            }, 3000);
        }
        else {//a!=3
            reject(8);
        }

    }
    catch (err) {
        console.log(err);
    }
});
pro.then(function (data) {
    console.log(data);//then的第一個參數就是上面的promise中,resolve調用的數據
}, function (err) {
    console.log(err);//道理同上,是reject調用的數據
});

三、箭頭函數跟this

關於this,只需要記住一句話:
this指向調用它的對象。
想要徹底理解,還是需要一定的時間多思考思考的。
怎么理解呢?
舉個例子

//先來個閉包
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        var that = this;
        return function () {
            console.log(this.name);
            console.log(that.name);
        }
    }
};
object.getNameFunc()();//先打印出 The Window 再打印出 My Object

上面用到了閉包,理解閉包
首先分析下代碼,執行object.getNameFunc()返回的是一個函數,然后再執行返回的這個函數。在這里,執行返回的函數其實是由window調用的,所以這里的this指向的是window,而不是object。
那么箭頭函數到底解決了什么樣的問題?
請繼續看下面的代碼

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        //var that = this;
        return () => {           
            console.log(this.name);
        }
    }
};
object.getNameFunc()();//打印出My Object

正如上面的代碼,省略了var that=this; 不需要再通過變量來保存this了。關於this跟that在Vue項目中,我們經常會用到,而且經常會碰到this指向問題,需要再定義一個that保存this指向。而ES6引入箭頭函數,便很好地解決了這個問題。

call跟apply,更改this指向

關於this指向問題,不得不談下call跟apply這兩個方法。因為這兩個方法是可以改變this指向。
詳細介紹下:
舉個例子

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        //var that = this;
        return function (x, y) {
            console.log(this.name);
            console.log(x + y);
            //console.log(that.name);
        }
    }
};
object.getNameFunc().call(object, 1, 2);//call的使用,將this指向object
object.getNameFunc().apply(object, [1,2]);//apply的使用    call跟apply一樣的,僅僅是參數不同。

四、三個點(...)的使用

啰嗦一句,這三個點叫法,還挺多的,有的叫展開運算符,有的叫剩余運算符、解構運算符啥的等。
說下實際使用場景,也就是為啥ES6要引入這個。
1、數組合並

let a = [1, 2, 3];
let b = [4, 5, 6];
let c = [...a, ...b];
let d = a.concat(b);
console.log(c);//[1, 2, 3, 4, 5, 6]
console.log(d);//[1, 2, 3, 4, 5, 6]

正如代碼,使用...可以代替concat。
2、解構賦值

var res.data={
    "animals": {
        "dog": [
            {
                "name": "Rufus",
                "age":15
            },
            {
                "name": "Marty",
                "age": null
            }
        ]
    }
};
//要取到animals的值,我們通常是怎么做的?
var animals = res.data.animals;
var { animals } = res.data;//以下是使用ES6的做法,這便是優勢,如果是數組的話,道理一樣

let [a, [[b], c], ...d] = [1, [[2], 3], 4, 5, 6];
console.log(a);//1
console.log(b);//2
console.log(c);//3
console.log(d);//[4,5,6]

3、兩數交換
順便復習下選擇排序算法。

//選擇排序
function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (let i = 0; i < len - 1; i++) {
        minIndex = i;
        for (let j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j;
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;

        //這里的兩數交換,3行代碼可以寫成1行
        [arr[i]] = [arr[minIndex]];
    }
    return arr;
}

在vuex中,經常會遇到的。

...mapGetters({
  // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})
人生莫懼少年窮,趁着年輕,好好規划自己的人生!!!

本篇完 End!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM