[譯]ES6入門（第一部分）

原文戳這裏

[譯]ES6入門（第二部分）

[譯]ES6入門（第三部分）

在這篇文章中，我將介紹ES6中的一些新功能。若是您是ES6新手或學習前端框架，將會頗有幫助。 我將在這篇文章中介紹的主題：

一、Let 和 Const

二、箭頭函數

三、默認參數

四、for of 循環

五、展開屬性

六、Maps

七、Sets

八、靜態方法

九、Getters 和 Setters

Let

let相似於var可是let具備做用域。 let只能在定義的塊級別中訪問。

if (true) {
 let a = 40;
 console.log(a); //40
}
console.log(a); // undefined
複製代碼

在上面的示例中，變量'a'在If語句中定義，所以在函數外部沒法訪問。

另一個例子：

let a = 50;
let b = 100;
if (true) {
 let a = 60;
 var c = 10;
 console.log(a/c); // 6
 console.log(b/c); // 10
}
console.log(c); // 10
console.log(a); // 50
複製代碼

Const

Const用於給變量賦值一個常量。這個值是沒法改變，它是固定的。

const a = 50;
a = 60; // 出錯. 你不能改變const的值
const b = "Constant variable";
b = "Assigning new value"; // 出錯
複製代碼

思考一下另外一個例子：

const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // 錯誤.
LANGUAGES.push('Java'); // 正常.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
複製代碼

這可能有點使人費解。

以這種方式考慮。不管什麼時候定義const變量，Javascript都會將值的內存地址賦值給變量。在咱們的示例中，變量'LANGUAGES'實際上指向了分配給數組的內存。所以，你沒法在之後更改變量來指向其餘內存位置。在整個程序中它只指向數組。

箭頭函數

函數在ES6發生了一些變化。個人意思是語法。

// 老語法
function oldOne() {
 console.log("Hello World..!");
}
// 新語法
var newOne = () => {
 console.log("Hello World..!");
}
複製代碼

新語法可能會讓人感到困惑，但我會嘗試解釋一下。

語法分爲兩部分。

第一部分是聲明一個變量併爲其分配函數（即）（）。它只是說變量其實是一個函數。

而後第二部分聲明函數體。 帶有花括號的箭頭部分定義了函數體。

另外一個帶參數的例子。

let NewOneWithParameters = (a, b) => {
 console.log(a+b); // 30
}
NewOneWithParameters(10, 20);
複製代碼

我認爲我不須要對此做出解釋。 它直截了當。

默認參數

若是您熟悉Ruby，Python等其餘編程語言，那麼默認參數對您來講並不陌生。 默認參數是在聲明函數時默認給出的參數。 可是在調用函數時能夠更改它的值。

例子：

let Func = (a, b = 10) => {
 return a + b; 
}
Func(20); // 20 + 10 = 30
複製代碼

在上面的例子中，咱們只傳遞一個參數。 該函數使用默認參數並執行該函數。

考慮另外一個例子：

Func(20, 50); // 20 + 50 = 70
複製代碼

在上面的示例中，該函數採用兩個參數，第二個參數替換默認參數。

再看另外一個例子：

let NotWorkingFunction = (a = 10, b) => {
 return a + b;
}
NotWorkingFunction(20); // NAN. 不能正常工做.
複製代碼

當您使用參數調用函數時，它們將按順序分配。 （即）第一個值分配給第一個參數，第二個值分配給第二個參數，依此類推。

在上面的例子中，值20被賦值給參數'a'而'b'沒有任何值。 因此咱們沒有獲得任何輸出。

可是，

NotWorkingFunction(20, 30); // 50;
複製代碼

正常工做。

For of 循環

for..of很是相似於for..in，但略有修改。

for..of遍歷元素列表（即），如Array，並逐個返回元素（不是它們的索引）

let arr = [2,3,4,1];
for (let value of arr) {
 console.log(value);
}
Output:
2
3
4
1
複製代碼

請注意，變量'value'輸出數組中的每一個元素而不是索引。

另一個例子：

let string = "Javascript";
for (let char of string) {
 console.log(char);
}
Output:
J
a
v
a
s
c
r
i
p
t
複製代碼

是的，它也適用於字符串。

展開屬性

正如其名，展開屬性幫助展開表達式。 簡單來講，它將元素列表轉換爲數組，或者將數組轉換成元素列表。

沒有展開屬性的示例：

let SumElements = (arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
 let sum = 0;
 for (let element of arr) {
 sum += element;
 }
 console.log(sum); // 220. 
}
SumElements([10, 20, 40, 60, 90]);
複製代碼

以上示例很簡單。 咱們聲明一個函數，接受數組做爲參數並返回其總和。 這很簡單。

如今考慮使用展開屬性的相同示例

