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

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功能》和《 六个另外微小但很棒的ES6功能 》重点介绍了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是处理异步任务的新方法，它不是“微小的”附加功能，但它确实很棒！ 阅读我的异步等待指南 ，将您的回调地狱变成一种更优雅，自上而下的异步代码方法！

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