es6特性

1 let const

1.1 let

let 聲明的變量是在其塊級作用域起作用,與 var 相似。二者之間最主要的區(qū)別在于 var 聲明的變量的作用域是整個封閉函數(shù)洲敢。

示例1:let 對比 var

var a = 5;
var b = 10;

if (a === 5) {
  let a = 4; // a 作用域是 if 代碼塊內(nèi)败玉;
  var b = 1; // b 作用域是 整個函數(shù);

  console.log(a);  // 4
  console.log(b);  // 1
} 

console.log(a); // 5
console.log(b); // 1

let的作用域是塊疫铜,而var的作用域是函數(shù)

示例2:let 在循環(huán)中

for (let i = 0; i < 10; i++) {
  console.log(i); // 0, 1, 2, 3, 4 ... 9
}

console.log(i); // i is not defined

可以用 let 來代替 var 茂浮,在 for 定義塊中使用塊級變量.

1.2 const

const 是用來聲明常用的,常量的值不能通過重新賦值來改變壳咕,并且不能重新聲明货矮。

const number = 42;

try {
  number = 99;
} catch(err) {
  console.log(err); // TypeError: Assignment to constant variable.
}

console.log(number); // 42

2 字符串模板

以前的寫法:

$("#content").append(
  "我是" + obj.name + "</b> " +
  "的爸爸, " +
  "今年" + obj.age + "歲!"
);

我們要用一堆的'+'號來連接文本與變量,而使用ES6的新特性模板字符串``(頓號)后份蝴,我們可以直接這么來寫:

$("#content").append(`
  我是${obj.name} 
  的爸爸, 
  今年${obj.age}歲!
`);

使用用${}來引用變量六剥,而且所有的空格和縮進(jìn)都會被保留輸出。

3 箭頭函數(shù)

3.1 箭頭函數(shù)與普通函數(shù)對比:

function show(a) { return a } ;
對應(yīng)箭頭函數(shù)寫法:
let show = a => a;  


function show(a,b) { return a+b } ;
對應(yīng)箭頭函數(shù)寫法:
let show = (a, b) => a+b;  


function show() { return 'welcome' } ;
對應(yīng)箭頭函數(shù)寫法:
let show = () => 'welcome';  


function show() { alert(1); return 'hi' } ;
對應(yīng)箭頭函數(shù)寫法:
let show = () => { alert(1); return 'hi' }; 

3.2 this 說明

// 沒有獨立作用域
let obj = {
  commonFn: function () {
    console.log(this); // 普通函數(shù)庞呕,this指向調(diào)用函數(shù)新翎。
  },
  arrowFn: () => {
    console.log(this); // 箭頭函數(shù),沒有獨立作用域住练,與 obj 所在的作用域相同地啰。
  }
}

obj.commonFn(); // this 指向 obj 作用域;
obj.arrowFn(); // this 指向 obj 所在作用域讲逛,window亏吝。

結(jié)果

4 Promise

  • 就是一個對象,用來傳遞和處理異步操作的數(shù)據(jù)
  • 狀態(tài):
 pending(等待)  →  Resolve(成功)
                 →  Reject(失斦祷臁)

promise 的狀態(tài)只能從 pending 到 resolve蔚鸥,或者從 pending 到reject。

4.1 Promise常見結(jié)構(gòu)

new Promise((resolve, reject) => {
  $.ajax({
    url: 'xxx',
    type: 'post',
    success: (result) => {
      resolve(result);
    },
    error: (err) => {
      reject(err);
    }
  });
}).then((result) => {
  console.log("成功", result);
}, (err) => {
  console.log("失敗", err);
});

