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

摘要： Map運算子用於對陣列的所有元素執行特定操作，並返回包含已修改元素的陣列。 它很容易實現。我們來看一個例子吧。 let arr = [1,2,3,4,5]; let modifiedArr = arr.map（function（element，index，arr）{ return...

Map運算子用於對陣列的所有元素執行特定操作，並返回包含已修改元素的陣列。

它很容易實現。我們來看一個例子吧。

let arr = [1,2,3,4,5];
let modifiedArr = arr.map（function（element，index，arr）{ 
return element * 10; 
}）; 
console.log（modifiedArr）;
輸出：
[10,20,30,40,50]
複製程式碼

如您所見，map使用帶三個引數的函式。

第一個引數是元素本身。

第二個引數是元素的索引。

第三個引數是整個陣列。

並且還要注意我們最終必須返回一些值。這將是該元素的修改值。如果您沒有返回任何內容，那麼特定元素將是未定義的。

另外，我想說的是第二個和第三個引數只是可選的。只有第一個引數是必需的。

let modifiedArr = arr.map（function（element）{ 
return element * 10; 
}）;
複製程式碼

如您所見，map使用單個引數的函式。

好吧..讓我們嘗試用箭頭函式編寫map運算子。

let modifiedArr = arr.map（（element，index）=> { 
console.log（“index”+ index）; 
return element * 10; 
}）; 
console.log（modifiedArr）;
輸出：
index 0 
index 1 
index 2 
index 3 
index 4 
[10,20,30,40,50]
複製程式碼

我想我不必多解釋。這很簡單。

最後一個例子。

let modifiedArr = arr.map（element => element * 10）; 
console.log（modifiedArr）;
複製程式碼

酷吧:)

如果你很瞭解箭頭函式，它應該很容易理解。但如果你沒有明白它，我會嘗試解釋。

這裡有兩件事要解釋。

1、如果一個函式帶有單個引數，則不需要（）。在我們的例子中，element是引數。

2、如果單行程式碼作為函式體，則不需要{}，並且JS將在執行函式後隱式返回值。您不必使用return關鍵字。

陣列過濾器

陣列過濾器用於根據某些條件過濾整個陣列。陣列過濾器獲取陣列的每個元素並檢查給定條件。如果元素通過條件，它將元素保留在陣列中，否則它將刪除元素。

讓我們看一些例子。

let arr = [1,2,3,4,5,6] 
let modifiedArr = arr.filter（function（element，index，array）{ 
return element％2 == 0 
}）; 
console.log（modifiedArr）;
輸出：
[2,4,6]
複製程式碼

正如您在上面的示例中所看到的，像map一樣，這裡filter也使用三個引數。

我們必須為陣列的每個元素返回一個布林值。如果您不在末尾返回任何布林值，則filter將其視為false並刪除該元素。

好吧..讓我們試試箭頭功能吧。

let modifiedAarr = arr.filter（（element，index）=> element％2 == 0）
複製程式碼

希望你明白了。並且不要忘記注意，只有第一個引數是強制性的。其他兩個引數是可選的。

陣列降維

陣列降維用於聚合陣列的所有元素並返回單個值。

讓我們看一些例子

let arr = [1,2,3,4,5,6] 
let total = arr.reduce（function（sum，element，index，array）{ 
return sum + element; 
}，0）; 
console.log（“total is”+ total）;
輸出：
total is 21
複製程式碼

與filter和map不同，reduce使用具有四個引數的函式以及一個附加元素。在我們的例子中，它是0。

讓我們看看它是如何工作的。

帶四個引數的函式第一個引數是聚合器元素。它是所有元素總和，並且可以給定一個初始值。它的初始值被定義為附加元素。在我們的例子中，它是0。

然後第二個，第三個和第四個引數與filter和map相同。

像filter和map一樣，您必須返回最終結果。

讓我們看另一個例子。

let arr = [1,2,3,4,5,6]; 
let totalSum = arr.reduce（function（sum，element，index，array）{ 
console.log（sum +“+”+ element +“=”+ sum + element）; 
return sum + element; 
}，10）; 
console.log（“Total sum is ”+ totalSum）;
輸出：
10 + 1 = 11 
11 + 2 = 13 
13 + 3 = 16 
16 + 4 = 20 
20 + 5 = 25 
25 + 6 = 31 
Total sum is 31
複製程式碼

希望你弄懂了這個例子。請注意，我們將聚合器元素總和的初始值設定為10。

讓我們用箭頭函式編寫相同的程式碼。

let totalSum = arr.reduce（（sum，element）=> element + sum，0）
複製程式碼

希望你明白了。這是直截了當的。

與filter和map不同，前兩個引數是必需的。其他兩個是可選的。

這是jsfiddle, 去玩一玩。:)

模板文字

如果您知道其他指令碼語言，如ruby，python，那麼模板文字對您來說並不新鮮。

它們是新的語法，可以輕鬆新增表示式。

模板文字用於執行任何JS表示式。

讓我們看一些例子

let name = "Jon Snow";
let msg = `My name is ${name}`;
console.log(msg);
輸出:
My name is Jon Snow
複製程式碼

簡單吧。

您還可以使用多行字串。

let msg = `My name
is ${name}`;
console.log(msg);
輸出:
My name
is Jon Snow
複製程式碼

讓我們看看其他例子

let name = "Srebalaji";
let languages = () => {return "Ruby, Js, Java, Python"}
let msg = `My name is ${name}
My age is ${20+3}
And I code in ${languages()}`
輸出:
My name is Srebalaji
My age is 23
And I code in Ruby, Js, Java, Python
複製程式碼

希望你明白了。它直截了當。

您可以輕鬆新增任何表示式以及多行字串。

匯入和匯出

