舉例說明了十大ES6功能

Ku_Andrew 發布于2019-08-21 16:55 / 460人閱讀

摘要：在我看來，這是最有價值的功能對數組的每個元素執行傳入的函數，將數組元素作為參數傳遞。它只是將每個數組元素轉換成別的東西。運行結果如下對象功能增強對象功能已被增強。要處理錯誤，您將回調函數提供為函數參數。

雖然ES6規范不是最近才發布，但我認為很多開發人員仍然不太熟悉。主要原因是在規范發布之后，Web瀏覽器的支持可能很差。目前，規范發布已經超過2年了，現在很多瀏覽器對ES6支持良好。即使您（或您的客戶）不使用最新版本的Web瀏覽器，也可以使用轉換器（如Babel），在應用程序的構建過程中將ES6轉換為ES5。這意味著要向前邁出一步，學習ES6。

在本文中，我將盡量簡單地介紹最有用的功能。在本教程之后，您將擁有基本技能，并能夠將其應用于實際項目中。不要將其視為指南或文件。我的目標是鼓勵你深入挖掘并熟悉ES6。

1. const和let關鍵字

const使您能夠定義常量（最終變量！）。 let讓你定義變量。這很棒，但是JavaScript中沒有變量嗎？是有的，但是由var聲明的變量具有函數范圍，并被提升到頂部。這意味著在聲明之前可以使用一個變量。讓變量和常量具有塊范圍（由{}包圍），在聲明之前不能使用。

function f() {
  var x = 1
  let y = 2
  const z = 3
  {
    var x = 100
    let y = 200
    const z = 300
    console.log("x in block scope is", x)
    console.log("y in block scope is", y)
    console.log("z in block scope is", z)
  }
  console.log("x outside of block scope is", x)
  console.log("y outside of block scope is", y)
  console.log("z outside of block scope is", z)
}

f()

運行結果如下：

x in block scope is 100 
y in block scope is 200 
z in block scope is 300 
x outside of block scope is 100 
y outside of block scope is 2 
z outside of block scope is 3

2. 數組輔助方法

出現了新的很酷的功能，這有助于在很多情況下使用JS Array。您實現了多少次的邏輯，如：過濾，檢查是否有任何或所有元素符合條件，或者元素轉換？是不是很多種情景下都有用過？現在語言本身自帶這些很好用的功能。在我看來，這是最有價值的功能：

forEach

對數組的每個元素執行傳入的函數，將數組元素作為參數傳遞。

var colors = ["red", "green", "blue"]

function print(val) {
  console.log(val)
}

colors.forEach(print)

運行結果如下：

red 
green 
blue

map

創建一個包含相同數量元素的新數組，但是由傳入的函數返回元素。它只是將每個數組元素轉換成別的東西。

var colors = ["red", "green", "blue"]

function capitalize(val) {
    return val.toUpperCase()
}

var capitalizedColors = colors.map(capitalize)

console.log(capitalizedColors)

運行結果如下：

["RED","GREEN","BLUE"]

filter

創建一個包含原始數組子集的新數組。新數組包含的這些元素通過由傳入的函數實現的測試，該函數應該返回true或false。

var values = [1, 60, 34, 30, 20, 5]

function lessThan20(val) {
    return val < 20
}

var valuesLessThan20 = values.filter(lessThan20)

console.log(valuesLessThan20)

運行結果如下：

[1,5]

find

找到通過傳入的函數測試的第一個元素，該函數應該返回true或false。

var people = [
  {name: "Jack", age: 50},
  {name: "Michael", age: 9}, 
  {name: "John", age: 40}, 
  {name: "Ann", age: 19}, 
  {name: "Elisabeth", age: 16}
]

function teenager(person) {
    return person.age > 10 && person.age < 20
}

var firstTeenager = people.find(teenager)

console.log("First found teenager:", firstTeenager.name)

運行結果如下：

First found teenager: Ann

every

檢查數組的每個元素是否通過傳入函數的測試，該函數應該返回true或false（每個函數都返回true，則結果為true，否則為false）。

