舉例說明了十大ES6功能

Ku_Andrew 發(fā)布于2019-08-21 16:55 / 470人閱讀

摘要：在我看來，這是最有價(jià)值的功能對(duì)數(shù)組的每個(gè)元素執(zhí)行傳入的函數(shù)，將數(shù)組元素作為參數(shù)傳遞。它只是將每個(gè)數(shù)組元素轉(zhuǎn)換成別的東西。運(yùn)行結(jié)果如下對(duì)象功能增強(qiáng)對(duì)象功能已被增強(qiáng)。要處理錯(cuò)誤，您將回調(diào)函數(shù)提供為函數(shù)參數(shù)。

雖然ES6規(guī)范不是最近才發(fā)布，但我認(rèn)為很多開發(fā)人員仍然不太熟悉。主要原因是在規(guī)范發(fā)布之后，Web瀏覽器的支持可能很差。目前，規(guī)范發(fā)布已經(jīng)超過2年了，現(xiàn)在很多瀏覽器對(duì)ES6支持良好。即使您（或您的客戶）不使用最新版本的Web瀏覽器，也可以使用轉(zhuǎn)換器（如Babel），在應(yīng)用程序的構(gòu)建過程中將ES6轉(zhuǎn)換為ES5。這意味著要向前邁出一步，學(xué)習(xí)ES6。

在本文中，我將盡量簡(jiǎn)單地介紹最有用的功能。在本教程之后，您將擁有基本技能，并能夠?qū)⑵鋺?yīng)用于實(shí)際項(xiàng)目中。不要將其視為指南或文件。我的目標(biāo)是鼓勵(lì)你深入挖掘并熟悉ES6。

1. const和let關(guān)鍵字

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

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()

運(yùn)行結(jié)果如下：

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. 數(shù)組輔助方法

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

forEach

對(duì)數(shù)組的每個(gè)元素執(zhí)行傳入的函數(shù)，將數(shù)組元素作為參數(shù)傳遞。

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

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

colors.forEach(print)

運(yùn)行結(jié)果如下：

red 
green 
blue

map

創(chuàng)建一個(gè)包含相同數(shù)量元素的新數(shù)組，但是由傳入的函數(shù)返回元素。它只是將每個(gè)數(shù)組元素轉(zhuǎn)換成別的東西。

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

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

var capitalizedColors = colors.map(capitalize)

console.log(capitalizedColors)

運(yùn)行結(jié)果如下：

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

filter

創(chuàng)建一個(gè)包含原始數(shù)組子集的新數(shù)組。新數(shù)組包含的這些元素通過由傳入的函數(shù)實(shí)現(xiàn)的測(cè)試，該函數(shù)應(yīng)該返回true或false。

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

function lessThan20(val) {
    return val < 20
}

var valuesLessThan20 = values.filter(lessThan20)

console.log(valuesLessThan20)

運(yùn)行結(jié)果如下：

[1,5]

find

找到通過傳入的函數(shù)測(cè)試的第一個(gè)元素，該函數(shù)應(yīng)該返回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)

運(yùn)行結(jié)果如下：

First found teenager: Ann

every

檢查數(shù)組的每個(gè)元素是否通過傳入函數(shù)的測(cè)試，該函數(shù)應(yīng)該返回true或false（每個(gè)函數(shù)都返回true，則結(jié)果為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)

運(yùn)行結(jié)果如下：

Everyone is teenager:  false

some

檢查數(shù)組的任何元素是否通過由提供的函數(shù)實(shí)現(xiàn)的測(cè)試，該函數(shù)應(yīng)該返回true或false。(有一個(gè)函數(shù)返回true，則結(jié)果true。否則結(jié)果為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)

運(yùn)行結(jié)果如下：

There are teenagers: true

reduce

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

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)

運(yùn)行結(jié)果如下：

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

3.箭頭函數(shù)

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

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)

箭頭函數(shù)也可以內(nèi)聯(lián)。它真的簡(jiǎn)化了代碼：

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

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

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

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. 類

哪個(gè)Java開發(fā)人員在切換到JS項(xiàng)目時(shí)不會(huì)錯(cuò)過類？誰不喜歡顯式繼承，像Java語言，而不是為原型繼承編寫魔術(shù)代碼？這引起了一些JS開發(fā)者反對(duì)，因?yàn)樵贓S6中已經(jīng)引入了類。他們不改變繼承的概念。它們只是原型繼承的語法糖。

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"))

運(yùn)行結(jié)果如下：

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.對(duì)象功能增強(qiáng)

對(duì)象功能已被增強(qiáng)。現(xiàn)在我們可以更容易地：

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

定義函數(shù)

定義動(dòng)態(tài)（計(jì)算）屬性

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)