4.2 promise鏈?zhǔn)秸{(diào)用

let promiseFn1 = new Promise((resolve, reject) => {
  $.ajax({
    url: 'xxx',
    type: 'post',
    success: (result) => {
      resolve(result);
    },
    error: (err) => {
      reject(err);
    }
  });
});

let promiseFn2 = new Promise((resolve, reject) => {
  $.ajax({
    url: 'xxx',
    type: 'post',
    success: (result) => {
      resolve(result);
    },
    error: (err) => {
      reject(err);
    }
  });
});

promiseFn1.then((result) => {
  console.log("promiseFn1 成功被調(diào)用", result);
  return promiseFn2; // 這里返回的是第二個 promiseFn2 P碓摺V古纭!
}).then((result) => {
  console.log("promiseFn2 成功被調(diào)用");
});


4.3 promise使用

4.3.1 then

then基礎(chǔ)用法:

var p1 = new Promise(function (resolve, reject) {
  resolve('1');
  // reject('2');
});
p1.then(function (val) {
  alert('resolve混聊,成功調(diào)用函數(shù)' + val);
}, function (val) {
  alert('reject弹谁,失敗調(diào)用函數(shù)' + val);
});


then 鏈?zhǔn)秸{(diào)用:

var p1 = new Promise(function (resolve, reject) {
  resolve(1);
});
p1.then(function (val) {
  console.log(val); // 1
  return val + 1; // 這里返回的值,給下一次then調(diào)用
}, function (val) {
  alert('reject句喜,失敗調(diào)用函數(shù)' + val);
}).then(function (value) { // then鏈?zhǔn)秸{(diào)用
  console.log(value); // 2
})

then ajax的應(yīng)用:重要的是思想

function ajax(url, fnSucc, fnFail) {
  let oAjax = new XMLHttpRequest();
  oAjax.open('GET', url, true);
  oAjax.send();
  oAjax.onload = function () {
    if (oAjax.readyState == 4 && oAjax.status == 200) {
      fnSucc(oAjax.responseText);
    } else {
      fnFail(oAjax.status);
    }
  }
}

let p1 = new Promise(function (resolve, reject) {
  ajax("url", function (result) { // 進(jìn)行ajax的調(diào)用
    resolve(result);
  }, function (result) {
    reject(result);
  })
});
p1.then(function (val) {
  console.log('成功' + val);
}, function (val) {
  console.log('失敗' + val);
});


4.3.2 catch(用來捕獲錯誤)

var p1 = new Promise(function (resolve, reject) {
  resolve('成功了');
});
p1.then(function (val) {
  console.log(val); // 成功了
  throw '發(fā)生錯誤了';
}).catch(function (e) {
  console.log(e); // 發(fā)生錯誤了
});


4.3.3 all

用于將多個promise對象预愤,組合、包裝成一個全新的promise對象咳胃。
Promise.all([p1, p2, p3...])植康;所有的promise成功了,才能算是成功展懈,否則向图,只要有一個失敗了泳秀,就是失敗。

var p1 = Promise.resolve(1); // resolve 成功
var p2 = Promise.reject(2); // reject 失敗

Promise.all([true, p1]).then(function (val) {
  console.log(val); // 輸出: 數(shù)組 [true, 1]
}, function (val) {
  console.log("失敗了" + val);
});

Promise.all([true, p1, p2]).then(function (val) {
  console.log("成功了" + val);
}, function (val) {
  console.log("失敗了" + val); // 輸出: 失敗了2
});


4.3.4 race

哪個promise先返回榄攀,就使用哪個

var p1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('one');
  }, 500);
});
var p2 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('two');
  }, 100);
});

Promise.race([p1, p2]).then(function (val) {
  console.log("成功了" + val); // 成功了two
});


4.3.5 reject

Promise.reject() -- 生成一個錯誤的promise

4.3.6 resolve

Promise.resolve() -- 生成一個成功的promise

5 對象

5.1 對象字面量的定義寫法

5.1.1 es5 定義對象字面量的寫法:

var name = "xiaoming",
  age = 1;
var obj = {
  name: name,
  age: 2,
  getName: function () {
    return this.name;
  },
  getAge: function () {
    return this.age;
  }
}

console.log(obj.getName()); // 小明
console.log(obj.getAge()); // 2


5.1.2 es6 定義對象字面量的寫法

let name = "xiaoming",
  age = 1;
let obj = {
  name, // 變量名可以直接使用對象的屬性名稱
  age: 2,
  getName() { // 對象里的方法可以簡寫
    return this.name;
  },
  getAge() {
    return this.age;
  }
}

console.log(obj.getName()); // xiaoming
console.log(obj.getAge()); // 2


5.2 單例模式:json key--value 簡寫