let SumElements = (...arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
 let sum = 0;
 for (let element of arr) {
 sum += element;
 }
 console.log(sum); // 220. 
}
SumElements(10, 20, 40, 60, 90); // 注意咱們這裏沒有傳入數組. 而是將元素做爲參數傳遞。
複製代碼

在上面的例子中，展開屬性將元素列表（即參數）轉換爲數組。

另一個例子：

Math.max(10, 20, 60, 100, 50, 200); // 返回 200.

Math.max是一個簡單的方法，它返回給定列表中的最大元素。 它不接受數組。

let arr = [10, 20, 60];
Math.max(arr); // 出錯. 不接受數組.
複製代碼

因此讓咱們使用咱們的救世主。

let arr = [10, 20, 60];
Math.max(...arr); // 60
複製代碼

在上面的示例中，展開屬性將數組轉換爲元素列表。

Maps

Map包含鍵值對。它與數組相似，但咱們能夠定義本身的索引。索引在Map中是惟一的。

例子：

var NewMap = new Map();
NewMap.set('name', 'John'); 
NewMap.set('id', 2345796);
NewMap.set('interest', ['js', 'ruby', 'python']);
NewMap.get('name'); // John
NewMap.get('id'); // 2345796
NewMap.get('interest'); // ['js', 'ruby', 'python']
複製代碼

我認爲上面的例子是自我解釋的。

Map的其餘有趣的功能是全部索引都是惟一的。 咱們可使用任何值做爲鍵或值。

var map = new Map();
map.set('name', 'John');
map.set('name', 'Andy');
map.set(1, 'number one');
map.set(NaN, 'No value');
map.get('name'); // Andy. 注意John被Andy替換了.
map.get(1); // number one
map.get(NaN); // No value
複製代碼

Map中另一些有用的方法：

var map = new Map();
map.set('name', 'John');
map.set('id', 10);
map.size; // 2. 返回map的大小.
map.keys(); // 返回全部的鍵. 
map.values(); // 返回全部的值.
for (let key of map.keys()) {
 console.log(key);
}
輸出:
name
id
複製代碼

在上面的例子中, map.keys() 返回map的鍵，可是返回的是一個Iteratord對象，這意味這不能按原樣展現出來，只能經過迭代展現出來。

另一個例子：

var map = new Map();
for (let element of map) {
 console.log(element);
}
輸出:
['name', 'John']
['id', 10]
複製代碼

上面的例子是自我解釋的。 for..of循環輸出鍵值對數組。

Sets

Sets用來保存任何類型的惟一值. 簡單..!

例子：

var sets = new Set();
sets.add('a');
sets.add('b');
sets.add('a'); // 添加劇復的值.
for (let element of sets) {
 console.log(element);
}
輸出:
a
b
複製代碼

請注意，不會顯示重複值，只顯示了惟一值。

還要注意，Set是可迭代的對象。 咱們必須遍歷元素才能顯示它。

其餘有用的方法：

var sets = New Set([1,5,6,8,9]);
sets.size; // 返回 5. set的大小.
sets.has(1); // 返回 true. 
sets.has(10); // 返回 false.
複製代碼

在上面的例子中，size是不言自明的。 還有另外一種方法'has'，它根據給定元素是否存在於集合中返回一個布爾值。

靜態方法

大多數人已經據說過靜態方法。 靜態方法在ES6中引入。 定義它並使用它很是容易。

例子：

class Example {
 static Callme() {
 console.log("Static method");
 }
}
Example.Callme();
輸出:
Static method
複製代碼

請注意，我沒有在類中使用關鍵字「function」。

我能夠在不爲類建立任何實例的狀況下調用該函數。

Getters和Setters

Getters和Setterss是ES6中引入的有用功能之一。 若是你在JS中使用類，它會派上用場。

沒有getter和setter的示例：

class People {
constructor(name) {
 this.name = name;
 }
 getName() {
 return this.name;
 }
 setName(name) {
 this.name = name;
 }
}
let person = new People("Jon Snow");
console.log(person.getName());
person.setName("Dany");
console.log(person.getName());
輸出:
Jon Snow
Dany
複製代碼

上面的例子不言自明. 在類People中，咱們有兩個函數幫助咱們設置和獲取一我的的名字。

getters 和 setters的例子：

class People {
constructor(name) {
 this.name = name;
 }
 get Name() {
 return this.name;
 }
 set Name(name) {
 this.name = name;
 }
}
let person = new People("Jon Snow");
console.log(person.Name);
person.Name = "Dany";
console.log(person.Name);
複製代碼

在上面的示例中，您能夠看到在People類中，有兩個函數分別具備'get'和'set'屬性， 'get'屬性用於獲取變量的值，'set'屬性用於設置變量的值。

你能夠看到調用getName函數並無使用括號， 而且調用setName函數也沒有使用括號，就像爲變量賦值同樣。

感謝您的時間。 但願你喜歡這篇文章。 :) :)