所有新的ES2019技巧和技巧

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

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

Object.fromEntries方法

ES2017 引入了Object.entries方法，它可以將對象轉換為其數組表示形式。例如：

 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 ]
// ]

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

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

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

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

Object.fromEntries方法旨在消除這個循環！它提供更簡潔的代碼，方便您在對像上使用數組原型方法。

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

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

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

需要注意的是，數組和對像是不同的數據結構，在兩者之間轉換可能會導致數據丟失。以下示例展示了數組元素變成重複對象鍵的情況：

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

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

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

Object.fromEntries方法支持情況

Chrome	Firefox	Safari	Edge
75	67	12.1	不支持

Array.prototype.flat方法

多維數組是一種非常常見的數據結構，尤其是在檢索數據時。扁平化多維數組的能力是必要的。雖然以前也能做到，但方法並不優雅。

讓我們來看一個例子，其中map函數返回了一個需要扁平化的多維數組。

 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方法應運而生。它接受一個可選的深度參數。

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

請注意，如果沒有指定參數，默認深度為1。這非常重要，因為在我們的示例中，這並不能完全扁平化數組。

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

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

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

與往常一樣，應謹慎使用貪婪操作，如果數組的深度確實未知，則貪婪操作可能不是一個好的選擇。

Array.prototype.flat方法支持情況

Chrome	Firefox	Safari	Edge
75	67	12	不支持

Chrome Android	Firefox Android	iOS Safari	IE Mobile	Samsung Internet	Android Webview
75	67	12.1	不支持	不支持	67

Array.prototype.flatMap方法

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

如果我們想在數組中插入元素，在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) // 現在扁平化，可以使用flat 但它之前也不存在// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

現在我們有了Array.prototype.flat ，我們可以稍微改進一下這個例子。

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

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

但是，這仍然是一個相對流行的模式，尤其是在函數式編程中。因此，將其內置到數組原型中是很棒的。使用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的默認參數是1。 flatMap等同於組合map和不帶參數的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方法支持情況

Chrome	Firefox	Safari	Edge
75	67	12	不支持

Chrome Android	Firefox Android	iOS Safari	IE Mobile	Samsung Internet	Android Webview
75	67	12.1	不支持	不支持	67

String.trimStart和String.trimEnd方法

ES2019 的另一個不錯的補充是別名，它使一些字符串函數名稱更明確。以前， 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'

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

 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方法支持情況

Chrome	Firefox	Safari	Edge
75	67	12	不支持

可選的catch綁定

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

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

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

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

如果您已經知道錯誤是什麼並且正在尋找觸發它的數據，這是一個不錯的選擇。

可選catch綁定的支持情況

Chrome	Firefox	Safari	Edge
75	67	12	不支持

Function.toString()方法的更改

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

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

現在它反映了函數在源代碼中的真實表示。

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

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

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

Chrome	Firefox	Safari	Edge
75	60	12 – 部分支持	17 – 部分支持

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

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

• 符號描述
• 排序穩定性
• ECMAScript 作為JSON 的超集
• JSON.stringify

祝您JavaScript 編程愉快！

以上是所有新的ES2019技巧和技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！