var people = [
  {name: "Jack", age: 50},
  {name: "Michael", age: 9}, 
  {name: "John", age: 40}, 
  {name: "Ann", age: 19}, 
  {name: "Elisabeth", age: 16}
]

function teenager(person) {
    return person.age > 10 && person.age < 20
}

var everyoneIsTeenager = people.every(teenager)

console.log("Everyone is teenager: ", everyoneIsTeenager)

運行結果如下：

Everyone is teenager:  false

some

檢查數組的任何元素是否通過由提供的函數實現的測試，該函數應該返回true或false。(有一個函數返回true，則結果true。否則結果為false)

var people = [
  {name: "Jack", age: 50},
  {name: "Michael", age: 9}, 
  {name: "John", age: 40}, 
  {name: "Ann", age: 19}, 
  {name: "Elisabeth", age: 16}
]

function teenager(person) {
    return person.age > 10 && person.age < 20
}

var thereAreTeenagers = people.some(teenager)

console.log("There are teenagers:", thereAreTeenagers)

運行結果如下：

There are teenagers: true

reduce

方法接收一個函數作為累加器（accumulator），數組中的每個值（從左到右）開始縮減，最終為一個值。累加器的初始值應作為reduce函數的第二個參數提供。

var array = [1, 2, 3, 4]

function sum(acc, value) {
  return acc + value
}

function product(acc, value) {
  return acc * value
}

var sumOfArrayElements = array.reduce(sum, 0)
var productOfArrayElements = array.reduce(product, 1)

console.log("Sum of", array, "is", sumOfArrayElements)
console.log("Product of", array, "is", productOfArrayElements)

運行結果如下：

Sum of [1,2,3,4] is 10 
Product of [1,2,3,4] is 24

3.箭頭函數

執行非常簡單的函數（如上述的Sum或Product）需要編寫大量的模版。有什么解決辦法嗎？是的，可以嘗試箭頭函數！

var array = [1, 2, 3, 4]

const sum = (acc, value) => acc + value
const product = (acc, value) => acc * value

var sumOfArrayElements = array.reduce(sum, 0)
var productOfArrayElements = array.reduce(product, 1)

箭頭函數也可以內聯。它真的簡化了代碼：

var array = [1, 2, 3, 4]

var sumOfArrayElements = array.reduce((acc, value) => acc + value, 0)
var productOfArrayElements = array.reduce((acc, value) => acc * value, 1)

箭頭函數也可以更復雜，并且有很多行代碼：

var array = [1, 2, 3, 4]

const sum = (acc, value) => {
  const result = acc + value
  console.log(acc, " plus ", value, " is ", result)
  return result
}

var sumOfArrayElements = array.reduce(sum, 0)

4. 類

哪個Java開發人員在切換到JS項目時不會錯過類？誰不喜歡顯式繼承，像Java語言，而不是為原型繼承編寫魔術代碼？這引起了一些JS開發者反對，因為在ES6中已經引入了類。他們不改變繼承的概念。它們只是原型繼承的語法糖。

class Point {
    constructor(x, y) {
        this.x = x
        this.y = y
    }

    toString() {
        return "[X=" + this.x + ", Y=" + this.y + "]"
    }
}

class ColorPoint extends Point {
    static default() {
        return new ColorPoint(0, 0, "black")
    }

    constructor(x, y, color) {
        super(x, y)
        this.color = color
    }

    toString() {
        return "[X=" + this.x + ", Y=" + this.y + ", color=" + this.color + "]"
    }
}

console.log("The first point is " + new Point(2, 10))
console.log("The second point is " + new ColorPoint(2, 10, "green"))

運行結果如下：

The first point is [X=2, Y=10] 
The second point is [X=2, Y=10, color=green] 
The default color point is [X=0, Y=0, color=black]

5.對象功能增強

對象功能已被增強。現在我們可以更容易地：

定義具有和已有變量名稱相同且賦值的字段

定義函數

定義動態（計算）屬性

