Teilen Sie 8 nützliche Funktionen, die es wert sind, in ES2019 gesammelt zu werden

Dieser Artikel stellt 8 sehr nützliche Funktionen in ES2019 vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Die ES2019-Spezifikation ist eine kleine Erweiterung von JavaScript, bringt aber dennoch einige interessante Funktionen mit. Dieser Artikel zeigt Ihnen acht ES2019-Funktionen, die Ihre Entwicklung erleichtern können.

String.prototype.trimStart() und String.prototype.trimEnd()

---

Manchmal müssen wir bei der Verarbeitung von Zeichenfolgen mit zusätzlichen Leerzeichen umgehen. ES2020 fügt zwei Funktionen hinzu: die Methoden .trimStart() und trimEnd(), um Sie bei der Bewältigung dieser Aufgaben zu unterstützen.
.trimStart() 和 trimEnd() 方法可以帮你处理这些琐事。

它们都可以帮助你修剪或删除给定字符串中的空格。 trimStart() 删除字符串开头的所有空格。trimEnd（）将删除字符串末尾的所有空格。不过要是想去除两边的空格呢？

有两个选择。第一种是同时使用这两个 ES2019 功能。第二个是使用另一个字符串方法 trim()。两种方式都能给你想要的结果。

// 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()

---

函数的 toString()  方法已经存在了一段时间。它的作用是使你可以打印函数的代码。 ES2019 的不同之处在于它处理注释和特殊字符（例如空格）的方式。

过去，toString() 方法删除了注释和空格。所以该函数的打印版本可能看起来与原始代码不一样。 ES2019 的不会再发生这种情况。它返回的值将会与原始值匹配，包括注释和特殊字符。

// 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() 和 Array.prototype.flatMap()

---

数组是 JavaScript 的基本组成部分之一。它们有时会引起很多问题。当你必须要处理多维数组时尤其如此。甚至将多维数组转换为一维这样看似简单的任务也可能很困难。

好消息是，ES2019 的两个功能使这种操作变得更容易。第一个是 flat() 方法。在多维数组上使用时，它将转换为一维。默认情况下，flat()只会将数组展平一级。

但是页可以指定级数，并在调用时作为参数传递。如果不确定需要多少级，也可以使用 Infinity。

// 创建一个数组:
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()

除了 flat() 方法之外，还有 flatMap()。可以把它看作是 flat() 的高级版本。区别在于 flatMap() 方法把 flat() 与 map() 结合了起来。在展平数组时，可以调用回调函数。

这样就可以在展平过程中使用原始数组中的每个元素。当在对数组进行展平操作的同时又要修改内容时很方便。

// 创建数组:
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()

---

当需要把某个对象转换为数组时，可以用 entries() 来完成。但是想要反向操作的话就困难了。ES2019 提供了 fromEntries() 来轻松解决这个问题。

这个方法的作用很简单。它需要键值对的可迭代形式，例如数组或 Map，然后将其转换为对象。

// 把数组转换为对象:
// 创建数组:
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
// }

可选的 catch 绑定

---

以前使用 try ... catch 时，还必须使用绑定。即使没有使用该异常，你也必须将其作为参数传递。 在 ES2019 种，如果不想使用该异常，则可以使用不带参数的 catch 块。

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

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

格式正确的 JSON.stringify()

---

过去，当对包含特定字符的东西使用 JSON.stringify() 时，会得到格式不正确的 Unicode 字符串。从 U+D800到 U+DFFF 的编码段会变成 “�”。更糟的是没办法把这些错误的字符变回原样。

ES2019 修复了 JSON.stringify() 方法。现在能够对那些有问题的代码段进行分类，并且可以将它们转换回其原始表示形式。

Symbol.prototype.description

---

符号是在 ES2015（ES6）中引入的新数据类型。它们通常用于标识对象属性。 ES2019 增加了 description 属性。这个属性是只读的，无法更改它的值。它用来返回给定符号的描述。

要牢记两点。首先，创建符号时描述不是必须的，而是可选的。所以当你尝试访问 description 时，可能会得到除 undefined 之外的任何信息。如果你尝试访问不带描述的符号描述，则会得到 undefined

Sie alle können Ihnen dabei helfen, Leerzeichen in einer bestimmten Zeichenfolge zu kürzen oder zu entfernen. trimStart() Entfernt alle Leerzeichen am Anfang einer Zeichenfolge. trimEnd() entfernt alle Leerzeichen am Ende der Zeichenfolge. Was aber, wenn Sie die Leerzeichen auf beiden Seiten entfernen möchten? 🎜🎜Es gibt zwei Möglichkeiten. Die erste besteht darin, beide ES2019-Funktionen gleichzeitig zu nutzen. Die zweite besteht darin, eine andere String-Methode trim() zu verwenden. Mit beiden Methoden erhalten Sie die gewünschten Ergebnisse. 🎜

// 创建带有描述的 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:
// ''