運(yùn)行結(jié)果如下：

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

6. 模板字符串

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

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

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

運(yùn)行結(jié)果如下：

Good morning Jan Kowalski! 
How are you?

請(qǐng)注意，我們可以寫多行文本。

重要提示：使用反引號(hào)代替撇號(hào)來包裝文本。

7. 默認(rèn)函數(shù)參數(shù)

你不喜歡提供所有可能的函數(shù)參數(shù)？使用默認(rèn)值。

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")

運(yùn)行結(jié)果如下：

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

8. rest參數(shù)和擴(kuò)展運(yùn)算符 擴(kuò)展

它可以將數(shù)組或?qū)ο髢?nèi)容提取為單個(gè)元素。

示例 - 制作數(shù)組的淺拷貝：

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

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

運(yùn)行結(jié)果如下：

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

示例 - 合并數(shù)組：

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

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

console.log("Merged colors", mergedColors)

運(yùn)行結(jié)果如下：

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

rest參數(shù)

您要將前幾個(gè)函數(shù)參數(shù)綁定到變量，其他變量作為數(shù)組綁定到單個(gè)變量嗎？現(xiàn)在你可以很容易地做到這一點(diǎn)。

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")

運(yùn)行結(jié)果如下：

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

9. 解構(gòu)賦值 數(shù)組

從數(shù)組中提取所請(qǐng)求的元素并將其分配給變量。

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)

運(yùn)行結(jié)果如下：

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

對(duì)象

從對(duì)象中提取所請(qǐng)求的屬性，并將其分配給與屬性相同名稱的變量。

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

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

printBasicInfo(person)

運(yùn)行結(jié)果如下：

John Smith - teacher

10. Promises

Promises承諾（是的，我知道這聽起來很奇怪），你將會(huì)得到延期或長(zhǎng)期運(yùn)行任務(wù)的未來結(jié)果。承諾有兩個(gè)渠道：第一個(gè)為結(jié)果，第二個(gè)為潛在的錯(cuò)誤。要獲取結(jié)果，您將回調(diào)函數(shù)作為“then”函數(shù)參數(shù)。要處理錯(cuò)誤，您將回調(diào)函數(shù)提供為“catch”函數(shù)參數(shù)。

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))
}

運(yùn)行結(jié)果如下：

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

總結(jié)

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

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

http://exploringjs.com/es6/

翻譯自Top 10 ES6 features by example

關(guān)注我的公眾號(hào)，更多優(yōu)質(zhì)文章定時(shí)推送

GPU云服務(wù)器云服務(wù)器說明了簡(jiǎn)單明了 ES6 es6-系列

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88901.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Ku_Andrew

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

三子棋游戲設(shè)計(jì)及代碼實(shí)現(xiàn)

閱讀 3159·2021-09-28 09:36
70萬法國(guó)人Covid檢測(cè)結(jié)果在線泄露包括個(gè)人敏感信息

閱讀 3695·2021-09-08 09:45
寶塔面板 7.7.0 開心版

閱讀 1811·2021-09-01 10:43
更豐富的網(wǎng)頁多圖層效果：css混合模式

閱讀 3485·2019-08-30 12:44
【每日一包0019】mem

閱讀 3353·2019-08-29 17:25
position:absolute的容器居中

閱讀 1378·2019-08-29 11:03
Canvas繪制出一個(gè)時(shí)鐘

閱讀 1998·2019-08-26 13:36
編譯原理實(shí)戰(zhàn)入門：用 JavaScript 寫一個(gè)簡(jiǎn)單的四則運(yùn)算編譯器（三）模擬執(zhí)行

閱讀 703·2019-08-23 18:24

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

舉例說明了十大ES6功能

相關(guān)文章

Python中的十大圖像處理工具

2017-10-09 前端日?qǐng)?bào)

this

ES6常用知識(shí)點(diǎn)概述

邊緣計(jì)算與其“等風(fēng)來”，不如自己創(chuàng)造“風(fēng)口”

發(fā)表評(píng)論

0條評(píng)論

Ku_Andrew

男|高級(jí)講師

TA的文章

三子棋游戲設(shè)計(jì)及代碼實(shí)現(xiàn)

70萬法國(guó)人Covid檢測(cè)結(jié)果在線泄露包括個(gè)人敏感信息

寶塔面板 7.7.0 開心版

更豐富的網(wǎng)頁多圖層效果：css混合模式

【每日一包0019】mem

position:absolute的容器居中

Canvas繪制出一個(gè)時(shí)鐘

編譯原理實(shí)戰(zhàn)入門：用 JavaScript 寫一個(gè)簡(jiǎn)單的四則運(yùn)算編譯器（三）模擬執(zhí)行

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

舉例說明了十大ES6功能

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！