這篇文章的第1部分出現(xiàn)在這里
文章的第2部分出現(xiàn)在這里
我將在本文中介紹的主題
1、數(shù)組映射
2败徊、數(shù)組過濾器
3、數(shù)組降維
4无蜂、模板文字
5易结、導(dǎo)入和導(dǎo)出
6、解構(gòu)對象和數(shù)組
7线欲、extend和super
數(shù)組映射
Map運算符用于對數(shù)組的所有元素執(zhí)行特定操作，并返回包含已修改元素的數(shù)組汽摹。
它很容易實現(xiàn)李丰。我們來看一個例子吧。
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使用帶三個參數(shù)的函數(shù)拉庶。
第一個參數(shù)是元素本身嗜憔。
第二個參數(shù)是元素的索引。
第三個參數(shù)是整個數(shù)組氏仗。
并且還要注意我們最終必須返回一些值吉捶。這將是該元素的修改值。如果您沒有返回任何內(nèi)容，那么特定元素將是未定義的呐舔。
另外币励，我想說的是第二個和第三個參數(shù)只是可選的。只有第一個參數(shù)是必需的滋早。
let modifiedArr = arr.map（function（element）{
return element * 10;
}）;
如您所見，map使用單個參數(shù)的函數(shù)砌们。
好吧..讓我們嘗試用箭頭函數(shù)編寫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）;
酷吧:)
如果你很了解箭頭函數(shù)影兽，它應(yīng)該很容易理解揭斧。但如果你沒有明白它，我會嘗試解釋峻堰。
這里有兩件事要解釋讹开。
1、如果一個函數(shù)帶有單個參數(shù)捐名，則不需要（）旦万。在我們的例子中，element是參數(shù)镶蹋。
2成艘、如果單行代碼作為函數(shù)體，則不需要{}贺归，并且JS將在執(zhí)行函數(shù)后隱式返回值淆两。您不必使用return關(guān)鍵字。
數(shù)組過濾器
數(shù)組過濾器用于根據(jù)某些條件過濾整個數(shù)組拂酣。數(shù)組過濾器獲取數(shù)組的每個元素并檢查給定條件秋冰。如果元素通過條件，它將元素保留在數(shù)組中婶熬，否則它將刪除元素丹莲。
讓我們看一些例子。
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也使用三個參數(shù)洲赵。
我們必須為數(shù)組的每個元素返回一個布爾值。如果您不在末尾返回任何布爾值，則filter將其視為false并刪除該元素叠萍。
好吧..讓我們試試箭頭功能吧芝发。
let modifiedAarr = arr.filter（（element，index）=> element％2 == 0）
希望你明白了苛谷。并且不要忘記注意辅鲸，只有第一個參數(shù)是強(qiáng)制性的。其他兩個參數(shù)是可選的腹殿。
數(shù)組降維
數(shù)組降維用于聚合數(shù)組的所有元素并返回單個值独悴。
讓我們看一些例子
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使用具有四個參數(shù)的函數(shù)以及一個附加元素坟奥。在我們的例子中，它是0拇厢。
讓我們看看它是如何工作的爱谁。
帶四個參數(shù)的函數(shù)第一個參數(shù)是聚合器元素。它是所有元素總和孝偎，并且可以給定一個初始值管行。它的初始值被定義為附加元素。在我們的例子中邪媳，它是0捐顷。
然后第二個，第三個和第四個參數(shù)與filter和map相同雨效。
像filter和map一樣迅涮，您必須返回最終結(jié)果。
讓我們看另一個例子徽龟。
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
希望你弄懂了這個例子。請注意极颓，我們將聚合器元素總和的初始值設(shè)置為10朱盐。
讓我們用箭頭函數(shù)編寫相同的代碼。
let totalSum = arr.reduce（（sum菠隆，element）=> element + sum兵琳，0）
希望你明白了狂秘。這是直截了當(dāng)?shù)摹?/p>
與filter和map不同，前兩個參數(shù)是必需的躯肌。其他兩個是可選的者春。
這是jsfiddle, 去玩一玩。:)
模板文字
如果您知道其他腳本語言清女，如ruby钱烟，python，那么模板文字對您來說并不新鮮嫡丙。
它們是新的語法拴袭，可以輕松添加表達(dá)式。
模板文字用于執(zhí)行任何JS表達(dá)式迄沫。
讓我們看一些例子
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
希望你明白了羊瘩。它直截了當(dāng)。
您可以輕松添加任何表達(dá)式以及多行字符串盼砍。
導(dǎo)入和導(dǎo)出
在ES6中導(dǎo)入和導(dǎo)出模塊是您將在現(xiàn)代前端庫中看到的有用功能之一尘吗。
我強(qiáng)烈建議您在此Plunk中使用此功能。環(huán)境已經(jīng)設(shè)置在那個plunk中浇坐。
好吧..那么導(dǎo)入和導(dǎo)出如何在ES6中發(fā)揮作用睬捶。
模塊中使用導(dǎo)出來顯式導(dǎo)出某些變量或函數(shù)或類。（即）如果導(dǎo)出變量近刘，則可以在其他模塊中使用擒贸。
導(dǎo)入用于從其他模塊導(dǎo)入變量，函數(shù)和類觉渴。
如果你沒弄明白我講的介劫。讓我們看一些例子。
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并導(dǎo)出座韵。
在另一個文件中，我們導(dǎo)入了變量并訪問了它們的值踢京。
簡單吧誉碴。
讓我們深入一點
app.js
export default const name = "Jon"
index.js
import name from './app.js'
console.log(name);
輸出:
Jon
在上面的代碼中，您可以看到我們使用了新的關(guān)鍵字default瓣距。如果需要從模塊中導(dǎo)出單個值或函數(shù)或?qū)ο笄粒瑒t主要使用默認(rèn)值。并且模塊中只能有一個默認(rèn)值蹈丸。
關(guān)于默認(rèn)值的另一件事蹬屹。由于模塊中只有一個默認(rèn)值侣背，因此您可以在導(dǎo)入期間使用任何名稱來引用它。
例
import n from './app.js'
console.log(n);
輸出:
Jon
如您所見慨默，我們在此處將默認(rèn)值引用為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
在上面的例子中厦取，您可以看到我們已經(jīng)導(dǎo)出了兩個變量和一個函數(shù)潮太。我們使用*導(dǎo)入了所有變量。
導(dǎo)入時要記住兩件事虾攻。
1铡买、如果使用*來導(dǎo)入值，則必須使用別名（也就是）引用導(dǎo)入的所有的值霎箍。在我們的示例中奇钞，我們使用variables作為別名。
2漂坏、使用*導(dǎo)入值不會導(dǎo)入默認(rèn)值景埃。你必須單獨導(dǎo)入它。
import addition, * as variables from './app'
如果需要在一行中導(dǎo)入默認(rèn)值和其他值顶别，則可以使用上述語法谷徙。
希望你明白了。:)
解構(gòu)對象和數(shù)組
解構(gòu)是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有多個鍵值對屈尼。
我們從對象本身創(chuàng)建了三個變量firstName，lastName拴孤，age（與對象鍵相同脾歧。）。
換句話說乞巧，我們從對象中提取鍵創(chuàng)建了三個變量涨椒。
讓我們看看其他一些例子
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
在上面的示例中蚕冬，您可以看到我們已經(jīng)定義了一個新的變量name，并使用firstName進(jìn)行了分配是辕。
希望你明白了囤热。這很簡單。
讓我們看看如何解構(gòu)數(shù)組获三。
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
希望你能明白上面的代碼旁蔼。這很簡單锨苏。
我們將數(shù)組的每個元素分配給變量。
讓我們看另一個例子棺聊。
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
在上面的代碼中伞租，您可以看到我們已經(jīng)跳過了數(shù)組的第三個元素。除此之外限佩，一切都與前面的例子相同葵诈。
讓我們看另一個例子。
let person = {firstName: "Jon", lastName: "Snow", age: 23}
let displayName = ({firstName, lastName:last}) => {
console.log(`${firstName} - ${last}`);
}
displayName(person);
Output:
Jon - Snow
希望你明白了祟同。它直截了當(dāng)作喘。
Extend和Super
如果您有使用OOPS編碼的經(jīng)驗，那么Extend和Super對您來說并不新鮮晕城。
Extend用于從父類創(chuàng)建子類泞坦。子類繼承了父類的所有屬性，還可以修改父類的屬性砖顷。
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
在上面的代碼中贰锁，您可以看到我們已經(jīng)使用構(gòu)造函數(shù)和簡單方法定義了一個Person類。
然后我們定義了另一個類Employee择吊，它是一個繼承自Person的子類李根。我們使用extend來實現(xiàn)這一目標(biāo)槽奕。希望你明白這一點几睛。
然后我們使用super關(guān)鍵字來調(diào)用父類的構(gòu)造函數(shù)。我們還使用super調(diào)用父類中聲明的方法粤攒。
注意：只有在調(diào)用super之后才能在子類中使用this所森。如果在子類中調(diào)用super之前使用this，則會得到RefrenceError夯接。
所以焕济，我們在上面的代碼中已經(jīng)完成了三件事
1、我們使用extends從父類創(chuàng)建一個子類盔几。
2晴弃、我們用super來調(diào)用父類的構(gòu)造函數(shù)。
3逊拍、我們使用super來調(diào)用父類中定義的方法上鞠。
希望你明白了:)
這是用來玩的jsfiddle。
如果你喜歡這篇文章嘗試給一些鼓掌并分享它:) :)
