ES6知識點總結(jié)

1 let 和 const

let 的作用域與 const 命令相同:只在聲明所在的塊級作用域內(nèi)有效。且不存在變量提升 谦炬。

1.1 let

  • let 所聲明的變量比吭,可以改變。
let a = 123
a = 456 // 正確严肪,可以改變

let b = [123]
b = [456] // 正確史煎,可以改變
  • 什么是塊級作用域谦屑?簡單來說就是大括號產(chǎn)生的作用域。具有塊級作用域的變量只能在塊級作用域中訪問篇梭。

  • var聲明的變量不具有塊級作用域

if(true) {
  let a = 10;
}
console.log(a);// undefined
  • 具有塊級作用域的變量還有一個好處:防止循環(huán)變量變成全局變量
for(var i = 0; i < 2; i++) {
}
console.log(i);// 此時這個i是可以訪問到的氢橙,值為2,這是不合理的恬偷,循環(huán)都已經(jīng)結(jié)束了悍手。
// 如果換成let就不會出現(xiàn)這個問題了。
  • let聲明的變量不存在變量提升
console.log(a);
let a = 10; // undefined

console.log(b);// 11
var b = 11;
  • let聲明的變量具有暫時性死區(qū)特性
var tmp = 123;
if(true) {
// 在塊級作用域中的let關(guān)鍵字的變量就和塊級整體進(jìn)行了綁定袍患,與外面的var聲明的變量沒有關(guān)系了
// 這里的tmp不會去外部查找全局變量tmp坦康,所以此時會報錯
  tmp = 'abc'; // tmp is not defied;
  let tmp;
}

1.2 const

  • const 聲明一個只讀的常量,常量就是值(內(nèi)存地址)不能變化的量。
  • 簡單類型的數(shù)據(jù)(數(shù)值诡延、字符串涝焙、布爾值),不可以變動
  • 同樣具有塊級作用域孕暇,在作用域外部是訪問不到的仑撞。
  • const聲明常量時必須賦初始值,否則會報錯妖滔。
  • const聲明常量對應(yīng)的內(nèi)存地址不可更改隧哮,說白了就是值不能更改。
const a = 123
a = 456 // 報錯座舍,不可改變

let b = [123]
b = [456] // 報錯沮翔,不可以重新賦值,不可改變
  • 復(fù)合類型的數(shù)據(jù)(主要是對象和數(shù)組)曲秉,可以這樣子變動
const a = [123]
a.push(456) // 成功

const b = {}
b.name = 'demo'  // 成功

1.3 不存在變量提升

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

所以 for循環(huán)的計數(shù)器采蚀,就很合適使用 let 命令。

let a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

1.4 推薦

對于 數(shù)值承二、字符串榆鼠、布爾值 經(jīng)常會變的,用 let 聲明亥鸠。

對象妆够、數(shù)組和函數(shù)用 const 來聲明。

// 如經(jīng)常用到的導(dǎo)出 函數(shù)
export const funA = function(){
    // ....
}

2 解構(gòu)(Destructuring)

2.1 數(shù)組

一次性聲明多個變量:

let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

結(jié)合擴(kuò)展運算符:

let [head, ...tail] = [1, 2, 3, 4];
console.log(head) // 1
console.log(tail) // [2, 3, 4]

解構(gòu)賦值允許指定默認(rèn)值:

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a'];
// x='a', y='b'

2.2 對象

解構(gòu)不僅可以用于數(shù)組负蚊,還可以用于對象神妹。

let { a, b } = { a: "aaa", b: "bbb" };
a // "aaa"
b // "bbb"

數(shù)組中,變量的取值由它 排列的位置 決定家妆;而對象中鸵荠,變量必須與 屬性 同名,才能取到正確的值伤极。

對象的解構(gòu)也可以指定默認(rèn)值蛹找。

let {x = 3} = {};
x // 3

let {x, y = 5} = {x: 1};
x // 1
y // 5

2.3 字符串

字符串也可以解構(gòu)賦值嵌赠。這是因為此時,字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象熄赡。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

2.4 用途

  1. 交換變量的值
let x = 1;
let y = 2;

