Partagez 8 fonctionnalités utiles qui valent la peine d'être collectées dans ES2019

Cet article présente 8 fonctions très utiles dans ES2019. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

La spécification ES2019 est une petite extension de JavaScript, mais apporte tout de même quelques fonctionnalités intéressantes. Cet article vous présente huit fonctionnalités ES2019 qui peuvent faciliter votre développement.

String.prototype.trimStart() et String.prototype.trimEnd()

---

Parfois, nous devons gérer des espaces supplémentaires lors du traitement des chaînes. ES2020 ajoute deux fonctions : les méthodes .trimStart() et trimEnd() pour vous aider à gérer ces tâches.

Ils vous aident tous à couper ou supprimer des espaces d'une chaîne donnée. trimStart() Supprime tous les espaces au début de la chaîne. trimEnd（） supprimera tous les espaces à la fin de la chaîne. Mais que se passe-t-il si vous souhaitez supprimer les espaces des deux côtés ?

Il y a deux options. La première consiste à utiliser les deux fonctionnalités ES2019 simultanément. La seconde consiste à utiliser une autre méthode de chaîne trim(). Les deux méthodes vous donneront les résultats souhaités. La méthode

// String.prototype.trimStart() 例子:
// 处理不带空格的字符串：
'JavaScript'.trimStart()
// Output:
//'JavaScript'

// 处理以空格开头的字符串：
' JavaScript'.trimStart()
// Output:
//'JavaScript'

// 两边都留有空格的字符串
' JavaScript '.trimStart()
// Output:
//'JavaScript '

// 以空格结尾的字符串
'JavaScript '.trimStart()
// Output:
//'JavaScript '


// String.prototype.trimEnd() 例子:
// 处理不带空格的字符串：
'JavaScript'.trimEnd()
// Output:
//'JavaScript'

// 处理以空格开头的字符串：
' JavaScript'.trimEnd()
// Output:
//' JavaScript'

// 两边都留有空格的字符串
' JavaScript '.trimEnd()
// Output:
//' JavaScript'

// 以空格结尾的字符串
'JavaScript '.trimEnd()
// Output:
//'JavaScript'

Function.prototype.toString()

---

de la fonction toString() existe depuis un certain temps. Ce qu'il fait, c'est vous permettre d'imprimer le code d'une fonction. ES2019 diffère dans la façon dont il gère les commentaires et les caractères spéciaux tels que les espaces.

Dans le passé, la méthode toString() supprimait les commentaires et les espaces. La version imprimée de la fonction peut donc être différente du code original. Cela n’arrivera plus avec ES2019. La valeur renvoyée correspondra à la valeur d'origine, y compris les commentaires et les caractères spéciaux.

// ES2019 之前:
function myFunc/* is this really a good name? */() {
  /* Now, what to do? */
}

myFunc.toString()
// Output:
// "function myFunc() {}"


// ES2019:
function myFunc/* is this really a good name? */() {
  /* Now, what to do? */
}

myFunc.toString()
// Output:
// "function myFunc/* is this really a good name? */() {
//   /* Now, what to do? */
// }"

Array.prototype.flat() et Array.prototype.flatMap()

---

Les tableaux sont l'un des éléments fondamentaux de JavaScript. Ils causent parfois beaucoup de problèmes. Cela est particulièrement vrai lorsque vous devez gérer des tableaux multidimensionnels. Même une tâche apparemment simple, comme la conversion d'un tableau multidimensionnel en une seule dimension, peut s'avérer difficile.

La bonne nouvelle est que deux fonctionnalités d'ES2019 facilitent cela. La première est la méthode flat(). Lorsqu'il est utilisé sur un tableau multidimensionnel, il sera converti en une seule dimension. Par défaut, flat() n'aplatira le tableau que d'un niveau.

Mais la page peut préciser le niveau et le passer en paramètre lors de l'appel. Vous pouvez également utiliser Infinity si vous n'êtes pas sûr du nombre de niveaux dont vous avez besoin.

// 创建一个数组:
const myArray = ['JavaScript', ['C', 'C++', ['Assembly', ['Bytecode']]]]

// 展平一级:
let myFlatArray = myArray.flat(1)