var name = 'abc';
var age = 11;
var person = {
  name,
  age,
  showName: () => {
    alert(this.name); // 輸出:abc
  },
  showAge: () => {
    alert(this.age);
  }
}
person.showName(); // 箭頭函數(shù) this 指向跟 person 同級的作用域嗜傅, window


5.3 面向?qū)ο?/h3>

5.3.1原型繼承寫法

// 又是類,又是構(gòu)造函數(shù)
function Person(name, age) {  
  this.name = name;
  this.age = age;
}
Person.prototype.showName = function () {
  return this.name;
}
Person.prototype.showAge = function () {
  return this.age;
}

// (原型)繼承  子類.prototype = new 父類()
function Worker(name, age) {
  Person.apply(this, arguments);
}
Worker.prototype = new Person(); // 子類.prototype = new 父類()

var p = new Person('abc', 11);
alert(p.showAge()); // 11

var w = new Worker('abcd', 191);
alert(w.showAge()); // 191


(原型)繼承 子類.prototype = new 父類();

5.3.2 類和構(gòu)造函數(shù)

class Person { // 類
  constructor(name, age) { //構(gòu)造函數(shù)
    this.name = name;
    this.age = age;
  }
  showName() {
    return this.name;
  }
  showAge() {
    return this.age;
  }
}
var p = new Person('abc', 121);
alert(p.showAge()); //121


5.3.3 繼承

// 父類
class Person { // 類
  constructor(name, age) { //構(gòu)造函數(shù)
    this.name = name;
    this.age = age;
  }
  showName() {
    return this.name;
  }
  showAge() {
    return this.age;
  }
}
var p = new Person('abc', 121);
alert(p.showAge()); //121

// 繼承檩赢,子類繼承父類
class Worker extends Person {
  constructor(name, age, job = '賣報') { // 默認(rèn)值
    super(name, age); // 調(diào)用父類的構(gòu)造函數(shù)
    this.job = job;
  }
  showJob() {
    return this.job;
  }
}
var w = new Worker('abc', 11);
alert(w.showAge()); // 11
alert(w.showJob()); // 賣報



5.3.4 對象應(yīng)用舉例

// 模擬隊列
class Queue {
  constructor(content = []) {
    this._queue = [...content];
  }
  shift() {
    var val = this._queue[0];
    this._queue.shift(); // 這個才是重要的吕嘀,模仿刪除第一個元素
    return val; // 返回刪除的元素值
  }
  push(n) {
    this._queue.push(n); // 這個才是重要的
    return this._queue.length; // 返回新增后數(shù)組長度
  }
}
let q = new Queue([1, 2, 3, 4]);
q.shift();
q.push(5);
console.log(q._queue);


6 ES6模塊化

以前:seajs、requirejs

6.1 如何定義導(dǎo)出贞瞒、導(dǎo)入模塊

6.1.1 導(dǎo)出模塊

// aa.js
const a = 11;
export default a


6.1.2 導(dǎo)入模塊

// bb.js:
import modA from './aa.js'
alert(modA) // 11

導(dǎo)入和導(dǎo)出模塊使用 export 和 import 關(guān)鍵字偶房。

6.2 導(dǎo)出導(dǎo)入函數(shù)

// aa.js
const a = 12;
export default a;


// bb.js
const b = 2;
export default b;


// s_sum.js
import modA from './aa.js';
import modB from './bb.js';

export default function s_sum() {
  return modA + modB;
};


// index.js
import sumMod from './s_sum';
alert(sumMod()); // 導(dǎo)出來的模塊是函數(shù)


6.3 導(dǎo)出、導(dǎo)入多個模塊

6.3.1 導(dǎo)出多個模塊

// aa.js:使用對象導(dǎo)出多個模塊
const a = 12;
const b = 13;
export default {a, b}

6.3.2 導(dǎo)入多個模塊

// bb.js:引用
import c from './aa.js';
var a = c.a;
var b = c.b;

6.4 默認(rèn)導(dǎo)出军浆、導(dǎo)入模塊

6.4.1 對比使用命名導(dǎo)出

6.4.1.1 使用命名導(dǎo)出
// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
var graph = {
    options: {
        color:'white',
        thickness:'2px'
    },
    draw: function() {
        console.log('From graph draw function');
    }
}
export { cube, foo, graph };


