5 nouvelles fonctionnalités de ES10

Cette année, ECMAScript 2019 (ES2019 en abrégé) sortira. Les nouvelles fonctionnalités incluent Object.fromEntries(), trimStart(), trimEnd(), flat(), flatMap(), l'attribut de description des objets symboles, la liaison catch facultative, etc.

1. Object.fromEntries()

En JavaScript, convertir des données d'un format à un autre Très courant. Pour faciliter la conversion d'objets en tableaux, ES2017 a introduit la méthode Object.entrie(). Cette méthode prend un objet comme paramètre et renvoie un tableau des propres paires de propriétés énumérables de chaîne-clé de l'objet sous la forme [clé, valeur]. Par exemple :

const obj = {one: 1, two: 2, three: 3};

console.log(Object.entries(obj));    
// => [["one", 1], ["two", 2], ["three", 3]]

Mais que se passe-t-il si nous voulons faire l'inverse et convertir la liste de paires clé-valeur en objet ? Certains langages de programmation, comme Python, fournissent la fonction dict() à cet effet. Il existe également la fonction _.fromPairs dans Underscore.js et Lodash.

ES2019 a introduit la méthode Object.fromEntries() pour apporter des fonctionnalités similaires à JavaScript. Cette méthode statique vous permet de convertir facilement une liste de paires clé-valeur en un objet :

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

Comme vous le souhaitez. peut voir, Object.fromEntries() fait exactement le contraire de Object.entries(). Alors qu'il était auparavant possible d'implémenter la même fonctionnalité d'Object.fromEntries(), la façon dont elle était implémentée était quelque peu compliquée :

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const Array.from(myArray).reduce((acc, [key, val]) 
=> Object.assign(acc, {[key]: val}), {})

console.log(obj);    // => {one: 1, two: 2, three: 3}

N'oubliez pas que l'argument passé à Object.fromEntries() peut être n'importe quel objet qui implémente le protocole itérable, tant qu'il renvoie un objet de type tableau à deux éléments.

Par exemple, dans le code suivant, Object.fromEntries() prend un objet Map comme paramètre et crée un nouvel objet dont les clés et les valeurs correspondantes sont données par les paires dans la Map :

const map = new Map();
map.set('one', 1);
map.set('two', 2);

const obj = Object.fromEntries(map);

console.log(obj);    // => {one: 1, two: 2}

La méthode Object.fromEntries() est également très utile pour convertir des objets, considérez le code suivant :

const obj = {a: 4, b: 9, c: 16};

// 将对象转换为数组
const arr = Object.entries(obj);

// 计算数字的平方根
const map = arr.map(([key, val]) => [key, Math.sqrt(val)]);

// 将数组转换回对象
const obj2 = Object.fromEntries(map);

console.log(obj2);  // => {a: 2, b: 3, c: 4}

Le code ci-dessus convertit la valeur de l'objet en sa racine carrée. Pour ce faire, il convertit d'abord l'objet en tableau, puis utilise la méthode map() pour obtenir la racine carrée des valeurs du tableau. Le résultat est un tableau qui peut être reconverti en objet.

Un autre cas d'utilisation d'Object.fromEntries() consiste à gérer la chaîne de requête de l'URL, comme le montre cet exemple

const paramsString = 'param1=foo&param2=baz';
const searchParams = new URLSearchParams(paramsString);

Object.fromEntries(searchParams);    // => {param1: "foo", param2: "baz"}

