Ein Blick auf die fünf wichtigsten Funktionen von JavaScript ES6

JavaScript ES6 fügt eine Vielzahl neuer Sprachfunktionen hinzu, von denen einige bahnbrechender und allgemeiner verfügbar sind als andere. Funktionen wie ES6-Klassen sind zwar neuartig, aber eigentlich nur syntaktischer Zucker zusätzlich zu den bestehenden Methoden zum Erstellen von Klassen in JavaScript. Funktionen wie Generatoren sind zwar sehr leistungsfähig, aber für gezielte Aufgaben reserviert.

Durch die Arbeit an verschiedenen JavaScript-bezogenen Projekten in den letzten 12 Monaten habe ich festgestellt, dass fünf ES6-Funktionen unverzichtbar sind, weil sie die Art und Weise, wie gängige JavaScript-Aufgaben erledigt werden, wirklich vereinfachen. Ihre Top 5 unterscheiden sich möglicherweise von meinen. Wenn ja, hoffe ich, dass Sie sie am Ende im Kommentarbereich teilen.

Lass uns anfangen!

1. Pfeilfunktionen
2. Versprechen
3. Asynchrone Funktionen
4. Destrukturierung
5. Standard- und Restparameter

1) JavaScript-Pfeilfunktionen

Eine meiner liebsten neuen Funktionen in ES6 JavaScript ist keine völlig neue Funktion, sondern eine neue Syntax, die mich jedes Mal zum Lächeln bringt, wenn ich sie verwende. Ich spreche von Pfeilfunktionen, die eine äußerst elegante und prägnante Möglichkeit bieten, anonyme Funktionen zu definieren.

Kurz gesagt, die Pfeilfunktion verliert das Schlüsselwort function und verwendet dann einen Pfeil =>, um den Parameterteil und den Funktionskörper einer anonymen Funktion zu trennen:

(x, y) => x * y;

Das ist ziemlich Genau äquivalent zu:

function(x, y){
    return x * y;
}

oder:

(x, y) => {
    var factor = 5;
    var growth = (x-y) * factor;
}

Entspricht genau:

function(x, y){
    var factor = 5;
    var growth = (x-y) * factor;
}

Pfeilfunktionen beseitigen auch eine wichtige Fehlerquelle bei der Verwendung herkömmlicher anonymer Funktionen, nämlich den Wert des this-Objekts innerhalb der Funktion. Mithilfe von Pfeilfunktionen basiert this auf lexikalischer Bindung, was nur eine schicke Art ist auszudrücken, dass sein Wert an den übergeordneten Bereich gebunden ist und sich nie ändert. Wenn eine Pfeilfunktion in einem benutzerdefinierten Objekt countup definiert ist, zeigt der Wert this zweifellos auf countup. Zum Beispiel:

var countup = {
    counter: 15,

    start:function(){
        window.addEventListener('click', () => {
            alert(this.counter) // correctly alerts 15 due to lexical binding of this
        })
    }
};

countup.start();

Im Vergleich zu herkömmlichen anonymen Funktionen, bei denen sich der Wert von this vom Kontext abhängt, in dem er definiert wird. Wenn Sie im obigen Beispiel versuchen, auf this.counter zu verweisen, wird das Ergebnis undefined zurückgegeben, ein Verhalten, das viele Menschen verwirren kann, die mit der Komplexität der dynamischen Bindung nicht vertraut sind. Mithilfe von Pfeilfunktionen ist der Wert von this immer vorhersehbar und leicht abzuleiten.

Eine ausführliche Erläuterung der Pfeilfunktionen finden Sie unter „Überblick über JavaScript-Pfeilfunktionen“.

2) JavaScript-Promises

JavaScript ES6 Promises ermöglicht die Verarbeitung asynchroner Aufgaben Linear, das ist eine Aufgabe in den meisten modernen Webanwendungen. Anstatt sich auf Callback-Funktionen zu verlassen – populär gemacht durch JavaScript-Frameworks wie jQuery. JavaScript-Versprechungen nutzen einen zentralen, intuitiven Mechanismus zum Verfolgen und Reagieren auf asynchrone Ereignisse. Dies erleichtert nicht nur das Debuggen von asynchronem Code, sondern macht auch das Schreiben zum Vergnügen.

