Un aperçu des cinq fonctionnalités les plus importantes de JavaScript ES6

JavaScript ES6 ajoute une multitude de nouvelles fonctionnalités linguistiques, certaines plus révolutionnaires et plus largement disponibles que d'autres. Des fonctionnalités telles que les classes ES6, bien que nouvelles, ne sont en réalité qu'un sucre syntaxique s'ajoutant aux méthodes existantes de création de classes en JavaScript. Les fonctions comme les générateurs, bien que très puissantes, sont réservées à des tâches ciblées.

En travaillant sur différents projets liés à JavaScript au cours des 12 derniers mois, j'ai trouvé 5 fonctionnalités ES6 qui sont indispensables car elles simplifient vraiment la façon dont les tâches courantes en JavaScript sont effectuées. Votre top 5 est peut-être différent du mien, et si c'est le cas, j'espère que vous le partagerez dans la section commentaires à la fin.

Commençons !

1. Fonctions fléchées
2. Promesses
3. Fonctions asynchrones
4. Déstructuration
5. Paramètres par défaut et de repos

1) Fonctions fléchées JavaScript

L'une de mes nouvelles fonctionnalités préférées dans ES6 JavaScript n'est pas une fonctionnalité complètement nouvelle, mais une nouvelle syntaxe qui me fait sourire à chaque fois que je l'utilise. Je parle des fonctions fléchées, qui offrent un moyen extrêmement élégant et concis de définir des fonctions anonymes.

En bref, la fonction flèche perd le mot-clé function, puis utilise une flèche => pour séparer la partie paramètre et le corps de la fonction d'une fonction anonyme :

(x, y) => x * y;

C'est tout à fait Exactement équivalent à :

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

ou :

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

est exactement équivalent à :

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

Les fonctions fléchées éliminent également une source d'erreur clé lors de l'utilisation de fonctions anonymes traditionnelles, à savoir la valeur de l'objet this dans la fonction. En utilisant les fonctions fléchées, this est basé sur la liaison lexicale, ce qui est juste une façon sophistiquée de dire que sa valeur est liée à la portée parent et ne change jamais. Si une fonction flèche est définie dans un objet personnalisé countup, la valeur this pointera sans aucun doute vers countup. Par exemple :

var countup = {
    counter: 15,

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

countup.start();

Par rapport aux fonctions anonymes traditionnelles, où la valeur de this change dépend du contexte dans lequel il est défini. Lorsque vous essayez de référencer this.counter dans l'exemple ci-dessus, le résultat sera renvoyé undefined, un comportement qui peut dérouter de nombreuses personnes qui ne sont pas familières avec les complexités de la liaison dynamique. Grâce aux fonctions fléchées, la valeur de this est toujours prévisible et facile à déduire.

Pour une explication détaillée des fonctions fléchées, veuillez consulter « Présentation des fonctions fléchées JavaScript ».

2) Promesses JavaScript

Les promesses JavaScript ES6 font que le traitement des tâches asynchrones devient Linéaire, c'est une tâche dans la plupart des applications Web modernes. Au lieu de s'appuyer sur des fonctions de rappel - popularisées par les frameworks JavaScript tels que jQuery. Les promesses JavaScript utilisent un mécanisme central et intuitif pour suivre et répondre aux événements asynchrones. Non seulement cela facilite le débogage du code asynchrone, mais cela rend également son écriture une joie.

Toutes les promesses JavaScript commencent et se terminent via le constructeur Promise() :

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

utilise les méthodes resolve() et reject() en interne. Lorsqu'une promesse est terminée ou rejetée, nous pouvons l'envoyer. signaux à un objet Promise séparément. Les méthodes then() et catch() peuvent ensuite être appelées pour gérer le travail une fois la promesse terminée ou rejetée.

J'utilise la variante suivante de Promise injectée dans la fonction XMLHttpRequest pour récupérer un à un le contenu des fichiers externes :

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

Pour maîtriser les points clés des promesses JavaScript, comme le chaînage de promesses et l'exécution parallèle Promesse, veuillez lire "Guide du débutant sur les promesses".

3) Fonctions asynchrones JavaScript

En plus de JavaScript Promise, les fonctions asynchrones réécrivent davantage la structure de code asynchrone traditionnelle pour la rendre plus lisible. Chaque fois que je montre du code doté de capacités de programmation asynchrone à des clients, la première réaction est toujours la surprise, suivie de la curiosité de comprendre comment cela fonctionne.

Une fonction asynchrone se compose de deux parties :

1) Une fonction régulière préfixée par async

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

2) Au sein d'un fonction asynchrone (fonction Async), utilisez le mot-clé await pour appeler la fonction de fonctionnement asynchrone

Un exemple vaut mille mots. Ce qui suit est une promesse réécrite basée sur l'exemple ci-dessus pour utiliser des Fonctions asynchrones à la place :

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

Lorsque l'exemple ci-dessus est exécuté, il affichera "test.txt", "test2.txt », « test3 .txt » et enfin « Terminé ».

Comme vous pouvez le voir, dans la fonction asynchrone, nous traitons la fonction asynchrone getasync() comme un appel de fonction synchrone - il n'y a pas de méthode then() ou de fonction de rappel pour notifier l'étape suivante. Chaque fois que le mot-clé await est rencontré, l'exécution est suspendue jusqu'à ce que getasync() soit résolu avant de passer à la ligne suivante dans la fonction asynchrone. Le résultat est le même que celui purement basé sur la promesse, en utilisant un tas de méthodes then.

要掌握异步函数，包括如何 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基础教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!