ES2019 で収集する価値のある 8 つの便利な機能を共有します

この記事ではES2019の非常に便利な機能を8つ紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#ES2019 仕様は JavaScript の小さな拡張ですが、それでもいくつかの興味深い機能をもたらします。この記事では、開発を容易にする 8 つの ES2019 機能を説明します。

String.prototype.trimStart() および String.prototype.trimEnd()

---

文字列を処理するときに、余分なスペースを処理する必要がある場合があります。 ES2020 では、これらの雑務の処理に役立つ 2 つの関数、.trimStart() メソッドと trimEnd() メソッドが追加されています。

これらはすべて、特定の文字列内のスペースをトリミングまたは削除するのに役立ちます。 trimStart() 文字列の先頭にあるスペースをすべて削除します。 trimEnd() は文字列の末尾にあるすべてのスペースを削除します。しかし、両側のスペースを削除したい場合はどうすればよいでしょうか?

選択肢は 2 つあります。 1 つ目は、両方の ES2019 機能を同時に使用することです。 2 つ目は、別の文字列メソッド 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()

---

function の 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 の基本的な構成要素の 1 つです。彼らは時々多くの問題を引き起こします。これは、多次元配列を扱う必要がある場合に特に当てはまります。多次元配列を 1 次元に変換するような一見単​​純なタスクでも、難しい場合があります。

良いニュースは、ES2019 の 2 つの機能によりこれが簡単になることです。 1 つ目は flat() メソッドです。多次元配列で使用すると、1 次元に変換されます。デフォルトでは、 flat() は配列を 1 レベルだけフラット化します。

ただし、ページではレベルを指定し、呼び出し時にそれをパラメータとして渡すことができます。必要なレベルの数がわからない場合は、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() を提供します。

このメソッドの機能は非常に簡単です。配列やマップなどのキーと値のペアの反復可能な形式を受け取り、それをオブジェクトに変換します。

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

オプションのキャッチ バインディング

---

以前に

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

---

Symbol は、ES2015 (ES6) で導入された新しいデータ型です。これらはオブジェクトのプロパティを識別するためによく使用されます。 ES2019 では

description 属性が追加されました。このプロパティは読み取り専用であり、その値は変更できません。指定されたシンボルの説明を返すために使用されます。

2 つの点に留意する必要があります。まず、シンボルを作成するときに説明は必須ではありませんが、オプションです。したがって、

description にアクセスしようとすると、unknown 以外のものが返される可能性があります。説明のないシンボルの説明にアクセスしようとすると、未定義 (未定義) メッセージが表示されます。

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

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

以上がES2019 で収集する価値のある 8 つの便利な機能を共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。