這篇文章的第1部分出現在這裡
文章的第2部分出現在這裡
我將在本文中介紹的主題
1、陣列對映
2、陣列過濾器
3、陣列降維
4、模板文字
5、匯入和匯出
6、解構物件和陣列
7、extend和super
陣列對映
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。
如果你喜歡這篇文章嘗試給一些鼓掌並分享它:) :)