const color = "red"
const point = {
  x: 5,
  y: 10,
  color,
  toString() {
    return "X=" + this.x + ", Y=" + this.y + ", color=" + this.color
  },
  [ "prop_" + 42 ]: 42
}

console.log("The point is " + point)
console.log("The dynamic property is " + point.prop_42)

運行結果如下：

The point is X=5, Y=10, color=red 
The dynamic property is 42

6. 模板字符串

誰喜歡寫大字符串和變量連接？我相信我們中只有少數人喜歡。誰討厭閱讀這樣的代碼？我確定大家都是，ES6引入了非常易于使用的字符串模板和變量的占位符。

function hello(firstName, lastName) {
  return `Good morning ${firstName} ${lastName}! 
How are you?`
}

console.log(hello("Jan", "Kowalski"))

運行結果如下：

Good morning Jan Kowalski! 
How are you?

請注意，我們可以寫多行文本。

重要提示：使用反引號代替撇號來包裝文本。

7. 默認函數參數

你不喜歡提供所有可能的函數參數？使用默認值。

function sort(arr = [], direction = "ascending") {
  console.log("I"m going to sort the array", arr, direction)
}

sort([1, 2, 3])
sort([1, 2, 3], "descending")

運行結果如下：

I"m going to sort the array [1,2,3] ascending 
I"m going to sort the array [1,2,3] descending

8. rest參數和擴展運算符 擴展

它可以將數組或對象內容提取為單個元素。

示例 - 制作數組的淺拷貝：

var array = ["red", "blue", "green"]
var copyOfArray = [...array]

console.log("Copy of", array, "is", copyOfArray)
console.log("Are", array, "and", copyOfArray, "same?", array === copyOfArray)

運行結果如下：

Copy of ["red","blue","green"] is ["red","blue","green"] 
Are ["red","blue","green"] and ["red","blue","green"] same? false

示例 - 合并數組：

var defaultColors = ["red", "blue", "green"]
var userDefinedColors = ["yellow", "orange"]

var mergedColors = [...defaultColors, ...userDefinedColors]

console.log("Merged colors", mergedColors)

運行結果如下：

Merged colors ["red","blue","green","yellow","orange"]

rest參數

您要將前幾個函數參數綁定到變量，其他變量作為數組綁定到單個變量嗎？現在你可以很容易地做到這一點。

function printColors(first, second, third, ...others) {
  console.log("Top three colors are " + first + ", " + second + " and " + third + ". Others are: " + others)
}
printColors("yellow", "blue", "orange", "white", "black")

運行結果如下：

Top three colors are yellow, blue and orange. Others are: white,black

9. 解構賦值 數組

從數組中提取所請求的元素并將其分配給變量。

function printFirstAndSecondElement([first, second]) {
    console.log("First element is " + first + ", second is " + second)
}

function printSecondAndFourthElement([, second, , fourth]) {
    console.log("Second element is " + second + ", fourth is " + fourth)
}

var array = [1, 2, 3, 4, 5]

printFirstAndSecondElement(array)
printSecondAndFourthElement(array)

運行結果如下：

First element is 1, second is 2 
Second element is 2, fourth is 4

對象

從對象中提取所請求的屬性，并將其分配給與屬性相同名稱的變量。

function printBasicInfo({firstName, secondName, profession}) {
    console.log(firstName + " " + secondName + " - " + profession)
}

var person = {
  firstName: "John",
  secondName: "Smith",
  age: 33,
  children: 3,
  profession: "teacher"
}

printBasicInfo(person)

運行結果如下：

John Smith - teacher

10. Promises

Promises承諾（是的，我知道這聽起來很奇怪），你將會得到延期或長期運行任務的未來結果。承諾有兩個渠道：第一個為結果，第二個為潛在的錯誤。要獲取結果，您將回調函數作為“then”函數參數。要處理錯誤，您將回調函數提供為“catch”函數參數。

function asyncFunc() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
          const result = Math.random();
          result > 0.5 ? resolve(result) : reject("Oppps....I cannot calculate")
        }, 1)
    });
}