Alle JavaScript-Promises beginnen und enden mit dem Promise()-Konstruktor:

const mypromise = new Promise(function(resolve, reject){
 // 在这编写异步代码
 // 调用 resolve() 来表示任务成功完成
 // 调用 reject() 来表示任务失败
})

verwendet intern die Methoden resolve() und reject(). Wenn ein Promise abgeschlossen oder abgelehnt wird, können wir es senden Signale separat an ein Promise-Objekt senden. Die Methoden then() und catch() können dann aufgerufen werden, um die Arbeit zu erledigen, nachdem das Versprechen abgeschlossen oder abgelehnt wurde.

Ich verwende die folgende Promise-Variante, die in die XMLHttpRequest-Funktion eingefügt wird, um externe Dateiinhalte einzeln abzurufen:

function getasync(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.onload = () => resolve(xhr.responseText)
        xhr.onerror = () => reject(xhr.statusText)
        xhr.send()
    })
}

getasync('test.txt').then((msg) => {
    console.log(msg) // echos contents of text.txt
    return getasync('test2.txt')
}).then((msg) => {
    console.log(msg) // echos contents of text2.txt
    return getasync('test3.txt')
}).then((msg) => {
    console.log(msg) // echos contents of text3.txt
})

Um die wichtigsten Punkte von JavaScript-Promises zu beherrschen, wie z. B. Promise-Verkettung und parallele Ausführung Promise, bitte lesen Sie „Anfängerleitfaden für Promises“.

3) Asynchrone JavaScript-Funktionen

Zusätzlich zu JavaScript Promise schreiben asynchrone Funktionen die traditionelle asynchrone Codestruktur weiter um, um sie besser lesbar zu machen. Immer wenn ich Kunden Code mit asynchronen Programmierfunktionen zeige, ist die erste Reaktion immer Überraschung, gefolgt von Neugier, zu verstehen, wie er funktioniert.

Eine asynchrone Funktion besteht aus zwei Teilen:

1) Eine reguläre Funktion mit dem Präfix async

async function fetchdata(url){
    // Do something
    // Always returns a promise
}

2) Innerhalb einer asynchrone Funktion (Async-Funktion), verwenden Sie das Schlüsselwort await, um die asynchrone Betriebsfunktion aufzurufen

Ein Beispiel sagt mehr als tausend Worte. Das Folgende ist ein Promise, das basierend auf dem obigen Beispiel umgeschrieben wurde, um stattdessen Async-Funktionen zu verwenden:

function getasync(url) { // same as original function
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.onload = () => resolve(xhr.responseText)
        xhr.onerror = () => reject(xhr.statusText)
        xhr.send()
    })
}

async function fetchdata(){ // main Async function
    var text1 = await getasync('test.txt')
    console.log(text1)
    var text2 = await getasync('test2.txt')
    console.log(text2)
    var text3 = await getasync('test3.txt')
    console.log(text3)
    return "Finished"
}

fetchdata().then((msg) =>{
    console.log(msg) // logs "finished"
})

Wenn das obige Beispiel ausgeführt wird, werden „test.txt“, „test2.txt“ ausgegeben ", "test3 .txt" und schließlich "Fertig".

Wie Sie sehen können, behandeln wir in der asynchronen Funktion die asynchrone Funktion getasync() als synchronen Funktionsaufruf – es gibt keine then()-Methode oder Rückruffunktion, um den nächsten Schritt zu benachrichtigen. Immer wenn das Schlüsselwort await angetroffen wird, wird die Ausführung angehalten, bis getasync() aufgelöst ist, bevor zur nächsten Zeile in der asynchronen Funktion übergegangen wird. Das Ergebnis ist das gleiche wie bei einer rein Promise-basierten Methode, bei der eine Reihe von then-Methoden verwendet werden.

