ES2019 為 ECMAScript 標(biāo)準(zhǔn)帶來(lái)了多項(xiàng)新特性。這些特性已在 Node.js、Chrome、Firefox 和 Safari 中正式可用。如需支持舊版瀏覽器，您也可以使用 Babel 將這些特性編譯到不同版本的 JavaScript。

讓我們來(lái)看看有哪些新特性！

Object.fromEntries 方法

ES2017 引入了 Object.entries 方法，它可以將對(duì)象轉(zhuǎn)換為其數(shù)組表示形式。例如：

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
}

Object.entries(students) 
// [
//  [ 'amelia', 20 ],
//  [ 'beatrice', 22 ],
//  [ 'cece', 20 ],
//  [ 'deirdre', 19 ],
//  [ 'eloise', 21 ]
// ]

這非常有用，因?yàn)樗试S對(duì)象使用數(shù)組原型中內(nèi)置的眾多函數(shù)，例如 map、filter、reduce 等。然而，將結(jié)果轉(zhuǎn)換回對(duì)象則需要一個(gè)相對(duì)繁瑣的過程。

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
}

// 轉(zhuǎn)換為數(shù)組以便使用 .filter() 函數(shù)
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21
}) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]

// 將多維數(shù)組轉(zhuǎn)換回對(duì)象
let DrinkingAgeStudents = {}
for (let [name, age] of overTwentyOne) {
    DrinkingAgeStudents[name] = age;
}
// { beatrice: 22, eloise: 21 }

Object.fromEntries 方法旨在消除這個(gè)循環(huán)！它提供更簡(jiǎn)潔的代碼，方便您在對(duì)象上使用數(shù)組原型方法。

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
}

// 轉(zhuǎn)換為數(shù)組以便使用 .filter() 函數(shù)
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21
}) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]

// 將多維數(shù)組轉(zhuǎn)換回對(duì)象
let DrinkingAgeStudents = Object.fromEntries(overTwentyOne); 
// { beatrice: 22, eloise: 21 }

需要注意的是，數(shù)組和對(duì)象是不同的數(shù)據(jù)結(jié)構(gòu)，在兩者之間轉(zhuǎn)換可能會(huì)導(dǎo)致數(shù)據(jù)丟失。以下示例展示了數(shù)組元素變成重復(fù)對(duì)象鍵的情況：

let students = [
  [ 'amelia', 22 ], 
  [ 'beatrice', 22 ], 
  [ 'eloise', 21], 
  [ 'beatrice', 20 ]
]

let studentObj = Object.fromEntries(students); 
// { amelia: 22, beatrice: 20, eloise: 21 }
// 第一個(gè) beatrice 被丟棄了！

使用這些函數(shù)時(shí)，請(qǐng)注意潛在的副作用。

Object.fromEntries 方法支持情況

Array.prototype.flat 方法

多維數(shù)組是一種非常常見的數(shù)據(jù)結(jié)構(gòu)，尤其是在檢索數(shù)據(jù)時(shí)。扁平化多維數(shù)組的能力是必要的。雖然以前也能做到，但方法并不優(yōu)雅。

讓我們來(lái)看一個(gè)例子，其中 map 函數(shù)返回了一個(gè)需要扁平化的多維數(shù)組。

let courses = [
  {
    subject: "math",
    numberOfStudents: 3,
    waitlistStudents: 2,
    students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']]
  },
  {
    subject: "english",
    numberOfStudents: 2,
    students: ['Wilson', 'Taylor']
  },
  {
    subject: "history",
    numberOfStudents: 4,
    students: ['Edith', 'Jacob', 'Peter', 'Betty']
  }
]

let courseStudents = courses.map(course => course.students)
// [
//   [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
//   [ 'Wilson', 'Taylor' ],
//   [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
// ]

[].concat.apply([], courseStudents) // 我們不得不使用這種方式

Array.prototype.flat 方法應(yīng)運(yùn)而生。它接受一個(gè)可選的深度參數(shù)。

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let flattenOneLevel = courseStudents.flat(1)
console.log(flattenOneLevel)
// [
//   'Janet',
//   'Martha',
//   'Bob',
//   [ 'Phil', 'Candace' ],
//   'Wilson',
//   'Taylor',
//   'Edith',
//   'Jacob',
//   'Peter',
//   'Betty'
// ]

let flattenTwoLevels = courseStudents.flat(2)
console.log(flattenTwoLevels)
// [
//   'Janet',   'Martha',
//   'Bob',     'Phil',
//   'Candace', 'Wilson',
//   'Taylor',  'Edith',
//   'Jacob',   'Peter',
//   'Betty'
// ]

請(qǐng)注意，如果沒有指定參數(shù)，默認(rèn)深度為 1。這非常重要，因?yàn)樵谖覀兊氖纠?，這并不能完全扁平化數(shù)組。

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let defaultFlattened = courseStudents.flat()
console.log(defaultFlattened)
// [
//   'Janet',
//   'Martha',
//   'Bob',
//   [ 'Phil', 'Candace' ],
//   'Wilson',
//   'Taylor',
//   'Edith',
//   'Jacob',
//   'Peter',
//   'Betty'
// ]

這樣設(shè)計(jì)的理由是，該函數(shù)默認(rèn)情況下不是貪婪的，需要明確的指令才能以這種方式運(yùn)行。對(duì)于深度未知且意圖完全扁平化數(shù)組的情況，可以使用 Infinity 作為參數(shù)。

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let alwaysFlattened = courseStudents.flat(Infinity)
console.log(alwaysFlattened)
// [
//   'Janet',   'Martha',
//   'Bob',     'Phil',
//   'Candace', 'Wilson',
//   'Taylor',  'Edith',
//   'Jacob',   'Peter',
//   'Betty'
// ]

