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

原文戳這裏

[譯]ES6入門（第一部分）

[譯]ES6入門（第二部分）

這篇文章的第1部分出如今這裏

文章的第2部分出如今這裏

我將在本文中介紹的主題

一、數組映射

二、數組過濾器

三、數組降維

四、模板文字

五、導入和導出

六、解構對象和數組

七、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）;
複製代碼

酷吧:)

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

這裏有兩件事要解釋。

一、若是一個函數帶有單個參數，則不須要（）。在咱們的例子中，element是參數。

二、若是單行代碼做爲函數體，則不須要{}，而且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
複製代碼

在上面的例子中，您能夠看到咱們已經導出了兩個變量和一個函數。咱們使用*導入了全部變量。

導入時要記住兩件事。

一、若是使用*來導入值，則必須使用別名（也就是）引用導入的全部的值。在咱們的示例中，咱們使用variables做爲別名。

二、使用*導入值不會導入默認值。你必須單獨導入它。

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。

因此，咱們在上面的代碼中已經完成了三件事

一、咱們使用extends從父類建立一個子類。 二、咱們用super來調用父類的構造函數。 三、咱們使用super來調用父類中定義的方法。 但願你明白了:)

這是用來玩的jsfiddle。

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