for (let i=0; i<10; i++) {
    asyncFunc()
        .then(result => console.log("Result is: " + result))
        .catch(result => console.log("Error: " + result))
}

運行結果如下：

Result is: 0.7930997430022211 
Error: Oppps....I cannot calculate 
Result is: 0.6412258210597288 
Result is: 0.7890325910244533 
Error: Oppps....I cannot calculate 
Error: Oppps....I cannot calculate 
Result is: 0.8619834683310168 
Error: Oppps....I cannot calculate 
Error: Oppps....I cannot calculate 
Result is: 0.8258410427354488

總結

我希望你喜歡這篇文章。如果您想要一些練習，您可以使用沙箱進行學習過程：https://es6console.com/。如果您需要更多信息，可以在這里找到

https://github.com/lukehoban/...

http://exploringjs.com/es6/

翻譯自Top 10 ES6 features by example

關注我的公眾號，更多優質文章定時推送

云服務器 GPU云服務器說明了簡單明了 ES6 es6-系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88901.html

Python中的十大圖像處理工具

摘要：之成為圖像處理任務的最佳選擇，是因為這一科學編程語言日益普及，并且其自身免費提供許多最先進的圖像處理工具。該庫包含基本的圖像處理功能，包括點操作使用一組內置卷積內核進行過濾以及顏色空間轉換。圖像處理系統有時被稱為圖像處理的瑞士軍刀。 showImg(https://segmentfault.com/img/remote/1460000019442221);編譯：張秋玥、小七、蔣寶尚本...

yuanxin 2019-07-31 10:32 評論0 收藏0
2017-10-09 前端日報

摘要：前端日報精選傳送門瀏覽器性能優化渲染性能在生產中的使用發送推送第期巧用匿名函數重構你的代碼中文可持久化數據結構以及結構分享眾成翻譯學習筆記的模板學習筆記教程的作用域插槽教程移動助手實踐一基于的換膚功能掘金網站壓力及性能測試一篇 2017-10-09 前端日報精選傳送門：React Portal瀏覽器性能優化-渲染性能在生產中的Progressive Web App使用Service...

WilsonLiu95 2019-08-21 16:55 評論0 收藏0
this

摘要：全局上下文在全局中，一律指向全局對象。特殊的以下情況中的需要進行特殊記憶。構造函數當一個函數作為構造函數使用時，構造函數的指向由該構造函數出來的對象。舉例使用綁定時，監聽函數中的指向觸發事件的，表示被綁定了監聽函數的元素。執行與執行同理。我的博客地址 → this | The story of Captain，轉載請注明出處。問：this 是什么？答：this 是 call 方法...

Airmusic 2019-08-22 14:05 評論0 收藏0
ES6常用知識點概述

摘要：那之前的例子來使用一下的話，你會發現瀏覽器報錯了，如圖定義的變量不允許二次修改。如圖箭頭函數沒有它自己的值，箭頭函數內的值繼承自外圍作用域。如圖這里兩邊的結構沒有一致，如果是的話，是可以正常解構的。前言國慶假期已過一半，來篇干貨壓壓驚。 ES6，并不是一個新鮮的東西，ES7、ES8已經趕腳了。但是，東西不在于新，而在于總結。每個學前端的人，身邊也必定有本阮老師的《ES6標準入門》或...

keithyau 2019-08-21 16:53 評論0 收藏0
邊緣計算與其“等風來”，不如自己創造“風口”

摘要：從某種程度上說，是的成立加速了邊緣計算風口的形成。就像邊緣計算產業聯盟副理事長華為網絡研發部總裁劉少偉所說的那樣，邊緣計算的發展與其等風來，還不如自己創造風口。在月日舉行的邊緣計算產業峰會上，劉少偉詳細介紹了整個聯盟的發展和運作情況。邊緣計算并不邊緣！繼云計算、大數據、物聯網、人工智能這些風口之后，邊緣計算現在也成了業界關注的焦點。2016年邊緣計算產業聯盟（ECC）剛成立之時，很多人還不清...

lijy91 2019-04-29 15:38 評論0 收藏0