六个小巧但很棒的ES7 + ES8功能

你的名字 2023-02-21 15:29 13阅读 0赞

Development of new features for the core JavaScript language has really improved over the last five years, thanks in part to JavaScript frameworks pushing the limits and proving how important given functionality can be.  My previous ES6 posts, [Six Tiny But Awesome ES6 Features][] and [Six More Tiny But Awesome ES6 Features][], highlighted a dozen excellent features that were added to JavaScript to make our lives easier -- and they certainly do.  Let's have a look at some of the "small" functionality that ES7 and ES8 brought us!

在过去五年中，针对JavaScript核心语言的新功能的开发确实得到了改善，这在一定程度上要归功于JavaScript框架不断突破极限并证明了给定功能的重要性。 我之前在ES6上发布的文章《 [六个微小但很棒的ES6功能》][Six Tiny But Awesome ES6 Features]和《 [六个另外微小但很棒的ES6功能][Six More Tiny But Awesome ES6 Features] 》重点介绍了JavaScript中添加的许多出色功能，这些功能使我们的生活更轻松-当然可以。 让我们看一下ES7和ES8带给我们的一些“小”功能！

## `String.prototype.padStart` / `padEnd` **(**`String.prototype.padStart`/`padEnd`**)** ##

`padStart` and `padEnd` allow us to pad a given string with any text of our choosing to ensure a string matches a given length:

`padStart`和`padEnd`允许我们使用选择的任何文本填充给定的字符串，以确保字符串匹配给定的长度：

// padStart(desiredLength, textToPrepend)
    
    // No text
    ''.padStart(10, 'Hi') // 'HiHiHiHiHi'
    
    // Some text
    'def'.padStart(6, 'abc') // 'abcdef'
    
    // Only use what gets to length
    '5678'.padStart(7, '1234') // '1235678'
    
    // padEnd(desiredLength, textToAppend)
    
    '23'.padEnd(8, '0') // '23000000'

One usage of `padStart` could include prepending an area code to phone number if the user input isn't the correct length.  `padEnd` could be used for decimal precision.

如果用户输入的长度不正确， `padStart`一种用法可以包括在电话号码前添加区号。 `padEnd`可以用于十进制精度。

## `Object.entries` **(**`Object.entries`**)** ##

`Object.entries` allows us to get an object's enumerable property pairs in array format (\[key, value\]):

`Object.entries`允许我们以数组格式(\[键，值\])获取对象的可枚举属性对：

// Object literal
    Object.entries({ 'a': 'A', 'b': 'B' }); // [["a","A"],["b","B"]]
    
    // String
    Object.entries('david') // [["0","d"],["1","a"],["2","v"],["3","i"],["4","d"]]

`Object.entries` follows the same order as `for...in` would.

`Object.entries`遵循与`for...in`的相同顺序。

## `Object.values` **(**`Object.values`**)** ##

`Object.keys` has been immensely useful for me so I was also excited to see `Object.values` introduced:

`Object.keys`对我非常有用，因此我很高兴看到引入了`Object.values` ：

// Object literal
    Object.values({ 'a': 23, 'b': 19 }) // [23, 19]
    
    // Array-like object (order not preserved)
    Object.values({ 80: 'eighty', 0: 1, 1: 'yes' }) // [1, 'yes', 'eighty']
    
    // String
    Object.values('davidwalsh') // ["d", "a", "v", "i", "d", "w", "a", "l", "s", "h"]
    
    // Array
    Object.values([1, 2, 3]) // [1, 2, 3]

`Object.values` provides value entries in object literals, arrays, strings, etc.

`Object.values`提供对象文字，数组，字符串等中的值条目。

## `Array.prototype.includes` **(**`Array.prototype.includes`**)** ##

`Array.prototype.includes` is a bit like `indexOf` but instead returns a `true` or `false` value instead of the item's index:

`Array.prototype.includes`有点像`indexOf`但是返回的是`true`或`false`值，而不是项目的index：

['a', 'b', 'c'].includes('a') // true, not 0 like indexOf would give
    ['a', 'b', 'c'].includes('d') // false

`indexOf` has been used over the years to detect item presence in array, but the \`0\` index can lead to false negatives if not coded properly.  I'm glad JavaScript has added a function that returns exactly what we need: a positive or negative answer!

多年来使用`indexOf`来检测数组中是否存在项目，但是如果编码不正确，则索引'0'可能导致假阴性。 我很高兴JavaScript添加了一个函数，该函数返回的正是我们所需要的：肯定或否定答案！

## 求幂 **(**Exponentiation**)** ##

JavaScript has introduced a shorthand method of exponentiation:

JavaScript引入了一种求幂的简写方法：

// 2 to the power of 8
    Math.pow(2, 8) // 256
    
    // ..becomes
    2 ** 8 // 256

This new syntax accomplishes the same as  `Math.pow` with less code!

这种新语法用更少的代码实现了与`Math.pow`相同的功能！

## 尾随逗号 **(**Trailing Commas**)** ##

I'm old enough to remember the days where a trailing comma would completely explode your JavaScript code in Internet Explorer 6.  JavaScript now accommodates for the extra comma:

我已经足够大了，还记得在Internet Explorer 6中尾随逗号将完全炸开JavaScript代码的日子。JavaScript现在可以容纳额外的逗号：

let myObj = { a:'b', b: 'c', } // No error!
    
    let myArr = [1, 2, 3, ] // No error!
    
    [1, 2, 3,].length // 3
    [1, 2, 3, , , ].length // 5

The case of the Array length is one to keep in mind.  ESLint has a `comma-dangle` rule you can use to ensure your comma dangle usage is consistent.

请记住数组长度的情况。 ESLint有一个`comma-dangle`悬挂规则，可用于确保逗号悬挂用法是一致的。

## 奖励： `async` / `await` **(**Bonus:  `async` / `await`**)** ##

Obviously `async` and `await`, the new method of handling async tasks, is no "tiny" addition, but it certainly is awesome!  Read my [async and await guide][] to transform your callback hell into a more elegant, top-down approach to async code!

显然， `async`和`await`是处理异步任务的新方法，它不是“微小的”附加功能，但它确实很棒！ 阅读我的[异步等待指南][async and await guide] ，将您的回调地狱变成一种更优雅，自上而下的异步代码方法！

With every iteration of JavaScript we're solving problems that we'd been having with lack of functionality or bastardized usage of other functions.  What's your favorite recent addition to JavaScript?

在JavaScript的每次迭代中，我们都在解决由于缺乏功能或混用其他功能而遇到的问题。 您最近最喜欢JavaScript的什么功能？

> 翻译自: [https://davidwalsh.name/es7-es8-features][https_davidwalsh.name_es7-es8-features]

[Six Tiny But Awesome ES6 Features]: https://davidwalsh.name/es6-features
[Six More Tiny But Awesome ES6 Features]: https://davidwalsh.name/es6-features-ii
[async and await guide]: https://davidwalsh.name/async-await
[https_davidwalsh.name_es7-es8-features]: https://davidwalsh.name/es7-es8-features