你所要知道EcmaScript 2017(ES8)的一些新特征

ES8

原文出处:https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66

EcmaScript 8 或称 EcmaScript 2017 在六月底的时候由TC39委员会正式发布,我们在去年讨论了很多关于ECMAScript的内容,这很有用。现在每一年都会有一个ES版本规范发布。2015年发布了ES6,2016年发布了ES7,但是有谁知道ES5是何时发布的?它于2009年发布,并且之后JavaScript开始了神奇的崛起之路。

我们一直在学习JavaScript作为一个稳定语言的发展和改变,现在我们需要了解一下ES8的新语法。

String padding

这一方法在String object中加入了两个函数:padStartpadEnd
正如它们的命名一样,这些函数的作用是对字符串的开发或结尾进行填充,从而使字符串获得给定的长度。你可以用特定的字符、字符串或者是空格(默认)来填充

定义:

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

正如你所看到的,第一个参数是 targetLength ,它表示生成字符串总长度。第二个参数是 padString ,它表示填充目标的字符串,默认值为空。

例子:

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'
'es8'.padEnd(2);          // 'es8'
'es8'.padEnd(5);          // 'es8  '
'es8'.padEnd(6, 'woof');  // 'es8woo'
'es8'.padEnd(14, 'wow');  // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');     // 'es86666'

浏览器支持:

浏览器支持

Object.values and Object.entries

Object.values方法返回一个指定对象可枚举属性值的数组,和它类似的语法是 for in

定义

Object.values(obj)

obj 参数是对目标对象的操作,它可以是一个对象或者数组。

例子

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' };
Object.values(obj); // ['e', 's', '8']

// when we use numeric keys, the values returned in a numerical 
// order according to the keys
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']
Object.values('es8'); // ['e', 's', '8']

浏览器支持

浏览器支持

Object.entries 方法返回一个给定对象可枚举属性值的数组[key, value],它和Object.values类似

例子

const obj = { x: 'xxx’, y: 1 };
Object.entries(obj); // [[’x’, 'xxx’], [’y’, 1]]

const obj = [’e’, 's’, '8’];
Object.entries(obj); // [[’0’, 'e’], [’1’, 's’], [’2’, '8’]]

const obj = { 10: 'xxx’, 1: 'yyy’, 3: 'zzz' };
Object.entries(obj); // [[’1’, 'yyy’], [’3’, 'zzz’], [’10’, 'xxx’]]
Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]

浏览器支持

浏览器支持

Object.getOwnPropertyDescriptors

getOwnPropertyDescriptors 方法返回一指定对象自己所有的属性内容,并且属性内容只是自身直接定义的,而不是从object的原型继承而来的。

定义

Object.getOwnPropertyDescriptors(obj)

obj 是指目标对象,这个方法返回的值可能是 configurableenumerablewritablegetsetvalue

例子

const obj = { 
  get es7() { return 777; },
  get es8() { return 888; }
};
Object.getOwnPropertyDescriptors(obj);
// {
//   es7: {
//     configurable: true,
//     enumerable: true,
//     get: function es7(){}, //the getter function
//     set: undefined
//   },
//   es8: {
//     configurable: true,
//     enumerable: true,
//     get: function es8(){}, //the getter function
//     set: undefined
//   }
// }

浏览器支持

浏览器支持

函数参数列表和调用中尾部的逗号

在函数参数尾部使用逗号时不会再触发错误警告(SyntaxError)

例子

function es8(var1, var2, var3,) {
  // ...
}

或者在函数调用中使用:

es8(10, 20, 30,);

这个特征的灵感来自 literals 对象和数组([10, 20, 30,] 和 {x: 1,})。

Async functions

async function 定义一个能够返回 AsyncFunction 对象的异步函数,从内部看来,异步函数更像是一个 generators,但是却不能被转换成generator Function

例子

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}
async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}
sayHello();

sayHello 函数将在两秒后打印出:Hello, es8

console.log(1);
sayHello();
console.log(2);

现在打印结果是:

1 // immediately
2 // immediately
Hello, es8 // after 2 seconds

这是因为 sayHello 函数不会阻止console方法

另外要注意的是只有在使用 async 关键字的函数中, async function 返回的 promise 和 await 关键字才能被使用。

浏览器支持

浏览器支持

总结

JavaScript 一直在不断的更新和进步,而这些新增的功能是经过深思熟虑的结果。在最后阶段,这些功能由TC39委员会确定并且由核心开发人员完成。大多数功能现在都能够使用 TypeScript、browsers 或者其他的 polyfills 实现,现在就开始使用吧!

注:关于原文中的 Shared memory and atomics 和 And one for the next year in ES9 — Lifting template literal restriction 部分没有做翻译,需要了解的同学可以通过原文地址来阅读。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,051评论 8 25
  • 如果有人摔断了胳膊,大部分人都知道接下来该怎么做;但却很少有人知道,如果有人伤了心,你该如何帮助他。于是乎,“过来...
    金桐书页阅读 759评论 6 7
  • 口红,几乎每个女人多多少少都有,但是也总有那么几只色号非常鸡肋,买来后又觉得不好看,或者太油太干,或者觉得过时。 ...
    毛炸组合阅读 1,552评论 0 0
  • 育珍君,大学同学,北京青年政治学院对外汉语教师,平时时有微信互动。2017年端午假前一天尚能外出吃樱桃,一夕之后,...
    鶑鵅阅读 600评论 2 0