Résumé des fonctionnalités couramment utilisées de ES6, ES7 et ES8 (exemples de code)

Cet article vous présente un résumé des fonctionnalités couramment utilisées (exemples de code) de ES6, ES7 et ES8. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Nouvelles fonctionnalités communes d'ES6

1. let && const

let 命令也用于变量声明，但是作用域为局部
{
    let a = 10;
    var b = 1;        
}
在函数外部可以获取到b，获取不到a，因此例如for循环计数器就适合使用let。

const用于声明一个常量，设定后值不会再改变
const PI = 3.1415;
PI // 3.1415
PI = 3; //TypeError: Assignment to constant variable.

2.

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 
例如数组：

let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;
这真的让代码看起来更优美，有种python赋值的既视感。 

对象的解构赋值：获取对象的多个属性并且使用一条语句将它们赋给多个变量。

var {
  StyleSheet,
  Text,
  View
} = React;

等同于
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.Text;

3. Fonction flèche

Le nouvel opérateur flèche dans ES6 est utilisé pour simplifier l'écriture des fonctions. Le côté gauche de l'opérateur est. le paramètre et le côté droit sont les opérations spécifiques et les valeurs de retour.

var sum = (num1, num2) => { return num1 + num2; }
//等同于
var sum = function(num1, num2) {
    return num1 + num2;
};
箭头函数还修复了this的指向，使其永远指向词法作用域：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

4. ...L'introduction de l'opérateur

utilisera rarement la fonction d'extension. Grâce à lui, les tableaux peuvent être passés directement dans les fonctions en tant que paramètres :

var people = ['Lily', 'Lemon', 'Terry'];
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
sayHello(...people);//输出：Hello Lily,Lemon,Terry

5. type itérable

Afin d'unifier les types de collections, la norme ES6 introduit un. le nouveau type itérable, Array, Map et Set appartiennent tous au type itérable, et les collections de type itérable peuvent être parcourues à travers le nouveau for... de la boucle.

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    alert(x);
}
for (var x of s) { // 遍历Set
    alert(x);
}
for (var x of m) { // 遍历Map
    alert(x[0] + '=' + x[1]);
}

Map相关操作如下， Set同理：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

6. Class

ES6 propose une méthode d'écriture plus proche des langages traditionnels et introduit le concept de Class comme modèle pour les objets. Les classes peuvent être définies via le mot-clé class, similaire à la plupart des langages traditionnels.

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

Nouvelles fonctionnalités communes d'ES7

1. Array.prototype.includes

在一个数组或者列表中检查是否存在一个值
let arr = ['react', 'angular', 'vue']

// Correct
if (arr.includes('react')) {
  console.log('Can use React')
}
还能在字符串中使用includes:

let str = 'React Quickly'

// Correct
if (str.toLowerCase().includes('react')) {  // true
  console.log('Found "react"')  
}
除了增强了可读性语义化，实际上给开发者返回布尔值，而不是匹配的位置。

includes也可以在NaN(非数字)使用。最后 ，includes第二可选参数fromIndex，这对于优化是有好处的，因为它允许从特定位置开始寻找匹配。
更多例子：

console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)

2.Opérateur d'exponentiation (opération d'exponentiation)

et a = 7 ** 12
let b = 2 ** 7
console.log(a === Math.pow(7,12)) // true
console.log(b === Math.pow(2,7)) // true
开发者还可以操作结果:

let a = 7
a **= 12
let b = 2
b **= 7
console.log(a === Math.pow(7,12)) // true
console.log(b === Math.pow(2,7)) // true

Nouvelles fonctionnalités d'ES8

1.Object.values/Object.entries

ES5 introduit Object Les clés. La méthode renvoie un tableau dont les membres sont les noms de clé de toutes les propriétés traversables (énumérables) de l'objet paramètre lui-même (à l'exclusion des propriétés héritées).
La méthode Object.values ​​​​renvoie un tableau dont les membres sont les valeurs clés de toutes les propriétés traversables (énumérables) de l'objet paramètre lui-même (à l'exclusion des propriétés héritées).
La méthode Object.entries renvoie un tableau dont les membres sont des tableaux clé-valeur de toutes les propriétés traversables (énumérables) de l'objet paramètre lui-même (à l'exclusion des propriétés héritées).

let {keys, values, entries} = Object;  

let obj = { a: 1, b: 2, c: 3 };  

for (let key of keys(obj)) {  
    console.log(key); // 'a', 'b', 'c'
}  

for (let value of values(obj)) {  
    console.log(value); // 1, 2, 3
}  

for (let [key, value] of entries(obj)) {  
    console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

2. Remplissage de chaîne

3. Async/Await

使用Promise
使用Promise写异步代码，会比较麻烦：

axios.get(`/q?query=${query}`)
.then(response => response.data)
.then(data =>
{
this.props.processfetchedData(data);
})
.catch(error => console.log(error));
使用Async/Await
Async/Await使得异步代码看起来像同步代码，这正是它的魔力所在：

async fetchData(query) =>
{
try
{
const response = await axios.get(`/q?query=${query}`);
const data = response.data;
return data;
}
catch (error)
{
console.log(error)
}
}
 
fetchData(query).then(data =>
{
this.props.processfetchedData(data)
})

Async/Await est un nouvelle façon d'écrire du code asynchrone. Les méthodes précédentes étaient des fonctions de rappel et Promise. Par rapport à Promise, il est plus concis et plus pratique pour gérer les erreurs, les instructions conditionnelles et les valeurs intermédiaires

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!