ES2016-ES2017入門新特性

了解語(yǔ)言的新特性是非常重要的一件事。之前一直都搞不太明白ES6之后藤违,JS版本命名的規(guī)范阔籽。網(wǎng)上很多人也沒有弄得太清楚湿诊。在ES6之后,ECMAScript委員會(huì)決定換一種命名方式璧亚,也就是以年份來命名。現(xiàn)在我也簡(jiǎn)單總結(jié)了一下一些新的規(guī)范的內(nèi)容,至于具體的提案大家可以在github上看到相關(guān)內(nèi)容框喳。

具體提案

Array.prototype.includes

本質(zhì):語(yǔ)法糖

年份:2016

Array.prototype.includes 判斷數(shù)組是否包含對(duì)應(yīng)的值。

原本寫法


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

新寫法


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

Exponentiation Operator

本質(zhì):語(yǔ)法糖

年份:2016

Exponentiation Operator 冪運(yùn)算符厦坛。計(jì)算冪運(yùn)算五垮。

原本寫法


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

新寫法


let mi = 2 ** 3;
// 8

冪運(yùn)算符號(hào),更便捷的寫法杜秸,也是和其他語(yǔ)言接軌放仗。

Object.values / Object.entries

本質(zhì):語(yǔ)法糖

年份:2017

Object.values / Object.entries Object對(duì)象上的兩個(gè)方法,類似于Object.keys撬碟。返回的都是相應(yīng)的數(shù)組诞挨。

String.prototype.padStart / String.prototype.padEnd

年份:2017

String.prototype.padStart / String.prototype.padEnd 在String原型上新添加了兩個(gè)方法呢蛤。提案上說惶傻,因?yàn)檫@兩個(gè)方法用的很多,但是現(xiàn)在很多實(shí)現(xiàn)實(shí)際上很低效其障。因此很有必要提出银室。同時(shí),原本提案叫padLeft和padRight之后的一次會(huì)議修改成現(xiàn)在的名字。

效果很簡(jiǎn)單就是蜈敢,給字符串填充字符達(dá)到指定長(zhǎng)度辜荠,默認(rèn)填充的是空格。同時(shí)注意扶认,他返回的是一個(gè)新的字符串而不是在原本字符串上進(jìn)行修改侨拦。另一點(diǎn),第一個(gè)參數(shù)是maxLength辐宾,所以當(dāng)你的填充字符是多個(gè)的時(shí)候狱从。他只會(huì)填充到指定長(zhǎng)度,不會(huì)在繼續(xù)填充了叠纹。

// 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) 返回指定對(duì)象 obj 上自有屬性對(duì)應(yīng)的屬性描述符季研。這個(gè)方法的引入是為了解決兩個(gè)對(duì)象之間復(fù)制的問題。原有的Object.assign方法使用了簡(jiǎn)單的get和set方法來復(fù)制其鍵為key的屬性誉察,這就導(dǎo)致了對(duì)象的一些屬性沒有辦法復(fù)制(比如Object.defineProperties方法操作的那些)与涡。比如getter,setter,不可寫,枚舉等屬性就無法被Object.assign復(fù)制持偏。

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 } }

拷貝對(duì)象屬性

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(尾隨逗號(hào))

年份:2017

尾隨逗號(hào)驼卖,意思是允許在函數(shù)參數(shù)和函數(shù)調(diào)用時(shí)參數(shù)最后寫一個(gè)逗號(hào)。這主要是因?yàn)閰?shù)列表很多時(shí)候都會(huì)在格式化時(shí)鸿秆,把參數(shù)列表格式化成一行一行的酌畜。而這樣就導(dǎo)致在你需要添加一個(gè)新參數(shù)的時(shí)候,需要修改兩行卿叽。這就會(huì)在git等版本管理系統(tǒng)當(dāng)中造成你修改了兩行的情況桥胞。因此加入了這個(gè)新的特性來優(yōu)化。

async/await

本質(zhì):語(yǔ)法糖

年份:2017

async/await 函數(shù)考婴,本質(zhì)上就是Promise的一個(gè)語(yǔ)法糖贩虾,能夠讓你更順暢的去寫Promise。同時(shí)也能讓你很簡(jiǎn)單的通過try/catch進(jìn)行錯(cuò)誤處理沥阱。

原寫法

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

這樣的寫法雖然比原來的回調(diào)地獄要好很多了缎罢,但是依然不夠直觀。當(dāng)我們有了async/await函數(shù)進(jìn)行配合的時(shí)候考杉,我們就能更輕松的編寫異步函數(shù)了屁使。