6.4.1.2 使用命名導(dǎo)入
import { cube, foo, graph } from 'my-module';
graph.options = {
  color: 'blue',
  thickness: '3px'
};
graph.draw();
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888


6.4.2 默認(rèn)導(dǎo)出棕洋、導(dǎo)入

6.4.2.1 默認(rèn)導(dǎo)出
// module "my-module.js"
export default function cube(x) {
  return x * x * x;
}

6.4.2.2 默認(rèn)導(dǎo)入
// module "my-module.js"
import cube from 'my-module';
console.log(cube(3)); // 27?????

說明:

import a, {b, c} from mode;

  • 不用大括號包起來的導(dǎo)入模塊 a,表示是 mode 中用 export default a 導(dǎo)出的默認(rèn)模塊乒融;
  • b掰盘、c 是 export 導(dǎo)出的模塊,不是默認(rèn)mode中的默認(rèn)模塊赞季。

7 常見知識點

7.1 超鏈接(三個點...)應(yīng)用

function show(...args) {
  args.push(4);
  console.log(args);
}
show(1, 2, 3);


7.2 解構(gòu)和釋構(gòu)

const data = [...this.state.gData];
等同于:
const { gData } = this.state;
const data = [...gData];

如果你理解上面代碼的意思愧捕,那解構(gòu)和釋構(gòu)基本就算過關(guān)了。

7.3 循環(huán)嵌套

let values = [1, 2, 3];
let str = `<ul>${values.map(value => `<li>值為:${value}</li>`).join('')}</ul>`

console.log(str);

結(jié)果

7.4 復(fù)制數(shù)組

7.4.1 for循環(huán)

let arr = [1, 2, 3];
let arr2 = [];
for (let i = 0; i < arr.length; i++) {
  arr2[i] = arr[i]
}

console.log(arr, arr2);
arr2.pop();
console.log(arr, arr2);
console.log(arr === arr2);

結(jié)果

7.4.2 Array.from(arr)

let arr = [1, 2, 3];
let arr2 = Array.from(arr);

console.log(arr, arr2);
arr2.pop();
console.log(arr, arr2);
console.log(arr === arr2);

結(jié)果

7.4.3 超鏈接(三個點...)

let arr = [1, 2, 3];
let arr2 = [...arr];

console.log(arr, arr2);
arr2.pop();
console.log(arr, arr2);
console.log(arr === arr2);

結(jié)果

7.5 循環(huán)

7.5.1 普通 for

let arr = ['apple', 'bannel', 'cat'];
for (let i in arr) {
  console.log(i); // 0, 1, 2 索引
}

7.5.2 for in

// 數(shù)組:
let arr = ['apple', 'bannel', 'cat'];
for (let i in arr) {
  console.log(i); // 0, 1, 2 索引
}

// json
var json = { 'a': 'apple', 'b': 'bannel', 'c': 'cat' };
for (let i in json) {
  console.log(i); // a, b, c 索引
}

7.5.3 for of

let arr = ['apple', 'bannel', 'cat'];
for (let i of arr) {
  console.log(i); // 'apple', 'bannel', 'cat' 值
}

for of 可以循環(huán)數(shù)組申钩,但是不能循環(huán) json 對象次绘,其真正的用途是用于循環(huán) map 對象。

7.6 Map 對象

和 json 相似撒遣,也是一種key-value形式邮偎,Map對象為了和for of 循環(huán)配合而生的。

7.6.1 Map對象創(chuàng)建义黎、設(shè)置钢猛、獲取和刪除操作

// 創(chuàng)建Map對象
var map = new Map();

// 設(shè)置值
map.set('a', 'apple');
map.set('b', 'bannel');
map.set('c', 'cat');

// 獲取值
map.get('a');

// 刪除
map.delete('a');
console.log(map);

結(jié)果

7.6.2 map 配合 for of

7.6.2.1 方式一

Map 對象

// map 配合 for of
var map = new Map();
// 設(shè)置值
map.set('a', 'apple');
map.set('b', 'bannel');
map.set('c', 'cat');
for (let name of map) {
  console.log(name);
}

結(jié)果
7.6.2.2 方式二

