ES6 基礎(chǔ)語法

ES6

ES6介紹

ECMAScript 6.0 是 JavaScript 語言的下一代標(biāo)準(zhǔn)仲吏,已經(jīng)在 2015 年 6 月正式發(fā)布了也叫ECMAScript 2015。它的目標(biāo)报嵌,是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序玻熙,成為企業(yè)級(jí)開發(fā)語言

let 和 const 命令

let

ES6 新增了let命令叉庐,用來聲明變量。它的用法類似于var瑞凑,但是所聲明的變量末秃,只在let命令所在的代碼塊內(nèi)有效。

  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i);
// ReferenceError: i is not defined
const 常量

const聲明一個(gè)只讀的常量拨黔。一旦聲明蛔溃,常量的值就不能改變

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

-------------------------------------------------
const foo = {};

// 為 foo 添加一個(gè)屬性,可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個(gè)對(duì)象篱蝇,就會(huì)報(bào)錯(cuò)
foo = {}; // TypeError: "foo" is read-only

變量的解構(gòu)賦值

數(shù)組的解構(gòu)
let a = 1;
let b = 2;
let c = 3;

ES6 允許寫成下面這樣贺待。
let [a, b, c] = [1, 2, 3];
對(duì)象的解構(gòu)賦值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
// foo與bar  必須與對(duì)對(duì)象內(nèi)部的屬性名相同 不計(jì)順序
模板字符串
let place = "world"
//通過``使用模板字符串  用${  }插入變量
let msg = `Hello, ${place}`; //Hollo,world

對(duì)象的擴(kuò)展

屬性的簡(jiǎn)潔表示法

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

--------------------------------------
function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

除了屬性簡(jiǎn)寫,方法也可以簡(jiǎn)寫零截。

const o = {
  method() {
    return "Hello!";
  }
};
// 等同于
const o = {
  method: function() {
    return "Hello!";
  }
};

------------------------------------------
let birth = '2000/01/01';
const Person = {
  name: '張三',
  //等同于birth: birth
  birth,
  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }
};

函數(shù)的擴(kuò)展

函數(shù)的擴(kuò)展 ES6 允許使用“箭頭”(=>)定義函數(shù)麸塞。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭頭函數(shù)的代碼塊部分多于一條語句,就要使用大括號(hào)將它們括起來涧衙,并且使用return語句返回哪工。

var sum = (num1, num2) => { return num1 + num2; }

箭頭函數(shù)有幾個(gè)使用注意點(diǎn)
  • 函數(shù)體內(nèi)的this對(duì)象,就是定義時(shí)所在的對(duì)象弧哎,而不是使用時(shí)所在的對(duì)象
  • 不可以當(dāng)作構(gòu)造函數(shù)雁比,也就是說,不可以使用new命令撤嫩,否則會(huì)拋出一個(gè)錯(cuò)誤
  • 不可以使用arguments對(duì)象偎捎,該對(duì)象在函數(shù)體內(nèi)不存在。如果要用序攘,可以用 rest 參數(shù)代替茴她。
  • 第一點(diǎn)尤其值得注意。this對(duì)象的指向是可變的程奠,但是在箭頭函數(shù)中丈牢,它是固定的

Promise

Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大瞄沙。它由社區(qū)最早提出和實(shí)現(xiàn)己沛,ES6 將其寫進(jìn)了語言標(biāo)準(zhǔn)慌核,統(tǒng)一了用法,原生提供了Promise對(duì)象申尼。

基本用法 ES6 規(guī)定遂铡,Promise對(duì)象是一個(gè)構(gòu)造函數(shù),用來生成Promise實(shí)例晶姊。下面代碼創(chuàng)造了一個(gè)Promise實(shí)例。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

async/ awite

ES2017 標(biāo)準(zhǔn)引入了 async 函數(shù)伪货,使得異步操作變得更加方便们衙。async 函數(shù)是什么?一句話碱呼,它就是 Generator 函數(shù)的語法糖蒙挑。

基本用法

async函數(shù)返回一個(gè) Promise 對(duì)象,可以使用then方法添加回調(diào)函數(shù)愚臀。當(dāng)函數(shù)執(zhí)行的時(shí)候忆蚀,一旦遇到await就會(huì)先返回,等到異步操作完成姑裂,再接著執(zhí)行函數(shù)體內(nèi)后面的語句馋袜。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);
上面代碼指定 50 毫秒以后,輸出hello world舶斧。

返回 Promise 對(duì)象
async function f() {
  return 'hello world';
}

f().then(v => console.log(v))
// "hello world"

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末欣鳖,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子茴厉,更是在濱河造成了極大的恐慌泽台,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件矾缓,死亡現(xiàn)場(chǎng)離奇詭異怀酷,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)嗜闻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蜕依,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人泞辐,你說我怎么就攤上這事笔横。” “怎么了咐吼?”我有些...
    開封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵吹缔,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我锯茄,道長(zhǎng)厢塘,這世上最難降的妖魔是什么茶没? 我笑而不...
    開封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮晚碾,結(jié)果婚禮上抓半,老公的妹妹穿的比我還像新娘。我一直安慰自己格嘁,他們只是感情好笛求,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著糕簿,像睡著了一般探入。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上懂诗,一...
    開封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天蜂嗽,我揣著相機(jī)與錄音,去河邊找鬼殃恒。 笑死植旧,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的离唐。 我是一名探鬼主播病附,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼亥鬓!你這毒婦竟也來了胖喳?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤贮竟,失蹤者是張志新(化名)和其女友劉穎丽焊,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咕别,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡技健,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了惰拱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片雌贱。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖偿短,靈堂內(nèi)的尸體忽然破棺而出欣孤,到底是詐尸還是另有隱情,我是刑警寧澤昔逗,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布降传,位于F島的核電站,受9級(jí)特大地震影響勾怒,放射性物質(zhì)發(fā)生泄漏婆排。R本人自食惡果不足惜声旺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望段只。 院中可真熱鬧腮猖,春花似錦赞枕、人聲如沸澈缺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽谍椅。三九已至,卻和暖如春古话,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背锁施。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工陪踩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人悉抵。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓肩狂,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親姥饰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子傻谁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

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

  • [TOC] 參考阮一峰的ECMAScript 6 入門參考深入淺出ES6 let和const let和const都...
    郭子web閱讀 1,783評(píng)論 0 1
  • 以下內(nèi)容是我在學(xué)習(xí)和研究ES6時(shí),對(duì)ES6的特性列粪、重點(diǎn)和注意事項(xiàng)的提取审磁、精練和總結(jié),可以做為ES6特性的字典岂座;在本...
    科研者閱讀 3,133評(píng)論 2 9
  • 1态蒂、新的聲明方式 以前我們?cè)诼暶鲿r(shí)只有一種方法,就是使用var來進(jìn)行聲明费什,ES6對(duì)聲明的進(jìn)行了擴(kuò)展钾恢,現(xiàn)在可以有三種...
    令武閱讀 1,011評(píng)論 0 7
  • 有時(shí)候制定雄偉的計(jì)劃之所以會(huì)失敶耱健!是因?yàn)楸疚以谧魉睿?科普一下稿黍,弗洛伊德把人分為本我(即唯樂主義疹瘦,追求舒適、快樂巡球、...
    軟妹子的日常閱讀 183評(píng)論 0 0
  • WIN版本REDIS下載 https://github.com/MicrosoftArchive/redis/re...
    LAMYMAY閱讀 162評(píng)論 0 0