要掌握异步函数，包括如何 await 并行执行函数，请阅读 “Introduction to JavaScript Async Functions- Promises simplified”

4) JavaScript 解构

除了箭头函数，这是我每天使用最多的 ES6 功能。ES6 解构并非一个新功能，而是一个新的赋值语法，可以让您快速解压缩对象属性和数组中的值，并将它们分配给各个变量。

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name, hobby} = profile // destructure profile object
console.log(name) // "George"
console.log(hobby) // "Tennis"

这里我用解构快速提取 profile 对象的 name 和 hobby 属性 。

使用别名，你可以使用与你正在提取值的对象属性不同的变量名：

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name:n, hobby:h} = profile // destructure profile object
console.log(n) // "George"
console.log(h) // "Tennis"

嵌套对象解构

解构也可以与嵌套对象一起工作，我一直使用它来快速解开来自复杂的JSON请求的值：

var jsondata = {
    title: 'Top 5 JavaScript ES6 Features',
    Details: {
        date: {
            created: '2017/09/19',
            modified: '2017/09/20',
        },
        Category: 'JavaScript',
    },
    url: '/top-5-es6-features/'
};

var {title, Details: {date: {created, modified}}} = jsondata
console.log(title) // 'Top 5 JavaScript ES6 Features'
console.log(created) // '2017/09/19'
console.log(modified) // '2017/09/20'

解构数组

数组的解构与在对象上的工作方式类似，除了左边的花括号使用方括号代替：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a, b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Dennis"

你可以跳过某些数组元素，通过使用逗号（，）：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a,,b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Sandy"

对我而言，解构消除了传统方式提取和分配对象属性和数组值的所有摩擦。要充分掌握ES6解构的复杂性和潜力，请阅读”Getting to Grips with ES6: Destructuring“.

5) 默认和剩余参数（Default and Rest Parameters）

最后，我最想提出的ES6的两个特性是处理函数参数。几乎我们在JavaScript中创建的每个函数都接受用户数据，所以这两个特性在一个月中不止一次地派上用场。

默认参数（Default Parameters）

我们都使用过一下模式来创建具有默认值的参数：

function getarea(w,h){
  var w = w || 10
  var h = h || 15
  return w * h
}

有了ES6对默认参数的支持，显式定义的参数值的日子已经结束：

function getarea(w=10, h=15){
  return w * h
}
getarea(5) // returns 75

关于 ES6 默认参数的更多详情 在这.

剩余参数（Rest Parameters）

ES6中的 Rest Parameters 使得将函数参数转换成数组的操作变得简单。

function addit(...theNumbers){
  // get the sum of the array elements
    return theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0) 
}

addit(1,2,3,4) // returns 10

通过在命名参数前添加3个点 ...，在该位置和之后输入到函数中的参数将自动转换为数组。

没有 Rest Parameters, 我们不得不做一些复杂的操作比如 手动将参数转换为数组 ：

function addit(theNumbers){
    // force arguments object into array
    var numArray = Array.prototype.slice.call(arguments) 
    return numArray.reduce((prevnum, curnum) => prevnum + curnum, 0)
}

addit(1,2,3,4) // returns 10

Rest parameters 只能应用于函数的参数的一个子集，就像下面这样，它只会将参数从第二个开始转换为数组：

function f1(date, ...lucknumbers){
    return 'The Lucky Numbers for ' + date + ' are: ' + lucknumbers.join(', ')
}

alert( f1('2017/09/29', 3, 32, 43, 52) ) // alerts "The Lucky Numbers for 2017/09/29 are 3,32,43,52"

对于 ES6 中 Rest Parameters 完整规范，看这里.

结论

你同意我所说的 ES6 特性的前五名吗？哪个是你最常用的，请在评论区和大家分享。

推荐教程：《javascript基础教程》

Das obige ist der detaillierte Inhalt vonEin Blick auf die fünf wichtigsten Funktionen von JavaScript ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!