Map 對象

var map = new Map();
// 設(shè)置值
map.set('a', 'apple');
map.set('b', 'bannel');
map.set('c', 'cat');
for (let name of map.entries()) {
  console.log(name);
}

結(jié)果
7.6.2.3 方式三

key - value

var map = new Map();
// 設(shè)置值
map.set('a', 'apple');
map.set('b', 'bannel');
map.set('c', 'cat');

for (let [key, val] of map) {
  console.log(key, val);
}

結(jié)果
7.6.2.4 方式四

獲取 key

var map = new Map();
// 設(shè)置值
map.set('a', 'apple');
map.set('b', 'bannel');
map.set('c', 'cat');

for (let k of map.keys()) { // a,b,c -- key
  console.log(k);
}

7.6.2.5 方式五

獲取 value

var map = new Map();
// 設(shè)置值
map.set('a', 'apple');
map.set('b', 'bannel');
map.set('c', 'cat');

for (let val of map.values()) { // value
  console.log(val);
}

結(jié)果

8 簡單總結(jié)

  • 基礎(chǔ)指令:let、const轩缤;
  • 字符串模板:'${name}xxx';
  • 箭頭函數(shù):value => return value + 1贩绕;
  • promise
  • 面向?qū)ο螅篶lass火的、extends、super淑倾、constructor
  • 模塊化:export馏鹤、import、as娇哆、default
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末湃累,一起剝皮案震驚了整個濱河市勃救,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌治力,老刑警劉巖蒙秒,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異宵统,居然都是意外死亡晕讲,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進(jìn)店門马澈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瓢省,“玉大人,你說我怎么就攤上這事痊班∏诨椋” “怎么了?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵涤伐,是天一觀的道長馒胆。 經(jīng)常有香客問我,道長废亭,這世上最難降的妖魔是什么国章? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮豆村,結(jié)果婚禮上液兽,老公的妹妹穿的比我還像新娘。我一直安慰自己掌动,他們只是感情好四啰,可當(dāng)我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著粗恢,像睡著了一般柑晒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上眷射,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天匙赞,我揣著相機(jī)與錄音,去河邊找鬼妖碉。 笑死涌庭,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的欧宜。 我是一名探鬼主播坐榆,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼冗茸!你這毒婦竟也來了席镀?” 一聲冷哼從身側(cè)響起匹中,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎豪诲,沒想到半個月后顶捷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡跛溉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年焊切,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芳室。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡专肪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出堪侯,到底是詐尸還是另有隱情嚎尤,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布伍宦,位于F島的核電站芽死,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏次洼。R本人自食惡果不足惜关贵,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望卖毁。 院中可真熱鬧揖曾,春花似錦、人聲如沸亥啦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽翔脱。三九已至奴拦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間届吁,已是汗流浹背错妖。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留疚沐,地道東北人暂氯。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像濒旦,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子再登,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2 361

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

  • ES6特性歸納 ES的全稱是ECMAScript尔邓,它是JavaScript的規(guī)格晾剖,JS是ES的一種實現(xiàn)。ES還有J...
    FWHeart閱讀 565評論 0 4
  • JavaScript社區(qū)中的每個人都喜歡新API梯嗽、新語法和新特性——可以更優(yōu)雅齿尽,更智能,更有效的完成重要任務(wù)灯节。ES...
    安石0閱讀 128評論 0 0
  • es6相較之前es5循头,增加了許多新的特性,提高了javascript體驗炎疆,我在es6學(xué)習(xí)和使用的過程中進(jìn)行了紀(jì)錄卡骂。...
    YomonAh閱讀 229評論 0 2
  • 不知道你現(xiàn)在是否也和我一樣翻閱著手機(jī),卻不知道從何讀起形入,我們很無聊全跨,每天重復(fù)同樣一件事情,睜眼亿遂,起床浓若,工作,抱怨幾...
    復(fù)制粘貼再刪除閱讀 501評論 0 0
  • 2017-02-25 四貓先生 蔡老師碌上,我家孩子每天起床我都得叫上好幾遍,平時衣來伸手挽放,飯來張口绍赛,真是愁死我了。 ...
    四貓先生閱讀 317評論 1 2