ES2019에서 수집할 가치가 있는 8가지 유용한 기능을 공유하세요

이 글에서는 ES2019의 매우 유용한 8가지 기능을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

ES2019 사양은 JavaScript의 작은 확장이지만 여전히 몇 가지 흥미로운 기능을 제공합니다. 이 기사에서는 개발을 더 쉽게 만들어주는 8가지 ES2019 기능을 보여줍니다.

String.prototype.trimStart() 및 String.prototype.trimEnd()

---

때때로 문자열을 처리할 때 추가 공백을 처리해야 하는 경우가 있습니다. ES2020에는 이러한 작업을 처리하는 데 도움이 되는 .trimStart() 및 trimEnd() 메서드라는 두 가지 기능이 추가되었습니다.
.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

모두 주어진 문자열에서 공백을 자르거나 제거하는 데 도움이 될 수 있습니다. trimStart() 문자열 시작 부분의 모든 공백을 제거합니다. trimEnd()는 문자열 끝의 모든 공백을 제거합니다. 하지만 양쪽의 공백을 제거하려면 어떻게 해야 할까요? 🎜🎜두 가지 옵션이 있습니다. 첫 번째는 ES2019의 두 기능을 동시에 사용하는 것입니다. 두 번째는 다른 문자열 메서드 trim()을 사용하는 것입니다. 두 방법 모두 원하는 결과를 얻을 수 있습니다. 🎜

// 创建带有描述的 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()🎜🎜🎜🎜함수의 toString() 메서드가 한동안 사용되었습니다. 이것이 하는 일은 함수의 코드를 인쇄하는 것입니다. ES2019는 주석과 공백과 같은 특수 문자를 처리하는 방식이 다릅니다.
🎜🎜과거에는 toString() 메서드가 주석과 공백을 제거했습니다. 따라서 함수의 인쇄된 버전은 원래 코드와 다르게 보일 수 있습니다. ES2019에서는 더 이상 이런 일이 발생하지 않습니다. 반환되는 값은 주석 및 특수 문자를 포함하여 원래 값과 일치합니다. 🎜

// 创建带有描述的 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() 및 Array.prototype.FlatMap()🎜🎜🎜🎜배열은 JavaScript의 기본 구성 요소 중 하나입니다. 때로는 많은 문제를 일으키기도 합니다. 이는 다차원 배열을 처리해야 할 때 특히 그렇습니다. 다차원 배열을 1차원으로 변환하는 것처럼 겉으로는 단순해 보이는 작업도 어려울 수 있습니다.
🎜🎜좋은 소식은 ES2019의 두 가지 기능이 이를 더 쉽게 만들어준다는 것입니다. 첫 번째는 flat() 메서드입니다. 다차원 배열에 사용하면 1차원으로 변환됩니다. 기본적으로 flat()은 배열을 한 수준만 평면화합니다. 🎜🎜하지만 페이지에서는 레벨을 지정하고 호출 시 매개변수로 전달할 수 있습니다. 필요한 레벨 수를 잘 모르는 경우 무한대를 사용할 수도 있습니다. 🎜rrreee

🎜Array.prototype.FlatMap()🎜

🎜 flat() 메서드 외에 flatMap()도 있습니다. flat()의 고급 버전이라고 생각하세요. 차이점은 flatMap() 메서드가 flat()과 map()을 결합한다는 것입니다. 배열을 평면화할 때 콜백 함수를 호출할 수 있습니다. 🎜🎜이렇게 하면 원본 배열의 모든 요소를 ​​병합 프로세스 중에 사용할 수 있습니다. 이는 배열을 병합하면서 배열의 내용을 수정하려는 경우에 편리합니다. 🎜rrreee🎜Object.fromEntries()🎜🎜🎜객체를 배열로 변환해야 하는 경우 entries()를 사용하여 완료할 수 있습니다. 하지만 역순으로 하는 작업은 어렵습니다. ES2019에서는 이 문제를 쉽게 해결할 수 있도록 fromEntries()를 제공합니다.
🎜🎜이 방법의 기능은 매우 간단합니다. 배열이나 맵과 같은 반복 가능한 키-값 쌍 형식을 취하고 이를 객체로 변환합니다. 🎜rrreee🎜🎜선택적 캐치 바인딩🎜🎜🎜🎜이전에는 try ... catch를 사용할 때 바인딩도 필요했습니다. Exception을 사용하지 않더라도 반드시 파라미터로 전달해야 합니다. ES2019에서는 예외를 사용하지 않으려면 매개변수 없이 catch 블록을 사용할 수 있습니다.
🎜rrreee🎜🎜잘 구성된 JSON.stringify()🎜🎜🎜🎜과거에는 특정 문자가 포함된 항목에 JSON.stringify()를 사용하면 잘못된 형식의 오류가 발생했습니다. 유니코드 문자열. U+D800에서 U+DFFF까지의 인코딩 구간은 "�"가 됩니다. 더 나쁜 점은 잘못된 문자를 원래 형태로 되돌릴 수 있는 방법이 없다는 것입니다.
🎜🎜ES2019에서는 JSON.stringify() 메서드를 수정했습니다. 이제 문제가 있는 코드 조각을 분류하고 원래 표현으로 다시 변환하는 것이 가능합니다. 🎜🎜🎜Symbol.prototype.description🎜🎜🎜🎜Symbol은 ES2015(ES6)에 도입된 새로운 데이터 유형입니다. 객체 속성을 식별하는 데 자주 사용됩니다. ES2019에는 description 속성이 추가되었습니다. 이 속성은 읽기 전용이며 해당 값을 변경할 수 없습니다. 주어진 기호에 대한 설명을 반환하는 데 사용됩니다.
🎜🎜유념해야 할 두 가지 사항입니다. 첫째, 기호를 생성할 때 설명은 필수는 아니지만 선택 사항입니다. 따라서 설명에 액세스하려고 하면 정의되지 않음을 제외한 내용이 나타날 수 있습니다. 설명 없이 기호 설명에 액세스하려고 하면 정의되지 않음 메시지가 표시됩니다. 🎜

第二点是 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!