Dans ce code, la chaîne de requête sera transmise à URLSearchParams( ) Constructeur. La valeur de retour (c'est-à-dire l'instance de l'objet URLSearchParams) est ensuite transmise à la méthode Object.fromEntries() et le résultat est un objet contenant chaque paramètre en tant que propriété. La méthode

Object.fromEntries() est actuellement une proposition de phase 4, ce qui signifie qu'elle est prête à être incluse dans la norme ES2019.

2. trimStart() et trimEnd()

Les méthodes trimStart() et trimEnd() sont implémentées de la même manière que trimLeft() et trimRight(). Ces méthodes sont actuellement en phase 4 et seront ajoutées à la spécification pour s'aligner sur padStart() et padEnd(), jetez un œil à quelques exemples :

const str = "   string   ";

// es2019
console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

// 相同结果
console.log(str.trimLeft());     // => "string   "
console.log(str.trimRight());    // => "   string"

Pour la compatibilité web, trimLeft() et trimRight( ) resteront comme alias pour trimStart() et trimEnd().

3. flat() et flatMap()

La méthode flat() peut aplatir un tableau multidimensionnel en un tableau unidimensionnel

const arr = ['a', 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

Auparavant, nous utilisions souvent réduire() ou concat() pour aplatir les tableaux multidimensionnels :

const arr = ['a', 'b', ['c', 'd']];
const flattend = [].concat.apply([], arr);

// or
// const flattened =  [].concat(...arr);

console.log(flattened);    // => ["a", "b", "c", "d"]

Notez que s'il y a des valeurs nulles dans le tableau fourni, elles seront supprimées :

const arr = ['a', , , 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

flat() Accepte également un paramètre facultatif qui spécifie le nombre de niveaux auxquels le tableau imbriqué doit être aplati. Si aucun argument n'est fourni, la valeur par défaut de 1 sera utilisée : la méthode

const arr = [10, [20, [30]]];

console.log(arr.flat());     // => [10, 20, [30]]
console.log(arr.flat(1));    // => [10, 20, [30]]
console.log(arr.flat(2));    // => [10, 20, 30]

flatMap() combine map() et flat() en une seule méthode. Il crée d'abord un nouveau tableau en utilisant la valeur de retour de la fonction fournie, puis concatène tous les éléments du sous-tableau de ce tableau. Voici un exemple :

const arr = [4.25, 19.99, 25.5];

console.log(arr.map(value => [Math.round(value)]));    
// => [[4], [20], [26]]

console.log(arr.flatMap(value => [Math.round(value)]));    
// => [4, 20, 26]

Le tableau sera aplati à un niveau de profondeur de 1. Si vous souhaitez supprimer des éléments du résultat, renvoyez simplement un tableau vide :

const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]];

// do not include items bigger than 9
arr.flatMap(value => {
  if (value >= 10) {
    return [];
  } else {
    return Math.round(value);
  }
});  

// returns:
// => [7, 8, 9]

sauf pour l'actuel élément en cours de traitement De plus, la fonction de rappel recevra l'index de l'élément et une référence au tableau lui-même. Les méthodes flat() et flatMap() sont actuellement au stade 4.

4. Attribut Description de l'objet Symbole

Lors de la création d'un symbole, vous pouvez y ajouter une description (description) à des fins de débogage. Il est parfois utile d'avoir un accès direct à la description dans le code.

ES2019 ajoute une description d'attribut en lecture seule à l'objet Symbol, qui renvoie une chaîne contenant la description du symbole.

let sym = Symbol('foo');
console.log(sym.description);    // => foo

sym = Symbol();
console.log(sym.description);    // => undefined

// create a global symbol
sym = Symbol.for('bar');
console.log(sym.description);    // => bar

5. Catch facultatif

Le catch dans l'instruction try catch est parfois inutile Considérez le code suivant :

try {
  // 使用浏览器可能尚未实现的功能
} catch (unused) {
  // 这里回调函数中已经帮我们处理好的错误
}

Ce code Les informations. dans le rappel catch n'est pas utile. Mais il est écrit de cette façon pour éviter les erreurs SyntaxError. ES2019 peut omettre les crochets autour de catch :

try {
  // ...
} catch {
  // ....
}

Aussi : la méthode String.prototype.matchAll

matchAll() d'ES2020 est une proposition de phase 4 d'ES2020, qui renvoie toutes les correspondances pour les expressions régulières (objet Iterator y compris la capture de groupes).

Pour être cohérent avec la méthode match(), TC39 a choisi "matchAll" au lieu d'autres noms suggérés tels que "matches" ou "scan" de Ruby. Prenons un exemple simple :

const re = /(Dr\. )\w+/g;
const str = 'Dr. Smith and Dr. Anderson';
const matches = str.matchAll(re);

for (const match of matches) {
  console.log(match);
}

// logs:
// => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]

Le groupe de capture dans cette expression régulière correspond aux caractères "Dr" suivis d'un point et d'un espace. w+ correspond à n’importe quel caractère de mot une ou plusieurs fois. Et l'indicateur g demande au moteur de rechercher des modèles dans toute la chaîne.

Auparavant, il fallait utiliser la méthode exec() en boucle pour arriver au même résultat, ce qui n'était pas très efficace :

const re = /(Dr\.) \w+/g;
const str = 'Dr. Smith and Dr. Anderson';
let matches;

while ((matches = re.exec(str)) !== null) {
  console.log(matches);
}

// logs:
// => ["Dr. Smith", "Dr.", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr.", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]

重要的是要注意尽管match() 方法可以与全局标志g一起使用来访问所有匹配，但它不提供匹配的捕获组或索引位置。 比较以下代码：

const re = /page (\d+)/g;
const str = 'page 2 and page 10';

console.log(str.match(re));    
// => ["page 2", "page 10"]

console.log(...str.matchAll(re)); 
// => ["page 2", "2", index: 0, input: "page 2 and page 10", groups: undefined] 
// => ["page 10", "10", index: 11, input: "page 2 and page 10", groups: undefined]

总结

在这篇文章中，我们仔细研究了 ES2019 中引入的几个关键特性，包括Object.fromEntries()，trimStart(), trimEnd(), flat(), flatMap()，symbol 对象的description 属性以及可选的catch 。

更多相关知识请关注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!