ES2016-ES2017入门新特性

了解语言的新特性是非常重要的一件事。之前一直都搞不太明白ES6之后,JS版本命名的规范。网上很多人也没有弄得太清楚。在ES6之后,ECMAScript委员会决定换一种命名方式,也就是以年份来命名。现在我也简单总结了一下一些新的规范的内容,至于具体的提案大家可以在github上看到相关内容。

具体提案

Array.prototype.includes

本质:语法糖

年份:2016

Array.prototype.includes 判断数组是否包含对应的值。

原本写法


if(arr.indexOf(el) !== -1){
  // do something
}

新写法


if(arr.includes(el,bl)){
  // do something
}

Exponentiation Operator

本质:语法糖

年份:2016

Exponentiation Operator 幂运算符。计算幂运算。

原本写法


let mi = Math.pow(2,3)
// 8

新写法


let mi = 2 ** 3;
// 8

幂运算符号,更便捷的写法,也是和其他语言接轨。

Object.values / Object.entries

本质:语法糖

年份:2017

Object.values / Object.entries Object对象上的两个方法,类似于Object.keys。返回的都是相应的数组。

String.prototype.padStart / String.prototype.padEnd

年份:2017

String.prototype.padStart / String.prototype.padEnd 在String原型上新添加了两个方法。提案上说,因为这两个方法用的很多,但是现在很多实现实际上很低效。因此很有必要提出。同时,原本提案叫padLeft和padRight之后的一次会议修改成现在的名字。

效果很简单就是,给字符串填充字符达到指定长度,默认填充的是空格。同时注意,他返回的是一个新的字符串而不是在原本字符串上进行修改。另一点,第一个参数是maxLength,所以当你的填充字符是多个的时候。他只会填充到指定长度,不会在继续填充了。

// String.prototype.padStart( maxLength [ , fillString ] )
"liwei".padStart(10);
// "     liwei"
"liwei".padStart(10,"o");
// "oooooliwei"
// String.prototype.padEnd( maxLength [ , fillString ] )
"liwei".padStart(10);
// "liwei     "
"liwei".padStart(10,"o1");
// "liweio1o1o"

Object.getOwnPropertyDescriptors

年份:2017

Object.getOwnPropertyDescriptors(obj) 返回指定对象 obj 上自有属性对应的属性描述符。这个方法的引入是为了解决两个对象之间复制的问题。原有的Object.assign方法使用了简单的get和set方法来复制其键为key的属性,这就导致了对象的一些属性没有办法复制(比如Object.defineProperties方法操作的那些)。比如getter,setter,不可写,枚举等属性就无法被Object.assign复制。

const obj = {
    [Symbol('foo')]: 123,
    get bar() { return 'abc' },
};
console.log(Object.getOwnPropertyDescriptors(obj));

// Output:
// { [Symbol('foo')]:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

拷贝对象属性

const source = {
    set foo(value) {
        console.log(value);
    }
};
console.log(Object.getOwnPropertyDescriptor(source, 'foo'));
// { get: undefined,
//   set: [Function: foo],
//   enumerable: true,
//   configurable: true }


const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
console.log(Object.getOwnPropertyDescriptor(target2, 'foo'));
// { get: undefined,
//   set: [Function: foo],
//   enumerable: true,
//   configurable: true }

Trailing commas in function parameter lists and calls(尾随逗号)

年份:2017

尾随逗号,意思是允许在函数参数和函数调用时参数最后写一个逗号。这主要是因为参数列表很多时候都会在格式化时,把参数列表格式化成一行一行的。而这样就导致在你需要添加一个新参数的时候,需要修改两行。这就会在git等版本管理系统当中造成你修改了两行的情况。因此加入了这个新的特性来优化。

async/await

本质:语法糖

年份:2017

async/await 函数,本质上就是Promise的一个语法糖,能够让你更顺畅的去写Promise。同时也能让你很简单的通过try/catch进行错误处理。

原写法

new Promise((resolve,reject)=>{
  //dosomething
  resolve('1');
}).then((value)=>{
  return value+'2';
}).then((value)=>{
  return value+'3';
}).catch((err)=>{
  console.log(err);
})

这样的写法虽然比原来的回调地狱要好很多了,但是依然不够直观。当我们有了async/await函数进行配合的时候,我们就能更轻松的编写异步函数了。

新写法

async function doSomething() {
  const result = await getDataFromNet(); //从网络获取
  return result;
}

async function doHere() {
  try {
    let a = await doSomething();
    console.log(a);
  } catch (error) {
    console.log(error);
  }
}

值得注意的是,要使用async标记的函数一定要在前面加await,而要用await关键字,一定要在async函数中。

本质上async函数返回的就是一个Promise的对象,你如果用await那么拿到的就是他resolve的值,如果没有用await那么你拿到的就是Promise他本身。因此,是可以配合使用Promise的相关方法的,比如。all,race等方法。

async function logPosts ()  {
    try {
        let user_id = await fetch('/api/users/username')
        let post_ids = await fetch('/api/posts/${user_id}')
        let promises = post_ids.map(post_id => {
            return  fetch('/api/posts/${post_id}')
        }
        let posts = await Promise.all(promises)
        console.log(posts)
    } catch (error) {
        console.error('Error:', error)
    }
}

Shared memory and atomics

年份:2017

这份提案主要是js的多线程相关的,为了实现线程间的数据交换,共享内存,原子操作。很复杂,感兴趣的请看这篇博文吧:
SharedArrayBuffer and Atomics - Web 的多线程并发编程

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

推荐阅读更多精彩内容