🎜🎜Function.prototype.toString()🎜🎜🎜🎜Die Funktionsmethode toString() gibt es schon seit einiger Zeit. Damit können Sie den Code der Funktion ausdrucken. ES2019 unterscheidet sich in der Art und Weise, wie es mit Kommentaren und Sonderzeichen wie Leerzeichen umgeht.
🎜🎜In der Vergangenheit entfernte die Methode toString() Kommentare und Leerzeichen. Daher kann die gedruckte Version der Funktion anders aussehen als der Originalcode. Dies wird mit ES2019 nicht mehr passieren. Der zurückgegebene Wert stimmt mit dem ursprünglichen Wert überein, einschließlich Kommentaren und Sonderzeichen. 🎜

// 创建带有描述的 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()'

🎜🎜Array.prototype.flat() und Array.prototype.flatMap()🎜🎜🎜🎜Arrays sind einer der Grundbausteine ​​von JavaScript. Sie verursachen manchmal viele Probleme. Dies gilt insbesondere dann, wenn Sie mit mehrdimensionalen Arrays arbeiten müssen. Selbst eine scheinbar einfache Aufgabe wie die Konvertierung eines mehrdimensionalen Arrays in eine Dimension kann schwierig sein.
🎜🎜Die gute Nachricht ist, dass zwei Funktionen von ES2019 dies einfacher machen. Die erste ist die Methode flat(). Bei Verwendung in einem mehrdimensionalen Array wird es in eine Dimension konvertiert. Standardmäßig reduziert flat() das Array nur um eine Ebene. 🎜🎜Aber die Seite kann den Level angeben und ihn beim Aufruf als Parameter übergeben. Sie können auch Infinity verwenden, wenn Sie nicht sicher sind, wie viele Ebenen Sie benötigen. 🎜rrreee

🎜Array.prototype.flatMap()🎜

🎜Zusätzlich zur flat()-Methode gibt es auch flatMap(). Betrachten Sie es als eine erweiterte Version von flat(). Der Unterschied besteht darin, dass die Methode flatMap() flat() und map() kombiniert. Die Callback-Funktion kann beim Reduzieren des Arrays aufgerufen werden. 🎜🎜Auf diese Weise kann jedes Element im ursprünglichen Array während des Abflachungsprozesses verwendet werden. Dies ist praktisch, wenn Sie den Inhalt eines Arrays ändern und es gleichzeitig reduzieren möchten. 🎜rrreee🎜Object.fromEntries()🎜🎜🎜Wenn Sie ein Objekt in ein Array konvertieren müssen, können Sie es mit entries() vervollständigen. Es ist jedoch schwierig, den umgekehrten Vorgang durchzuführen. ES2019 bietet fromEntries(), um dieses Problem einfach zu lösen.
🎜🎜Die Funktion dieser Methode ist sehr einfach. Es nimmt eine iterierbare Form von Schlüssel-Wert-Paaren an, beispielsweise ein Array oder eine Map, und wandelt es in ein Objekt um. 🎜rrreee🎜🎜Optionale Catch-Bindung🎜🎜🎜🎜Zuvor waren bei der Verwendung von try ... Catch auch Bindungen erforderlich. Auch wenn die Ausnahme nicht verwendet wird, müssen Sie sie als Parameter übergeben. Wenn Sie in ES2019 die Ausnahme nicht verwenden möchten, können Sie einen Catch-Block ohne Parameter verwenden.
🎜rrreee🎜🎜Gut geformtes JSON.stringify()🎜🎜🎜🎜Wenn ich in der Vergangenheit JSON.stringify() für etwas verwendete, das bestimmte Zeichen enthielt, bekam ich ein fehlerhaftes Format Unicode-Zeichenfolge. Der Kodierungsabschnitt von U+D800 bis U+DFFF wird zu „�“. Was noch schlimmer ist, ist, dass es keine Möglichkeit gibt, diese falschen Zeichen wieder in ihre ursprüngliche Form zu bringen.
🎜🎜ES2019 hat die Methode JSON.stringify() korrigiert. Es ist nun möglich, diese problematischen Codefragmente zu klassifizieren und sie wieder in ihre ursprüngliche Darstellung zu konvertieren. 🎜🎜🎜Symbol.prototype.description🎜🎜🎜🎜Symbol ist ein neuer Datentyp, der in ES2015 (ES6) eingeführt wurde. Sie werden häufig zur Identifizierung von Objekteigenschaften verwendet. ES2019 hat das Attribut description hinzugefügt. Diese Eigenschaft ist schreibgeschützt und ihr Wert kann nicht geändert werden. Es wird verwendet, um die Beschreibung des angegebenen Symbols zurückzugeben.
🎜🎜Zwei Punkte, die Sie beachten sollten. Erstens sind Beschreibungen beim Erstellen von Symbolen nicht erforderlich, sondern optional. Wenn Sie also versuchen, auf description zuzugreifen, erhalten Sie möglicherweise alles außer undefiniert. Wenn Sie versuchen, auf eine Symbolbeschreibung ohne Beschreibung zuzugreifen, erhalten Sie die Meldung undefiniert. 🎜

第二点是 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()'

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

Das obige ist der detaillierte Inhalt vonTeilen Sie 8 nützliche Funktionen, die es wert sind, in ES2019 gesammelt zu werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!