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

发布于:2021-02-13 00:00:52

0

81

0

JavaScript ES7 ES8

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

String.prototype.padStart/padEnd

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'

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

Object.entries

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遵循相同的顺序for...in。

Object.values

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 提供对象文字,数组,字符串等中的值条目。

Array.prototype.includes

Array.prototype.includes 有点像,indexOf但返回一个true orfalse值,而不是该项目的索引:

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

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

求幂

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

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

// ..becomes
2 ** 8 // 256

这种新语法Math.pow与使用更少的代码即可完成相同的工作  !

尾随逗号

我已经足够大了,还记得在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

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

async/await

显然,async 和await,处理异步任务的新方法并没有增加“微小”的功能,但是它确实很棒!阅读我的异步等待指南,将您的回调地狱变成一种更优雅,自上而下的异步代码方法!

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