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

談到es6，估計大家首先肯定會想到var，let，const

咱就先談談這三者的區別

var a = 3;
console.log(a);//4
let b = 5;
console.log(b);//5
const c = 7;
console.log(c);//7
c = 9;//報錯 uncaught typeerror: assignment to constant variable.

很簡單吧，

var宣告的變數可以重新宣告，並且是全域性作用域，

let宣告的變數不可以重新宣告，並且是區域性作用域，

const宣告的變數不可以重新宣告，並且不可以更改值，區域性作用域（宣告的是物件的話，可以更改物件裡面某個屬性的值），

針對const，再舉個例子：

const d = ;
console.log(d.id);//123
d.id = 456;
console.log(d.id);//456
d = 567;//報錯 uncaught typeerror: assignment to constant variable.

在實際中，let經常用在for迴圈上

談到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) , 3000);
}else 
}catch (err) 
});pro.then(function (data) , function (err) );

關於this，只需要記住一句話：

this指向呼叫它的物件。

想要徹底理解，還是需要一定的時間多思考思考的。

怎麼理解呢？

舉個例子

//先來個閉包
var name = "the window";
var object = 
}};object.getnamefunc()();//先列印出 the window 再列印出 my object

上面用到了閉包，理解閉包

首先分析下**，執行object.getnamefunc()返回的是乙個函式，然後再執行返回的這個函式。在這裡，執行返回的函式其實是由window呼叫的，所以這裡的this指向的是window，而不是object。

那麼箭頭函式到底解決了什麼樣的問題？

請繼續看下面的**

var name = "the window";
var object = 
}};object.getnamefunc()();//列印出my object

正如上面的**，省略了var that=this; 不需要再通過變數來儲存this了。關於this跟that在vue專案中，我們經常會用到，而且經常會碰到this指向問題，需要再定義乙個that儲存this指向。而es6引入箭頭函式，便很好地解決了這個問題。

var name = "the window";
var object = 
}};object.getnamefunc().call(object, 1, 2);//call的使用，將this指向object

囉嗦一句，這三個點叫法，還挺多的，有的叫展開運算子，有的叫剩餘運算子、解構運算子啥的等。

說下實際使用場景，也就是為啥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的值，我們通常是怎麼做的？
var animals = res.data.animals;
var = 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) 
}temp = arr[i];
arr[i] = arr[minindex];
arr[minindex] = temp;
//這裡的兩數交換，3行**可以寫成1行
[arr[i]] = [arr[minindex]];
}return arr;
}

在vuex中，經常會遇到的。

...mapgetters()

人生莫懼少年窮，趁著年輕，好好規劃自己的人生！！！

本篇完 end!

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

在工作中找尋價值

ES6工作中常用知識點

策略模式在工作中應用

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

在工作中找尋價值

ES6工作中常用知識點

策略模式在工作中應用

相關推薦