首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ES7 and ES8 新特性

includes()方法与 indexOf()非常相似,都是查找一个值在数组中是否存在,只是返回的值不同。 indexOf()若存在则返回该值在数组中的下标,否则返回-1。includes()则返回的是布尔值

['a', 'b', 'c'].includes('a') // true['a', 'b', 'c'].indexOf('a') // 0['a', 'b', 'c'].includes('d') // false['a', 'b', 'c'].indexOf('d') // -1

includes(substring [, position])接收两个参数: substring必需,要查找的字符串。 position 可选,从该处开始查找(默认从0开始)

['a', 'b', 'c'].includes('a',0) // true['a', 'b', 'c'].includes('a',1) // false

值得注意的是使用 includes()方法,两个NaN被认为是想等的

['a', NaN, 'c'].includes(NaN,1) // true

因此如果只想知道某个值在数组中是否存在而并不关心它的索引位置,建议使用 includes() 。如果你想获取一个值在数组中的位置,那么你只能使用 indexOf()方法。

Object.values()、Object.entries()

ES8新加了 Object.values()、 Object.entries()两个方法,这两个方法与 Object.keys()工作原理基本相同,只是返回的参数不同。

Object.values()

Object.values()方法返回一个数组,成员是参数自身所有可遍历属性的值 [value] ,返回值按数值大小从小到大排列 。一般用于获取对象所有的值。

obj = { a: 'one', b: 'two', c: 'three' }console.log(Object.values(obj)); // ["one", "two", "three"]obj2 = { a: 1, b: 2, 3: 'c' }console.log(Object.values(obj2)); // ["c", 1, 2]obj3 = { 1: 'a', 2: 'b', foo: [{ d: 1, e: 2 }] }console.log(Object.values(obj3)); // ["a", 'b',[{ d: 1, e: 2 }]]

因为 Object.values() 用于所有可遍历属性,如果参数不是对象, Object.values()会先将其转为对象,以参数的下标作为对象的 key值,因此也可以对数组和字符串进行操作。

// 数组可以看做key为下标的对象// ['a','b','c']=>{ 0: 'a', 1: 'b', 3: 'c' }obj = ['a','b','c']console.log(Object.values(obj)); // ['a','b','c']// 字符串可以看做key为下标的对象// 'foo'=>{ 0: 'f', 1: 'o', 3: 'o' }str = 'foo'console.log(Object.values(str)); // ['f','o','o']

Object.entries()

Object.entries()方法返回一个数组,成员是参数自身所有可遍历属性的键值对数组 [key,value],返回值按数值大小从小到大排列。

obj = { a: 1, b: 2, c: 3 }console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

跟 Object.values()一样 Object.entries()也可以用于数组和字符串。

let obj = ['a', 'b', 'c'];console.log(Object.entries(obj)); // [['0', 'a'], ['1', 'b'], ['2', 'c']]let obj2 = 'qux';console.log(Object.entries(obj2)); // [['0', 'q'], ['1', 'u'], ['2', 'x']]

使用 Object.entries(),我们还可以进行对象属性的遍历。

字符填充函数padStart() 和 padEnd()

ES8提供了新的字符串方法 padStart()和 padEnd()。 padStart()函数通过填充字符串的首部来保证字符串达到指定的长度, padEnd() 则是在符串的尾部填充字来保证字符串的长度的。该方法提供了两个参数:字符串目标长度和填充字段,如果没有转入第二个参数,默认使用空格填充。

'css'.padStart(10).length // ' css' 长度10'html'.padStart(10).length // ' html' 长度10'JavaScript'.padStart(10).length // 'JavaScript' 长度10

可以看出,多个数据如果都采用同样长度的padStart(),相当于将呈现内容右对齐。

第二个参数指定填充字段,只有在字符长度小于目标长度时才有效,若字符长度已经等于或小于目标长度时,填充字符不会起作用,而且目标长度如果小于字符串本身长度时,字符串也不会做截断处理,只会返回原来的数据。

'css'.padStart(10,'*') // '*******css' 长度10'JavaScript'.padStart(10,'*') // 'JavaScript' 长度10'JavaScript'.padStart(8,'*').length // 'JavaScript' 长度10

padEnd() 函数作用同 padStart(),只不过它是从字符串尾部做填充

'css'.padEnd(10,'*') // 'css*******' 长度10'JavaScript'.padEnd(10,'*') // 'JavaScript' 长度10'JavaScript'.padEnd(8,'*').length // 'JavaScript' 长度10

异步函数 Async/await

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。当函数执行的时候,一旦遇到 await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

function timeout(ms) );}async function asyncPrint(value, ms) asyncPrint('我在一秒后才打印出来', 1000);

常见方法

处理单个异步结果:

function otherAsyncFunc() async function asyncFunc() asyncFunc() //'hello world'

顺序处理多个异步结果

function bar(num) else }function foo(status) else }async function asyncFunc(data) asyncFunc(9).then((result) => );

只要一个 await 语句后面的 Promise 变为 reject ,那么整个 async 函数都会中断执行。

async function f()

有时,我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个 await 放在 try...catch 结构里面,这样不管这个异步操作是否成功,第二个 await 都会执行。

async function f() catch (e) {}return await Promise.resolve('hello world');}f().then(v => console.log(v)) //hello world

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180205A0DIUB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券