title: es6小記

變量與常量

let 定義變量, const 定義常量，常量定義一次后，不可更改

let r = 2
r = 4
console.log(r)   r =====> 4

const pi = 3.14
pi = 3.2
console.log(pi)  報(bào)錯(cuò)Assignment to constant variable.

不可重復(fù)定義

var foo = 1
var foo = 2
console.log(foo)  foo =====> 2

let foo = 1
let foo = 2
console.log(foo)  報(bào)錯(cuò)Identifier 'foo' has already 

塊級(jí)定義域

事例 1:
if (true) {
    var test = 1
}
console.log(test)   test =====> 1

if (true) {
    let test1 = 1
}
console.log(test1)  報(bào)錯(cuò)ReferenceError: test1 is not defined

事例 2:
let arr = [1, 2, 3, 4]
for (var i = 0; i < arr.length; i++) {
    // do nothing
}
console.log(i)  i =====> 4

for (let j = 0; j < arr.length; j++) {
    // do nothing
}
console.log(j)  j =====> ReferenceError: j is not defined

不存在變量提升

console.log(names)
var names = 'pig' 
names ======> undefined
因?yàn)関ar存在變量提示，實(shí)際代碼操作如下：
var names;
console.log(names)
names = 'pig'

console.log(age)
let age = 10
age =====> Identifier 'age' has already been declared

箭頭函數(shù)

參數(shù) => 表達(dá)式/語句

let value1 = 1;
let double = x => 2 * x;  // x為參數(shù)
let treble = x => {
    return 3 * x;
}
console.log(double(value1))  =====> 2
console.log(treble(value1))  =====> 3

繼承外層作用域，沒有自己的this指針，沒有獨(dú)立作用域

var obj = {
    commonFn: function () {
        console.log(this)
    },
    arrowFn: () => {
        console.log(this)
    }
}
obj.commonFn() // this指向obj
    輸出： {
        commonFn: function () {
        },
        arrowFn: () => {
        }
    }
obj.arrowFn() // // this指向obj的作用域，也就是windows
    輸出： {
        window {
            ...
        }
    }

不能用作構(gòu)造函數(shù)，不能用new生成一個(gè)對(duì)象

let Animai = function () {
}
let animai = new Animai()
animai =====> Animai {}

let Animai1 = () => {
}
let animai1 = new Animai1()
animai1 =====> 報(bào)錯(cuò)：Animai1 is not a constructor

沒有prototype屬性

let commonFn = function () {}
let arrowFn = () => {}

console.log(commonFn.prototype)  =====> { constructor }
console.log(arrowFn.prototype)  =====> undefined

模版字符串

基本用法

let str = `
    <div>
        <h1 class="title">123</h1>
    </div>
`
document.querySelector('body').innerHTML = str //html頁面顯示模版字符串的內(nèi)容

添加變量

let name = 'pig'
let str = `
    <div>
        <h1>${name}</h1>
    </div>
`
document.querySelector('body').innerHTML = str //html頁面顯示pig

添加方法

let getName = () => {
    return 'my pig'
}
let str = `
    <div>
        <h1>${getName()}</h1>
    </div>
`
document.querySelector('body').innerHTML = str //html頁面顯示my pig

循環(huán)遍歷

let arr = ['pig', 'dog', 'duck']
let str = `
    <ul>
        ${
            arr.map(name => `<li>I am ${name}</li>`).join('')
        }
    </ul>
`
document.querySelector('body').innerHTML = str 
//html頁面顯示三個(gè)li，分別輸出語句 I am pig / I am dog / I am duck

promise

基礎(chǔ)用法

new Promise((resolve, reject) => {
    // 異步函數(shù)
    if (4 == 2) {
        resolve()
    } else {
        reject()
    }
}).then((res) => {
    // resolve
    console.log('success', res)
}, (err) => {
    // reject
    console.log('fail', err)
})

控制臺(tái)輸出：fail undefined

兩個(gè)請(qǐng)求，一個(gè)請(qǐng)求成功后觸發(fā)第二個(gè)請(qǐng)求，第二個(gè)請(qǐng)求成功后輸出值

var promise1 = new Promise((resolve, reject) => {
    if (6 > 2) {
        resolve()
    } else {
        reject()
    }
})

var promise2 = new Promise((resolve, reject) => {
    if (3 > 2) {
        resolve()
    } else {
        reject()
    }
})

promise1.then(() => {
    return promise2
}).then(() => {
    console.log('promise2 success')
})

控制臺(tái)輸出：promise2 success

面向?qū)ο?類

基礎(chǔ)用法

class Animal {
    constructor (name) {
        this.name = 'animal'
        this.myname = name
    }
    getName () {
        return this.name + ',' + this.myname
    }
}

let animal = new Animal('pig') // 實(shí)例化Animal的類
console.log(animal.getName()) // 控制臺(tái)輸出：animal，pig

類的繼承

class Animal {
    constructor () {
        this.name = 'animal'
    }
    getName () {
        return this.name
    }
}
class Cat extends Animal{
    constructor () {
        super() // 如果不加這行代碼，會(huì)報(bào)錯(cuò)Must call super constructor in derived class             before accessing 'this' or returning from derived 
        this.name = 'cat'
    }
}

let animal = new Animal()
let cat = new Cat()
console.log(animal.getName())  =====> animal
console.log(cat.getName())  =====> cat

對(duì)象的寫法

原本es5的寫法
var name = 'pig',
    age  = 18
var obj = {
    name: name,
    age: age,
    getName: function () {
        return this.name
    },
    getAge: function () {
        return this.age
    }
}
console.log(obj.getName())  =====> pig

現(xiàn)在es6的寫法
let name = 'pig',
    age  = 18
let obj = {
    name, //變量名可以直接用作對(duì)象的屬性名稱
    age,
    getName () { //方法可以簡(jiǎn)寫
        return this.name
    },
    ['get' + 'Age'] () { //表達(dá)式作為屬性名或者方法名
        return this.age
    }
}
console.log(obj.getName())   =====> pig
console.log(obj.getAge())   =====> 18

• Object.keys // 獲取對(duì)象的所有屬性名，放回的是一個(gè)數(shù)組

  Object.keys(obj) =====> ['name', 'age', 'getName', 'getAge']

• Object.assign // 對(duì)象的整合

  Object.assign({a: 1, b: 2}, {a: 3, b: 3, c: 5}) =====> {a: 3, b: 3, c: 5}

模塊化

基本用法

export： 導(dǎo)出模塊的內(nèi)容
let str = 'string'
let obj = {
    name: 'pig'
}
export {
    str,
    obj
}

import： 在其他js文件獲取模塊的內(nèi)容
import {str, obj, fn} from './module.js'
console.log('name', obj.name)   =====> 'pig'
console.log('str', str)         =====> 'string'

默認(rèn)輸出/引用

輸出默認(rèn)值：
export default {a: 1}

引用默認(rèn)值：（引用時(shí)可以使用任意名稱接受傳遞過來的值）
import foo from './module.js'
console.log('foo', foo)

補(bǔ)充知識(shí)點(diǎn)

image.png

image.png

image.png