新寫法

async function doSomething() {
  const result = await getDataFromNet(); //從網(wǎng)絡(luò)獲取
  return result;
}

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

值得注意的是,要使用async標(biāo)記的函數(shù)一定要在前面加await奔则,而要用await關(guān)鍵字蛮寂,一定要在async函數(shù)中。

本質(zhì)上async函數(shù)返回的就是一個(gè)Promise的對(duì)象易茬,你如果用await那么拿到的就是他resolve的值酬蹋,如果沒有用await那么你拿到的就是Promise他本身及老。因此,是可以配合使用Promise的相關(guān)方法的范抓,比如骄恶。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的多線程相關(guān)的僧鲁,為了實(shí)現(xiàn)線程間的數(shù)據(jù)交換,共享內(nèi)存象泵,原子操作寞秃。很復(fù)雜,感興趣的請(qǐng)看這篇博文吧:
SharedArrayBuffer and Atomics - Web 的多線程并發(fā)編程

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末偶惠,一起剝皮案震驚了整個(gè)濱河市春寿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌忽孽,老刑警劉巖绑改,帶你破解...
    沈念sama閱讀 217,734評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異兄一,居然都是意外死亡厘线,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門出革,熙熙樓的掌柜王于貴愁眉苦臉地迎上來造壮,“玉大人,你說我怎么就攤上這事蹋盆》驯。” “怎么了硝全?”我有些...
    開封第一講書人閱讀 164,133評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵栖雾,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我伟众,道長(zhǎng)析藕,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評(píng)論 1 293
  • 正文 為了忘掉前任凳厢,我火速辦了婚禮账胧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘先紫。我一直安慰自己治泥,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6 392
  • 文/花漫 我一把揭開白布遮精。 她就那樣靜靜地躺著居夹,像睡著了一般败潦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上准脂,一...
    開封第一講書人閱讀 51,462評(píng)論 1 302
  • 那天劫扒,我揣著相機(jī)與錄音,去河邊找鬼狸膏。 笑死沟饥,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的湾戳。 我是一名探鬼主播贤旷,決...
    沈念sama閱讀 40,262評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼院塞!你這毒婦竟也來了遮晚?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,153評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤拦止,失蹤者是張志新(化名)和其女友劉穎县遣,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體汹族,經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡萧求,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了顶瞒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片夸政。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖榴徐,靈堂內(nèi)的尸體忽然破棺而出守问,到底是詐尸還是另有隱情,我是刑警寧澤坑资,帶...
    沈念sama閱讀 35,635評(píng)論 5 345
  • 正文 年R本政府宣布耗帕,位于F島的核電站,受9級(jí)特大地震影響袱贮,放射性物質(zhì)發(fā)生泄漏仿便。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3 329
  • 文/蒙蒙 一攒巍、第九天 我趴在偏房一處隱蔽的房頂上張望嗽仪。 院中可真熱鬧,春花似錦柒莉、人聲如沸闻坚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)窿凤。三九已至搀擂,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間卷玉,已是汗流浹背哨颂。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留相种,地道東北人威恼。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像寝并,于是被迫代替她去往敵國(guó)和親箫措。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • ES7新特性 1.Array.prototype.includes()方法 在 ES6 中我們有 String.p...
    牧瀬紅莉棲_閱讀 685評(píng)論 0 0
  • 原文連接:https://blog.csdn.net/sinat_17775997/article/details...
    小豆soybean閱讀 4,256評(píng)論 0 7
  • 最近我寫了一篇博客文章,甚至做一篇關(guān)于ES6/ES2015在線課程椭豫。你猜怎么樣?TC39-JavaScript最強(qiáng)...
    sunnyRube閱讀 1,689評(píng)論 1 2
  • 如果說青春是一條涓涓細(xì)流旨指,那么在經(jīng)歷了曲折赏酥、改道、暗礁谆构、險(xiǎn)灘之后裸扶,青年的我定可以匯集成一條波瀾壯闊的大河,讓...
    何二公子hcy閱讀 251評(píng)論 0 0
  • 人生是一個(gè)歷程低淡,既要追求成功的結(jié)果姓言,又要注重過程的精彩瞬项! 每個(gè)人都需要有一個(gè)良好的心態(tài)面對(duì)每天的工作和生活蔗蹋。好心態(tài)...
    急急如李雷閱讀 624評(píng)論 5 5