與往常一樣，應(yīng)謹(jǐn)慎使用貪婪操作，如果數(shù)組的深度確實(shí)未知，則貪婪操作可能不是一個(gè)好的選擇。

Array.prototype.flat 方法支持情況

Array.prototype.flatMap 方法

隨著 flat 方法的加入，我們也得到了組合函數(shù) Array.prototype.flatMap。我們實(shí)際上已經(jīng)在上面的例子中看到了它有用的地方，但讓我們?cè)賮?lái)看一個(gè)。

如果我們想在數(shù)組中插入元素，在 ES2019 添加這些特性之前，會(huì)是什么樣子？

let grades = [78, 62, 80, 64]

let curved = grades.map(grade => [grade, grade   7])
// [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ]

let flatMapped = [].concat.apply([], curved) // 現(xiàn)在扁平化，可以使用 flat 但它之前也不存在
// [
//  78, 85, 62, 69,
//  80, 87, 64, 71
// ]

現(xiàn)在我們有了 Array.prototype.flat，我們可以稍微改進(jìn)一下這個(gè)例子。

let grades = [78, 62, 80, 64]

let flatMapped = grades.map(grade => [grade, grade   7]).flat()
// [
//  78, 85, 62, 69,
//  80, 87, 64, 71
// ]

但是，這仍然是一個(gè)相對(duì)流行的模式，尤其是在函數(shù)式編程中。因此，將其內(nèi)置到數(shù)組原型中是很棒的。使用 flatMap，我們可以這樣做：

let grades = [78, 62, 80, 64]

let flatMapped = grades.flatMap(grade => [grade, grade   7]);
// [
//  78, 85, 62, 69,
//  80, 87, 64, 71
// ]

記住，Array.prototype.flat 的默認(rèn)參數(shù)是 1。flatMap 等同于組合 map 和不帶參數(shù)的 flat。因此，flatMap 只會(huì)扁平化一層。

let grades = [78, 62, 80, 64]

let flatMapped = grades.flatMap(grade => [grade, [grade   7]]);
// [
//   78, [ 85 ],
//   62, [ 69 ],
//   80, [ 87 ],
//   64, [ 71 ]
// ]

Array.prototype.flatMap 方法支持情況

String.trimStart 和 String.trimEnd 方法

ES2019 的另一個(gè)不錯(cuò)的補(bǔ)充是別名，它使一些字符串函數(shù)名稱更明確。以前，String.trimRight 和 String.trimLeft 是可用的。

let message = "   Welcome to CS 101    "
message.trimRight()
// '   Welcome to CS 101'
message.trimLeft()
// 'Welcome to CS 101   '
message.trimRight().trimLeft()
// 'Welcome to CS 101'

這些都是很棒的函數(shù)，但是給它們更符合其目的的名稱也很有益。刪除起始空格和結(jié)尾空格。

let message = "   Welcome to CS 101    "
message.trimEnd()
// '   Welcome to CS 101'
message.trimStart()
// 'Welcome to CS 101   '
message.trimEnd().trimStart()
// 'Welcome to CS 101'

String.trimStart 和 String.trimEnd 方法支持情況

可選的 catch 綁定

ES2019 的另一個(gè)不錯(cuò)的特性是使 try-catch 塊中的參數(shù)可選。以前，所有 catch 塊都將異常作為參數(shù)傳入。這意味著即使 catch 塊中的代碼忽略了它，它也仍然存在。

try {
  let parsed = JSON.parse(obj)
} catch(e) {
  // 忽略 e，或使用
  console.log(obj)
}

現(xiàn)在不再是這樣了。如果 catch 塊中沒有使用異常，則根本不需要傳入任何內(nèi)容。

try {
  let parsed = JSON.parse(obj)
} catch {
  console.log(obj)
}

如果您已經(jīng)知道錯(cuò)誤是什么并且正在尋找觸發(fā)它的數(shù)據(jù)，這是一個(gè)不錯(cuò)的選擇。

可選 catch 綁定的支持情況

Function.toString() 方法的更改

ES2019 還改變了 Function.toString() 方法的運(yùn)行方式。以前，它會(huì)完全去除空格。

function greeting() {
  const name = 'CSS Tricks'
  console.log(`hello from ${name}`)
}

greeting.toString()
//'function greeting() {\nconst name = \'CSS Tricks\'\nconsole.log(`hello from ${name} //`)\n}'

現(xiàn)在它反映了函數(shù)在源代碼中的真實(shí)表示。

function greeting() {
  const name = 'CSS Tricks'
  console.log(`hello from ${name}`)
}

greeting.toString()
// 'function greeting() {\n'  
//  "  const name = 'CSS Tricks'\n"  
//  '  console.log(`hello from ${name}`)\n'  
//  '}'

這主要是一個(gè)內(nèi)部更改，但我禁不住認(rèn)為這將來(lái)可能會(huì)讓一兩個(gè)博主的生活更輕松。

Function.toString() 方法的支持情況

這就是 ES2019 的主要新增特性！

您可能還希望探索其他一些新增特性，包括：

• 符號(hào)描述
• 排序穩(wěn)定性
• ECMAScript 作為 JSON 的超集
• JSON.stringify

祝您 JavaScript 編程愉快！

以上是所有新的ES2019技巧和技巧的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！