Geekly articles weekly

使用一些新的JavaScript功能的示例

该材料的作者（我们今天将其翻译发表）说，属于ES2019标准的新JavaScript功能已在Chrome，Firefox和Safari浏览器以及Node.js平台上正式提供 。 如果您需要支持过时的浏览器，则可以通过使用Babel转换JS代码来利用这些创新。 在这里，我们看一些新的JS功能的示例。



Object.fromEntries方法


在ES2017中， Object.entries了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 ] // ]

这种方法已成为该语言功能的绝佳补充。 事实是，它可以使用Array原型内置的多种方法方便地处理对象数据。 在这些方法中，例如，可以注意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!

▍支持


  • 铬75
  • 火狐67
  • Safari 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' // ]

请注意，如果不将参数传递给此方法，它将把数组的元素提高一级。 这非常重要，因为在我们的案例中，我们需要将数组转换为完全平坦的数据结构。 使用不带参数的此方法时，将发生以下情况：

 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值传递给flat方法。

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

与往常一样，此类操作应谨慎使用。 对于处理后的数组的深度确实未知的情况，可能无法将这种方法称为一个好的选择。

▍支持


  • 铬75
  • 火狐67
  • Safari 12

Array.prototype.flatMap方法


与flat方法一起，我们现在可以使用新的组合方法Array.prototype.flatMap 。 上面，我们实际上已经看到了使用这种方法可能会派上用场的一个例子，但让我们看另一个例子。

假设我们面临着将某些元素插入数组的任务。 在新的JS功能出现之前，我们将如何解决？ 例如，像这样：

 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,      JS   // [ // 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方法解决它的精美程度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方法的工作就像传递了一个单位一样。 flatMap方法的行为完全相同，即，它仅将数组的元素“提升” 1级。 它是map和flat方法结合使用的结果。

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

▍支持


  • 铬75
  • 火狐67
  • Safari 12

String.prototype.trimStart和String.prototype.trimEnd方法


ES2019的另一个不错的新功能是别名，别名为某些字符串方法提供了更有意义的名称。 以前，我们可以使用String.prototype.trimRight和String.prototype.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'

▍支持


  • 铬75
  • 火狐67
  • Safari 12

可选的catch块参数


ES2019的另一个不错的功能是， try-catch块中的参数现已变为可选。 以前，所有catch块都必须将异常对象作为参数传递。 即使不使用该参数，也必须通过以catch该参数。

 try {  let parsed = JSON.parse(obj) } catch(e) {  // e      console.log("error") }

现在不是这样。 如果catch未使用异常对象，则无需将任何内容传输到该块。

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

这是一个很好的机会，在程序员提前知道紧急情况的发生时，这将是非常有用的，这将导致进入相应的catch 。

▍支持


  • 铬75
  • 火狐67
  • Safari 12

对Function.prototype.toString方法的更改


ES2019标准对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' + // '}'

▍支持


  • 铬75
  • Firefox 60
  • Safari 12（ 部分 ）

总结


在这里，我们看了一些仅使用一些新JavaScript功能的示例。 如果您对JS创新感兴趣，请查看此存储库和此表。

亲爱的读者们！ 您是否遇到过JS的新功能大大简化了任何问题的解决方案的情况？

Source: https://habr.com/ru/post/zh-CN464295/

More articles:


All Articles