[x, y] = [y, x];
  1. 從函數(shù)返回多個值
// 返回一個數(shù)組

function example() {
  let [a, b, c] = [1, 2, 3]
  return  [a, b, c] 
}
let [a, b, c] = example();

// 返回一個對象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
  1. 函數(shù)參數(shù)的默認(rèn)值
function funA (a = 1, b = 2){
      return a + b;
}

funA(3) // 5 因為 a 是 3, b 是 2
funA(3,3) // 6 因為 a 是 3, b 是 3

  1. 輸入模塊的指定方法

加載模塊時齿税,往往需要指定輸入哪些方法彼硫。解構(gòu)賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

在 utils.js 中:

export const function A (){
    console.log('A')
}

export const function B (){
   console.log('B')
}

export const function C (){
     console.log('C')
}

在 組件中引用時:

import { A, B, C } from "./utils.js" 

//調(diào)用
A() // 輸出 A 

3. 模板字符串(template string)

模板字符串(template string)用反引號(`)標(biāo)識凌箕。

3.1 純字符串

所有模板字符串的空格和換行拧篮,都是被保留的.

console.log(`輸出值為 N, 

換行`)
// "輸出值為 N

換行"

3.2 字符串中加變量

模板字符串中嵌入變量,需要將變量名寫在 ${ } 之中

let x = 1;
let y = 2;

console.log(`輸出值為:${x}`) // "輸出值為:1"
console.log(`輸出值為:${x + y}`) // "輸出值為:3"

3.3 模板字符串之中還能調(diào)用函數(shù)牵舱。

function fn() {
  return "Hello World";
}

console.log(`輸出值為:${fn()}`) // "輸出值為:Hello World"

4. 字符串函數(shù)擴(kuò)展

  • includes():返回布爾值串绩,表示是否找到了參數(shù)字符串。
  • startsWith():返回布爾值芜壁,表示參數(shù)字符串是否在原字符串的頭部礁凡。
  • endsWith():返回布爾值,表示參數(shù)字符串是否在原字符串的尾部慧妄。
let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

這三個方法都支持第二個參數(shù)顷牌,表示開始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
  • repeat(): 表示將原字符串重復(fù)n次塞淹,返回一個新字符串
    'x'.repeat(3); // 'xxx'
    'hello'.repeat(2); // 'hellohello'

5. 數(shù)值擴(kuò)展

5.1 指數(shù)運算符

ES2016 新增了一個指數(shù)運算符(**)窟蓝。

2 ** 2 // 4
2 ** 3 // 8

這個運算符的一個特點是右結(jié)合,而不是常見的左結(jié)合饱普。多個指數(shù)運算符連用時运挫,是從最右邊開始計算的。

// 相當(dāng)于 2 ** (3 ** 2)
2 ** 3 ** 2
// 512

上面代碼中套耕,首先計算的是第二個指數(shù)運算符谁帕,而不是第一個。

指數(shù)運算符可以與等號結(jié)合冯袍,形成一個新的賦值運算符(**=)雇卷。

let a = 1.5;
a **= 2;
// 等同于 a = a * a;

let b = 4;
b **= 3;
// 等同于 b = b * b * b;

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

除了在解構(gòu)中說到的函數(shù)參數(shù)的默認(rèn)值,還有不少經(jīng)常會用到的方法颠猴。

6.1 rest 參數(shù) (剩余參數(shù))

ES6 引入 rest 參數(shù)(形式為...變量名)关划,用于獲取函數(shù)的多余參數(shù),這樣就不需要使用 arguments 對象了翘瓮。rest 參數(shù)搭配的變量是一個數(shù)組贮折,該變量將多余的參數(shù)放入數(shù)組中。

function add(...values) {
  let sum = 0;

  for (let val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面代碼的 add 函數(shù)是一個求和函數(shù)资盅,利用 rest 參數(shù)调榄,可以向該函數(shù)傳入任意數(shù)目的參數(shù)踊赠。

注意,rest 參數(shù)之后不能再有其他參數(shù)(即只能是最后一個參數(shù))每庆,否則會報錯筐带。

// 報錯
function f(a, ...b, c) {
  // ...
}

6.2 箭頭函數(shù)

ES6 允許使用“箭頭”(=>)定義函數(shù)。

  // 箭頭函數(shù)是用來簡化函數(shù)定義語法的
  const fn = () => {
    console.log('我是箭頭函數(shù)');
  }
  // 如果函數(shù)體中只有一句代碼缤灵,且代碼的執(zhí)行結(jié)果就是返回值伦籍,可以省略大括號
  const sum = (a, b) => a + b;   
  const result = sum(2, 10);
  console.log(result);
  
  // 如果形參只有一個,可以省略小括號
  const fn = v => v;
  // 相當(dāng)于
  function fn(v) {
    return v
  }

  // this指向問題
  // 傳統(tǒng)函數(shù)中腮出,誰調(diào)用了函數(shù)帖鸦,函數(shù)內(nèi)部的this就指向誰
  // 但是在箭頭函數(shù)中,箭頭函數(shù)不綁定this關(guān)鍵字胚嘲,箭頭函數(shù)中的this指向的是函數(shù)定義位置的上下文this
  const obj = {name: 'zhangsan'}
  function fn() {
    console.log(this);
    return () => {
      console.log(this);
    }
  }

  const resFn = fn.call(obj);
  resFn();
  // 上面例子中我們將fn的this指向通過call方法指向了obj對象
  // 所以此時打印的第一個this就是obj
  // 此時我們調(diào)用fn返回的就是箭頭函數(shù)
  // 箭頭函數(shù)內(nèi)部沒有自己的this作儿,此時也不是指向window,而是指向函數(shù)定義的上下文馋劈,也就是fn函數(shù)
  // 所以此時的箭頭函數(shù)內(nèi)部打印的this指向的也是obj對象

注意: 函數(shù)體內(nèi)的 this 對象攻锰,就是定義時所在的對象,而不是使用時所在的對象妓雾。

this 對象的指向是可變的口注,但是在箭頭函數(shù)中,它是固定的君珠。

例一:

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

let id = 21;

foo.call({ id: 42 });
// id: 42

上面代碼中寝志,setTimeout 的參數(shù)是一個箭頭函數(shù),這個箭頭函數(shù)的定義生效是在 foo 函數(shù)生成時策添,而它的真正執(zhí)行要等到 100 毫秒后材部。如果是普通函數(shù),執(zhí)行時 this 應(yīng)該指向全局對象window唯竹,這時應(yīng)該輸出 21乐导。但是,箭頭函數(shù)導(dǎo)致 this 總是指向函數(shù)定義生效時所在的對象(本例是{ id: 42})浸颓,所以輸出的是 42物臂。

例二:

  var obj = {
    age: 20,
    say: () => {
      console.log(this.age);
    }
  }
  obj.say();

在上面這個例子中,由于箭頭函數(shù)內(nèi)部沒有this产上,this指向定義者的內(nèi)部棵磷,此時應(yīng)該是obj,但是obj是一個對象晋涣,對象無法產(chǎn)生作用域仪媒,所以此時的this應(yīng)該是指向了window,在window下沒有age谢鹊,所以打印的結(jié)果應(yīng)該是undefined

7. 數(shù)組的擴(kuò)展

擴(kuò)展運算符(spread)是三個點(...)算吩。它好比 rest 參數(shù)的逆運算留凭,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。

7.1 數(shù)組合并的新寫法偎巢。

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并數(shù)組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

7.2 函數(shù)調(diào)用蔼夜。

function add(x, y) {
  return x + y;
}

const numbers = [4, 4];
add(...numbers) // 8

7.3 復(fù)制數(shù)組的簡便寫法。

const a1 = [1, 2];
// 寫法一
const a2 = [...a1];
a2[0] = 2;
a1 // [1, 2]
// 寫法二
const [...a2] = a1;
a2[0] = 2;
a1 // [1, 2]

上面的兩種寫法压昼,a2 都是 a1 的克隆求冷,且不會修改原來的數(shù)組。

7.4 將字符串轉(zhuǎn)為真正的數(shù)組巢音。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

7.5 數(shù)組實例的 entries(),keys() 和 values()

用 for...of 循環(huán)進(jìn)行遍歷尽超,唯一的區(qū)別是 keys() 是對鍵名的遍歷官撼、values() 是對鍵值的遍歷,entries() 是對鍵值對的遍歷似谁。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

7.6 includes()

Array.prototype.includes 方法返回一個布爾值傲绣,表示某個數(shù)組是否包含給定的值,與字符串的 includes 方法類似巩踏。ES2016 引入了該方法秃诵。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

該方法的第二個參數(shù)表示搜索的起始位置,默認(rèn)為 0塞琼。如果第二個參數(shù)為負(fù)數(shù)菠净,則表示倒數(shù)的位置,如果這時它大于數(shù)組長度(比如第二個參數(shù)為 -4彪杉,但數(shù)組長度為 3 )毅往,則會重置為從 0 開始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

8. 對象的擴(kuò)展

8.1 屬性和方法 的簡潔表示法

let birth = '2000/01/01';

const Person = {

  name: '張三',

  //等同于birth: birth
  birth,

  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }

};

8.2 Object.assign()

Object.assign方法用于對象的合并派近,將源對象(source)的所有可枚舉屬性攀唯,復(fù)制到目標(biāo)對象(target)。

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.assign方法的第一個參數(shù)是目標(biāo)對象渴丸,后面的參數(shù)都是源對象侯嘀。

注意,如果目標(biāo)對象與源對象有同名屬性谱轨,或多個源對象有同名屬性戒幔,則后面的屬性會覆蓋前面的屬性。

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.assign 方法實行的是淺拷貝土童,而不是深拷貝溪食。

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

上面代碼中,源對象 obj1 的 a 屬性的值是一個對象娜扇,Object.assign 拷貝得到的是這個對象的引用错沃。這個對象的任何變化栅组,都會反映到目標(biāo)對象上面。

9. Set

  • ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Set枢析,它類似于數(shù)組玉掸,但是成員的值都是唯一的,沒有重復(fù)的值醒叁。

  • Set數(shù)據(jù)結(jié)構(gòu)由于內(nèi)部的值不會重復(fù)司浪,所以我們可以應(yīng)用于電商網(wǎng)站中,用戶搜索關(guān)鍵詞把沼,用戶輸入了相同的關(guān)鍵詞啊易,Set會自動識別,則不會存儲饮睬。

  • Set本身是一個構(gòu)造函數(shù)租谈,創(chuàng)建此構(gòu)造函數(shù)的實例對象就是在生成Set數(shù)據(jù)結(jié)構(gòu)了。

  • Set函數(shù)可以接受數(shù)組作為參數(shù)捆愁,用來初始化:

    const s = new Set([1, 2, 3, 3, 4])

  const s = new Set();
  // Set數(shù)據(jù)結(jié)構(gòu)中有個size屬性割去,代表了在這個數(shù)據(jù)結(jié)構(gòu)中包含了多少值
  console.log(s.size); // 0

  const s2 = new Set(['a', 'b']);
  console.log(s2.size); // 2

Set數(shù)據(jù)結(jié)構(gòu)用于數(shù)組去重

  const s3 = new Set([1, 1, 2, 2]);
  console.log(s3.size);// 2
  // 利用擴(kuò)展運算符將Set數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換成以逗號分隔的零散量
  const ary = [...s3]; // [1, 2]

Set數(shù)據(jù)結(jié)構(gòu)實例方法

  • add(value): 添加某個值,返回Set結(jié)構(gòu)本身
  • delete(value):刪除某個值昼丑,返回一個布爾值呻逆,表示刪除是否成功
  • has(value):返回一個布爾值,表示該值是否為Set的成員
  • clear():清除所有成員菩帝,沒有返回值
  const s = new Set();
  s.add(1).add(2).add(3); // 向Set中添加值
  console.log(s);

  const r = s.delete(2);
  console.log(r); // true 代表刪除成功

  const r1 = s.has(3);// true 代表3是Set成員

  s.clear(); // 沒有返回值咖城,清空Set數(shù)據(jù)的值
  console.log(s.size); // 0

遍歷

  • Set結(jié)構(gòu)的實例與數(shù)組一樣,也擁有forEach()方法呼奢,用于對每個成員進(jìn)行某種操作酒繁,沒有返回值
  const s5 = new Set(['a', 'b', 'c']);
  s5.forEach(value => {
    console.log(value); // a b c
  })

10. Promise 對象

Promise 是異步編程的一種解決方案。

Promise 對象代表一個異步操作控妻,有三種狀態(tài):pending(進(jìn)行中)州袒、fulfilled(已成功)和rejected(已失敗)弓候。

Promise 對象的狀態(tài)改變郎哭,只有兩種可能:從 pending 變?yōu)?fulfilled 和從 pending 變?yōu)?rejected。只要這兩種情況發(fā)生菇存,狀態(tài)就凝固了夸研,不會再變了,會一直保持這個結(jié)果依鸥,這時就稱為 resolved(已定型)

const someAsyncThing = function(flag) {
  return new Promise(function(resolve, reject) {
    if(flag){
        resolve('ok');
    }else{
        reject('error')
    }
  });
};

someAsyncThing(true).then((data)=> {
  console.log('data:',data); // 輸出 'ok'
}).catch((error)=>{
  console.log('error:', error); // 不執(zhí)行
})

someAsyncThing(false).then((data)=> {
  console.log('data:',data); // 不執(zhí)行
}).catch((error)=>{
  console.log('error:', error); // 輸出 'error'
})

上面代碼中亥至,someAsyncThing 函數(shù)成功返回 ‘OK’, 失敗返回 ‘error’, 只有失敗時才會被 catch 捕捉到。

最簡單實現(xiàn):

// 發(fā)起異步請求
    fetch('/api/todos')
      .then(res => res.json())
      .then(data => ({ data }))
      .catch(err => ({ err }));

來看一道有意思的面試題:

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

這道題應(yīng)該考察 JavaScript 的運行機(jī)制的。 首先先碰到一個 setTimeout姐扮,于是會先設(shè)置一個定時絮供,在定時結(jié)束后將傳遞這個函數(shù)放到任務(wù)隊列里面,因此開始肯定不會輸出 1 茶敏。 然后是一個 Promise壤靶,里面的函數(shù)是直接執(zhí)行的,因此應(yīng)該直接輸出 2 3 惊搏。 然后贮乳,Promise 的 then 應(yīng)當(dāng)會放到當(dāng)前 tick 的最后,但是還是在當(dāng)前 tick 中恬惯。 因此向拆,應(yīng)當(dāng)先輸出 5,然后再輸出 4 酪耳。 最后在到下一個 tick浓恳,就是 1 。 答案:“2 3 5 4 1”

11. async 函數(shù)

ES2017 標(biāo)準(zhǔn)引入了 async 函數(shù)葡兑,使得異步操作變得更加方便奖蔓。

async 函數(shù)的使用方式赞草,直接在普通函數(shù)前面加上 async讹堤,表示這是一個異步函數(shù),在要異步執(zhí)行的語句前面加上 await厨疙,表示后面的表達(dá)式需要等待洲守。async 是 Generator 的語法糖

    1. async 函數(shù)內(nèi)部 return 語句返回的值,會成為 then 方法回調(diào)函數(shù)的參數(shù)沾凄。
async function f() {
  return 'hello world';
}

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

上面代碼中梗醇,函數(shù) f 內(nèi)部 return 命令返回的值,會被 then 方法回調(diào)函數(shù)接收到撒蟀。

    1. async 函數(shù)內(nèi)部拋出錯誤叙谨,會導(dǎo)致返回的 Promise 對象變?yōu)?reject 狀態(tài)。拋出的錯誤對象會被 catch 方法回調(diào)函數(shù)接收到保屯。
async function f() {
  throw new Error('出錯了');
}

f().then(
  result => console.log(result),
  error => console.log(error)
)
// Error: 出錯了
    1. async 函數(shù)返回的 Promise 對象手负,必須等到內(nèi)部所有 await 命令后面的 Promise 對象執(zhí)行完,才會發(fā)生狀態(tài)改變姑尺,除非遇到 return 語句或者拋出錯誤竟终。也就是說,只有 async 函數(shù)內(nèi)部的異步操作執(zhí)行完切蟋,才會執(zhí)行 then 方法指定的回調(diào)函數(shù)统捶。 下面是一個例子:
async function getTitle(url) {
  let response = await fetch(url);
  let html = await response.text();
  return html.match(/<title>([\s\S]+)</title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log('完成'))
// "ECMAScript 2017 Language Specification"

上面代碼中,函數(shù) getTitle 內(nèi)部有三個操作:抓取網(wǎng)頁、取出文本喘鸟、匹配頁面標(biāo)題匆绣。只有這三個操作全部完成迷守,才會執(zhí)行 then 方法里面的 console.log。

    1. 在 vue 中兑凿,我們可能要先獲取 token ,之后再用 token 來請求用戶數(shù)據(jù)什么的礼华,可以這樣子用:
methods:{
        getToken() {
            return new Promise((resolve, reject) => {
                this.$http.post('/token')
                    .then(res => {
                        if (res.data.code === 200) {
                           resolve(res.data.data)
                        } else {
                            reject()
                        }
                    })
                    .catch(error => {
                        console.error(error);
                    });
            })
       },
       getUserInfo(token) {
            return new Promise((resolve, reject) => {
                this.$http.post('/userInfo',{
                        token: token
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                           resolve(res.data.data)
                        } else {
                            reject()
                        }
                    })
                    .catch(error => {
                        console.error(error);
                    });
            })
       },
       async initData() {
            let token = await this.getToken()
            this.userInfo = this.getUserInfo(token)
       },
}

12. import 和 export

import 導(dǎo)入模塊咐鹤、export 導(dǎo)出模塊

// example2.js  // 導(dǎo)出默認(rèn), 有且只有一個默認(rèn)
export default const example2 = {
  name : 'my name',
  age : 'my age',
  getName  = function(){  return 'my name' }
}
//全部導(dǎo)入 // 名字可以修改
import people from './example2.js'

-------------------我是一條華麗的分界線---------------------------

// example1.js // 部分導(dǎo)出
export let name  = 'my name'
export let age  = 'my age'
export let getName  = function(){ return 'my name'}

// 導(dǎo)入部分 // 名字必須和 定義的名字一樣祈惶。
import  {name, age} from './example1.js'

//有一種特殊情況,即允許你將整個模塊當(dāng)作單一對象進(jìn)行導(dǎo)入
//該模塊的所有導(dǎo)出都會作為對象的屬性存在
import * as example from "./example1.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

-------------------我是一條華麗的分界線---------------------------

// example3.js  // 有導(dǎo)出默認(rèn), 有且只有一個默認(rèn)扮匠,// 又有部分導(dǎo)出
export default const example3 = {
  birthday : '2018 09 20'
}
export let name  = 'my name'
export let age  = 'my age'
export let getName  = function(){ return 'my name'}

// 導(dǎo)入默認(rèn)與部分
import example3, {name, age} from './example1.js'

總結(jié):

1.當(dāng)用 export default people 導(dǎo)出時捧请,就用 import people 導(dǎo)入(不帶大括號)

2.一個文件里棒搜,有且只能有一個 export default。但可以有多個 export力麸。

3.當(dāng)用 export name 時,就用 import { name }導(dǎo)入(記得帶上大括號)

4.當(dāng)一個文件里闺鲸,既有一個 export default people, 又有多個 export name 或者 export age 時埃叭,導(dǎo)入就用 import people, { name, age } 

5.當(dāng)一個文件里出現(xiàn) n 多個 export 導(dǎo)出很多模塊,導(dǎo)入時除了一個一個導(dǎo)入立镶,也可以用 import * as example

13. Class

對于 Class 益缎,小汪用在 react 中較多。

13.1基本用法:

//定義類
class FunSum {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  sum() {
    console.log( this.x +this.y')
  }
}

// 使用的時候欣范,也是直接對類使用new命令,跟構(gòu)造函數(shù)的用法完全一致妨蛹。
let f = new FunSum(10, 20);
f.sum() // 30

13.2 繼承

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 調(diào)用父類的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 調(diào)用父類的toString()
  }
}

上面代碼中晴竞,constructor 方法和 toString 方法之中,都出現(xiàn)了super關(guān)鍵字颤难,它在這里表示父類的構(gòu)造函數(shù),用來新建父類的 this 對象行嗤。

子類必須在 constructor 方法中調(diào)用 super 方法垛耳,否則新建實例時會報錯。這是因為子類自己的 this 對象栈雳,必須先通過父類的構(gòu)造函數(shù)完成塑造缔莲,得到與父類同樣的實例屬性和方法,然后再對其進(jìn)行加工磺箕,加上子類自己的實例屬性和方法抛虫。如果不調(diào)用 super 方法简僧,子類就得不到 this 對象。

class Point { /* ... */ }

class ColorPoint extends Point {
  constructor() {
  }
}

let cp = new ColorPoint(); // ReferenceError

上面代碼中棉姐,ColorPoint 繼承了父類 Point啦逆,但是它的構(gòu)造函數(shù)沒有調(diào)用 super 方法,導(dǎo)致新建實例時報錯乃坤。

End

面試和工作中用到 ES6 精粹幾乎都在這了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末狱杰,一起剝皮案震驚了整個濱河市厅须,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌错沽,老刑警劉巖眶拉,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件镀层,死亡現(xiàn)場離奇詭異,居然都是意外死亡吴侦,警方通過查閱死者的電腦和手機(jī)坞古,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進(jìn)店門痪枫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人奶陈,你說我怎么就攤上這事吃粒。” “怎么了事示?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵僻肖,是天一觀的道長。 經(jīng)常有香客問我劝堪,道長,這世上最難降的妖魔是什么凡纳? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任帝蒿,我火速辦了婚禮葛超,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘答渔。我一直安慰自己侥涵,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布务豺。 她就那樣靜靜地躺著嗦明,像睡著了一般娶牌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上诗良,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天累榜,我揣著相機(jī)與錄音灵嫌,去河邊找鬼。 笑死猖凛,一個胖子當(dāng)著我的面吹牛绪穆,可吹牛的內(nèi)容都是我干的虱岂。 我是一名探鬼主播第岖,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼试溯,長吁一口氣:“原來是場噩夢啊……” “哼遇绞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起摹闽,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤付鹿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后银亲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡务蝠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年馏段,在試婚紗的時候發(fā)現(xiàn)自己被綠了践瓷。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡喷舀,死狀恐怖淋肾,靈堂內(nèi)的尸體忽然破棺而出樊卓,到底是詐尸還是另有隱情,我是刑警寧澤碌尔,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站待诅,受9級特大地震影響熊镣,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜序厉,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一毕箍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧而柑,春花似錦、人聲如沸粹排。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至粥帚,卻和暖如春芒涡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背费尽。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工依啰, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人叹誉。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓闷旧,卻偏偏與公主長得像忙灼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子该园,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,601評論 2 353

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

  • **1啃勉、let和const** (1) let聲明變量双妨,const聲明常量,不允許重復(fù)聲明 (2) let是塊級作...
    天使之淚情閱讀 252評論 0 0
  • 最近在看阮一峰老師的ECMAScript 6 入門這本書回论,隨手做一下讀書筆記ECMAScript 6 入門 這是原...
    GU_0539閱讀 505評論 0 0
  • 擴(kuò)展運算符 概念:將數(shù)組或?qū)ο筠D(zhuǎn)換成參數(shù)序列挑随,使用逗號分隔的序列。作用:1竞阐、數(shù)組暑劝、對象的合并;2幕垦、函數(shù)剩余參數(shù)傅联;3...
    LuckyJin閱讀 422評論 0 0
  • 一蒸走、變量 var : let: const: 二、函數(shù)(箭頭函數(shù)) 1比驻、如果只有一個參數(shù)“()”可以省2岛抄、如果只有...
    濤_3ac8閱讀 136評論 0 0
  • methods 不能使用箭頭函數(shù) 為啥夫椭?在箭頭函數(shù)中使用this的話指向的是組件本身 如果不使用箭頭函數(shù) this...
    web3d開發(fā)工程師閱讀 135評論 0 0