在ES6中匯入和匯出模組是您將在現代前端庫中看到的有用功能之一。

我強烈建議您在此Plunk中使用此功能。環境已經設定在那個plunk中。

好吧..那麼匯入和匯出如何在ES6中發揮作用。

模組中使用匯出來顯式匯出某些變數或函式或類。（即）如果匯出變數，則可以在其他模組中使用。

匯入用於從其他模組匯入變數，函式和類。

如果你沒弄明白我講的。讓我們看一些例子。

app.js
export let name = "Jon"
export let age = 23
index.js
import {name, age} from './app'
console.log(name);
console.log(age);
index.html
<script src="./index.js"></script>
輸出:
Jon
23
複製程式碼

在上面的例子中，我們定義了兩個變數name和age並匯出。

在另一個檔案中，我們匯入了變數並訪問了它們的值。

簡單吧。

讓我們深入一點

app.js
export default const name = "Jon"
index.js
import name from './app.js'
console.log(name);
輸出:
Jon
複製程式碼

在上面的程式碼中，您可以看到我們使用了新的關鍵字default。如果需要從模組中匯出單個值或函式或物件，則主要使用預設值。並且模組中只能有一個預設值。

關於預設值的另一件事。由於模組中只有一個預設值，因此您可以在匯入期間使用任何名稱來引用它。

例

import n from './app.js'
console.log(n);
輸出:
Jon
複製程式碼

如您所見，我們在此處將預設值引用為n。

讓我們深入一點。

app.js
let a = 10;
let b = 2;
let sum = () => a+b;
export {a,b}
export default sum
index.js
import * as variables from './app'
import addition from './app' // default value
console.log(variables.a);
console.log(variables.b);
console.log(addition());
輸出:
10
2
12
複製程式碼

在上面的例子中，您可以看到我們已經匯出了兩個變數和一個函式。我們使用*匯入了所有變數。

匯入時要記住兩件事。

1、如果使用*來匯入值，則必須使用別名（也就是）引用匯入的所有的值。在我們的示例中，我們使用variables作為別名。

2、使用*匯入值不會匯入預設值。你必須單獨匯入它。

import addition, * as variables from './app'
複製程式碼

如果需要在一行中匯入預設值和其他值，則可以使用上述語法。

希望你明白了。:)

解構物件和陣列

解構是ES6中的一個有用功能。它使用起來非常簡單。

讓我們舉個例子吧。

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName, lastName, age} = person
console.log(firstName);
console.log(lastName);
console.log(age);
輸出:
Jon
Snow
23
複製程式碼

在上面的程式碼，你可以看到物件person有多個鍵值對。

我們從物件本身建立了三個變數firstName，lastName，age（與物件鍵相同。）。

換句話說，我們從物件中提取鍵建立了三個變數。

讓我們看看其他一些例子

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName} = person
console.log(firstName);
輸出:
Jon
複製程式碼

在上面的示例中，您可以看到我們只從物件中提取了所需的值。

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName: name, age} = person
console.log(name);
console.log(age);
輸出:
Jon
23
複製程式碼

在上面的示例中，您可以看到我們已經定義了一個新的變數name，並使用firstName進行了分配。

希望你明白了。這很簡單。

讓我們看看如何解構陣列。

let arr [1, 2, 3, 4]
const [a, b, c, d] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
輸出:
1
2
3
4
複製程式碼

希望你能明白上面的程式碼。這很簡單。

我們將陣列的每個元素分配給變數。

讓我們看另一個例子。

let arr = [1,2,3,4,5,6]
let [a,b,,d,e] = arr
console.log(a);
console.log(b);
console.log(d);
console.log(e);
輸出:
1
2
4
5
複製程式碼

在上面的程式碼中，您可以看到我們已經跳過了陣列的第三個元素。除此之外，一切都與前面的例子相同。

讓我們看另一個例子。

let person = {firstName: "Jon", lastName: "Snow", age: 23}
let displayName = ({firstName, lastName:last}) => {
console.log(`${firstName} - ${last}`);
}
displayName(person);
Output:
Jon - Snow
複製程式碼

希望你明白了。它直截了當。

Extend和Super

如果您有使用OOPS編碼的經驗，那麼Extend和Super對您來說並不新鮮。

Extend用於從父類建立子類。子類繼承了父類的所有屬性，還可以修改父類的屬性。

class Person{
 constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
 }
 displayName() {
return `${this.firstName} - ${this.lastName}`;
 }
}
class Employee extends Person {
 constructor(firstName, lastName, age, salary) {
super(firstName, lastName, age);
this.salary = salary;
 }
 displaySalary() {
return `${this.salary}`;
 }
 displayName() {
return super.displayName();
 }
 displayAge() {
return this.age;
 }
}
let manager = new Employee("Jon", "Snow", 23, 100);
console.log(manager.displaySalary());
console.log(manager.displayName());
console.log(manager.displayAge());
輸出:
100
Jon Snow
23
複製程式碼

在上面的程式碼中，您可以看到我們已經使用建構函式和簡單方法定義了一個Person類。

然後我們定義了另一個類Employee，它是一個繼承自Person的子類。我們使用extend來實現這一目標。希望你明白這一點。

然後我們使用super關鍵字來呼叫父類的建構函式。我們還使用super呼叫父類中宣告的方法。

注意：只有在呼叫super之後才能在子類中使用this。如果在子類中呼叫super之前使用this，則會得到RefrenceError。

所以，我們在上面的程式碼中已經完成了三件事

1、我們使用extends從父類建立一個子類。 2、我們用super來呼叫父類的建構函式。 3、我們使用super來呼叫父類中定義的方法。 希望你明白了:)

這是用來玩的jsfiddle。

如果你喜歡這篇文章嘗試給一些鼓掌並分享它:) :)