1. 程式人生 > >[譯]ES6入門(第一部分)

[譯]ES6入門(第一部分)

原文戳這裡

在這篇文章中,我將介紹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函式也沒有使用括號,就像為變數賦值一樣。

感謝您的時間。 希望你喜歡這篇文章。