// 输出:
console.log(myFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', [ 'Assembly', [ 'Bytecode' ] ] ]

// 用参数 Infinity 展平:
let myInfiniteFlatArray = myArray.flat(Infinity)

// 输出:
console.log(myInfiniteFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', 'Assembly', 'Bytecode' ]

Array.prototype.flatMap()

En plus de la méthode flat(), il existe également flatMap(). Considérez-le comme une version avancée de flat(). La différence est que la méthode flatMap() combine flat() avec map(). La fonction de rappel peut être appelée lors de l'aplatissement du tableau.

Cela permet à chaque élément du tableau d'origine d'être utilisé pendant le processus d'aplatissement. Ceci est pratique lorsque vous souhaitez modifier le contenu d'un tableau tout en l'aplatissant.

// 创建数组:
const myArray = ['One word', 'Two words', 'Three words']

// 用 map() 将数组中的所有字符串拆分为单词：
// 注意：这将会创建多维数组。
const myMappedWordArray = myArray.map(str => str.split(' '))

console.log(myMappedWordArray)
// Output:
// [ [ 'One', 'word' ], [ 'Two', 'words' ], [ 'Three', 'words' ] ]


// flatMap() 的例子:
const myArray = ['One word', 'Two words', 'Three words']

// 用 map() 将数组中的所有字符串拆分为单词：
// 注意：这将会创建多维数组。
const myFlatWordArray = myArray.flatMap(str => str.split(' '))

console.log(myFlatWordArray)
// Output:
// [ 'One', 'word', 'Two', 'words', 'Three', 'words' ]

Object.fromEntries()

---

Lorsque vous devez convertir un objet en tableau, vous pouvez utiliser entries() pour le compléter. Mais il est difficile de faire l’opération inverse. ES2019 propose fromEntries() pour résoudre facilement ce problème.

La fonction de cette méthode est très simple. Il prend une forme itérable de paires clé-valeur, comme un tableau ou une carte, et la convertit en objet.

// 把数组转换为对象:
// 创建数组:
const myArray = [['name', 'Joe'], ['age', 33], ['favoriteLanguage', 'JavaScript']]
const myObj = Object.fromEntries(myArray)
console.log(myObj)
// Output:
// {
//   name: 'Joe',
//   age: 33,
//   favoriteLanguage: 'JavaScript'
// }


// 把 Map 转换为对象:
// 创建 map:
const myMap = new Map(
  [['name', 'Spike'], ['species', 'dog'], ['age', 3]]
)
const myObj = Object.fromEntries(myMap)
console.log(myObj)
// Output:
// {
//   name: 'Spike',
//   species: 'dog',
//   age: 3
// }

Liaison catch facultative

---

Auparavant, lors de l'utilisation de try ... catch, une liaison devait également être utilisée. Même si l'exception n'est pas utilisée, vous devez la passer en paramètre. Dans ES2019, si vous ne souhaitez pas utiliser l'exception, vous pouvez utiliser un bloc catch sans paramètres.

// ES2019 之前:
try {
  // Do something.
} catch (e) {
    //忽略必需的e参数
       //如果你不想用它，也应该保留。
}

// ES2019:
try {
  // Do something.
} catch {
  // 不需要添加任何参数
}

JSON.stringify() bien formé

---

Dans le passé, lorsque j'utilisais JSON.stringify() sur quelque chose contenant des caractères spécifiques, je le ferais obtenir une chaîne Unicode mal formée. La section d'encodage de U+D800 vers U+DFFF deviendra "�". Ce qui est pire, c'est qu'il n'y a aucun moyen de ramener ces mauvais caractères à leur forme originale.

ES2019 a corrigé la méthode JSON.stringify(). Il est désormais possible de classer ces extraits de code problématiques et de les reconvertir dans leur représentation originale.

Symbol.prototype.description

---

Symbol est un nouveau type de données introduit dans ES2015 (ES6). Ils sont souvent utilisés pour identifier les propriétés d'un objet. ES2019 a ajouté l'attribut description. Cette propriété est en lecture seule et sa valeur ne peut pas être modifiée. Il est utilisé pour renvoyer la description du symbole donné.

Il y a deux choses à garder à l’esprit. Premièrement, les descriptions ne sont pas obligatoires lors de la création de symboles, mais sont facultatives. Ainsi, lorsque vous essayez d'accéder à description, vous risquez d'obtenir autre chose que undefined. Si vous essayez d'accéder à une description de symbole sans description, vous recevrez un message undefined (non défini).

第二点是 description 是对符号本身的描述。它不是符号的标识符。这意味着你不能使用现有的描述（即 description 属性的值）来访问现有的符号。它只是为了更容易识别正在你正在使用的符号。

说明：创建新的符号时，可以通过将一些字符串作为参数传递给 Symbol() 对象来添加描述。如果留空，description 将会是 undefined。

// 创建带有描述的 Symbol：
// 创建 Symbol 并添加描述：
//注意：描述是"My first symbol."
const mySymbol = Symbol('My first symbol.')

// 输出 description 属性的值：
console.log(mySymbol.description)
// Output:
// 'My first symbol.'


// 读取不存在的 Symbol：
console.log(Symbol().description)
// Output:
// undefined


// 读取定义为空字符串的描述：
console.log(Symbol('').description)
// Output:
// ''

Symbol.prototype.toString()

---

toString() 方法提供了另一种读取符号描述的方式。它的缺点是在返回的字符串中还包含 Symbol()。另一个区别是 toString() 方法永远不会返回不存在的undefined 描述。

使用 description 的另一个原因是：如果你有一个没有说明的 Symbol 并用了 toString() 方法，仍将得到 Symbol() 部分。如果描述为空字符串，也将获得此信息。这样就基本上不可能区分不存在的描述和用作描述的空字符串。

// 创建带有描述的 Symbol：
const mySymbol = Symbol('REAMDE.')

// 输出 description 属性的值：
console.log(mySymbol.toString())
// Output:
// 'Symbol(REAMDE.)'

// 读取不存在的 Symbol：
console.log(Symbol().toString())
// Output:
// 'Symbol()'


// 读取定义为空字符串的描述：
console.log(Symbol('').toString())
// Output:
// 'Symbol()'

更多编程相关知识，可访问：编程入门！！

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!