[譯]ES入門(第三部分)
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。
如果你喜歡這篇文章嘗試給一些鼓掌並分享它:) :)