ES6在工作中會用到的核心知識點講解
阿新 • • 發佈：2021-01-26
# 一、var, let, const
談到ES6，估計大家首先肯定會想到var，let，const
咱就先談談這三者的區別
```js
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，再舉個例子：
```js
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進行的封裝。
其實很簡單的，稍微介紹下
```js
Promsie(function(resolved, rejected){});//使用方法，Promise是建構函式，不是基礎型別。引數是一個具有兩個函式引數的一個函式。
```
在Promise中，有三種狀態：Pending（進行中）、Resolved（已完成）和Rejected（已失敗）。一旦執行，返回的結果只有後面兩種的其中的一個。這正好印證了Promise英文承諾的意思。
這個建構函式有兩個引數，第一個引數指的是成功後執行resolve方法，失敗後執行rejected方法。這兩個引數是方法，就是所謂的回撥函式。
Promise的本質就是回撥函式。
舉個例子：
```js
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指向呼叫它的物件。
想要徹底理解，還是需要一定的時間多思考思考的。
怎麼理解呢？
舉個例子
```js
//先來個閉包
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。
那麼箭頭函式到底解決了什麼樣的問題？
請繼續看下面的程式碼
```js
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指向。
詳細介紹下：
舉個例子
```js
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、數組合並
```js
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、解構賦值
```js
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、兩數交換
順便複習下選擇排序演算法。
```js
//選擇排序
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中，經常會遇到的。
```js
...mapGetters({
// 把 `this.doneCount` 對映為 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
```
人生莫懼少年窮，趁著年輕，好好規劃自己的人生！！！