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

讓我們來看看有哪些新特性！

Object.fromEntries方法

ES2017 引入了Object.entries方法，它可以將對象轉(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 ]
// ]

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

 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)換回對象let DrinkingAgeStudents = {}
for (let [name, age] of overTwentyOne) {
    DrinkingAgeStudents[name] = age;
}
// { beatrice: 22, eloise: 21 }

Object.fromEntries方法旨在消除這個循環(huán)！它提供更簡潔的代碼，方便您在對像上使用數(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)換回對象let DrinkingAgeStudents = Object.fromEntries(overTwentyOne); 
// { beatrice: 22, eloise: 21 }

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

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

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

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

Object.fromEntries方法支持情況

Array.prototype.flat方法

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

讓我們來看一個例子，其中map函數(shù)返回了一個需要扁平化的多維數(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)而生。它接受一個可選的深度參數(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'
// ]

請注意，如果沒有指定參數(shù)，默認(rèn)深度為1。這非常重要，因為在我們的示例中，這並不能完全扁平化數(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è)計的理由是，該函數(shù)默認(rèn)情況下不是貪婪的，需要明確的指令才能以這種方式運(yùn)行。對於深度未知且意圖完全扁平化數(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ù)組的深度確實未知，則貪婪操作可能不是一個好的選擇。

Array.prototype.flat方法支持情況

Array.prototype.flatMap方法

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

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

 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)一下這個例子。

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

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

但是，這仍然是一個相對流行的模式，尤其是在函數(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只會扁平化一層。

 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 的另一個不錯的補(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 的另一個不錯的特性是使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)知道錯誤是什麼並且正在尋找觸發(fā)它的數(shù)據(jù)，這是一個不錯的選擇。

可選catch綁定的支持情況

Function.toString()方法的更改

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

 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ù)在源代碼中的真實表示。

 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'  
// '}'

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

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

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

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

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

祝您JavaScript 編程愉快！

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