es6小记

---

title: es6小记

变量与常量

let 定义变量, const 定义常量，常量定义一次后，不可更改

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

const pi = 3.14
pi = 3.2
console.log(pi)  报错Assignment to constant variable.

不可重复定义

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

let foo = 1
let foo = 2
console.log(foo)  报错Identifier 'foo' has already 

块级定义域

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

if (true) {
    let test1 = 1
}
console.log(test1)  报错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
因为var存在变量提示，实际代码操作如下：
var names;
console.log(names)
names = 'pig'

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

箭头函数

参数 => 表达式/语句

let value1 = 1;
let double = x => 2 * x;  // x为参数
let treble = x => {
    return 3 * x;
}
console.log(double(value1))  =====> 2
console.log(treble(value1))  =====> 3

继承外层作用域，没有自己的this指针，没有独立作用域

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

不能用作构造函数，不能用new生成一个对象

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

let Animai1 = () => {
}
let animai1 = new Animai1()
animai1 =====> 报错：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页面显示模版字符串的内容

添加变量

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

循环遍历

let arr = ['pig', 'dog', 'duck']
let str = `
    <ul>
        ${
            arr.map(name => `<li>I am ${name}</li>`).join('')
        }
    </ul>
`
document.querySelector('body').innerHTML = str 
//html页面显示三个li，分别输出语句 I am pig / I am dog / I am duck

promise

基础用法

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

控制台输出：fail undefined

两个请求，一个请求成功后触发第二个请求，第二个请求成功后输出值

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

控制台输出：promise2 success

面向对象-类

基础用法

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

let animal = new Animal('pig') // 实例化Animal的类
console.log(animal.getName()) // 控制台输出：animal，pig

类的继承

class Animal {
    constructor () {
        this.name = 'animal'
    }
    getName () {
        return this.name
    }
}
class Cat extends Animal{
    constructor () {
        super() // 如果不加这行代码，会报错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

对象的写法

原本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

现在es6的写法
let name = 'pig',
    age  = 18
let obj = {
    name, //变量名可以直接用作对象的属性名称
    age,
    getName () { //方法可以简写
        return this.name
    },
    ['get' + 'Age'] () { //表达式作为属性名或者方法名
        return this.age
    }
}
console.log(obj.getName())   =====> pig
console.log(obj.getAge())   =====> 18

• Object.keys // 获取对象的所有属性名，放回的是一个数组

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

• Object.assign // 对象的整合

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

模块化

基本用法

export： 导出模块的内容
let str = 'string'
let obj = {
    name: 'pig'
}
export {
    str,
    obj
}

import： 在其他js文件获取模块的内容
import {str, obj, fn} from './module.js'
console.log('name', obj.name)   =====> 'pig'
console.log('str', str)         =====> 'string'

默认输出/引用

输出默认值：
export default {a: 1}

引用默认值：（引用时可以使用任意名称接受传递过来的值）
import foo from './module.js'
console.log('foo', foo)

补充知识点

image.png
image.png image.png