[譯]ES入門(第三部分)

沉默的範大叔發表於2018-10-04

原文戳這裡

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

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

這篇文章的第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

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

相關文章