[譯]ES6入門（第一部分）
ofollow,noindex">原文戳這裡
在這篇文章中，我將介紹ES6中的一些新功能。如果您是ES6新手或學習前端框架，將會很有幫助。 我將在這篇文章中介紹的主題：
1、Let 和 Const
2、箭頭函式
3、預設引數
4、for of 迴圈
5、展開屬性
6、Maps
7、Sets
8、靜態方法
9、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;
}
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中，我們有兩個函式幫助我們設定和獲取一個人的名字。
getters and 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函式也沒有使用括號，就像為變數賦值一樣。
感謝您的時間。 希望你喜歡這篇文章。 :) :)