所有新的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中文网其他相关文章！