ECMAScript 6学习笔记

|   Visit count

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。这里主要记录下学习ES6中值得记录的地方，以备忘。

const恒量

cont限制的给恒量分配值得动作，而不是限制恒量里的值，比如下面这个例子失败的：

1
2
3
4
5
const fruit = '🍎'
console.log(fruit)

const fruit = '🍋'
console.log(fruit)

QQ截图20181214100430.png

而下面这个例子是可行的：

1
2
3
const fruit = []
fruit.push('🍋')
console.log(fruit)

QQ截图20181214100532.png

解构

解构就是将一个数据结构进行分解，通常分为数组解构，对象解构和参数解构。

数组解构

在ES6之前，要将数组里的每个值分配给一个变量，需要这样做:

1
2
3
4
5
6
7
8
9
function food() {
    return ['🍰', '☕', '🍓']
}
var temp = food()

var dessert = temp[0]
var drink = temp[1]
var fruit = temp[2]
console.log(dessert, drink, fruit)

QQ截图20181214101739.png

ES6后可以这样做：

1
2
3
4
5
6
function food() {
    return ['🍰', '☕', '🍓']
}

let [dessert, drink, fruit] = food()
console.log(dessert, drink, fruit)

输出结果是一样的，是不是很方便？

对象解构

将food返回改为一个对象，然后解构：

1
2
3
4
5
6
function food() {
    return {dessert: '🍰', drink: '☕', fruit: '🍓'}
}

let {dessert: dessert1, drink: drink1, fruit: fruit1} = food()
console.log(dessert1, drink1, fruit1)

这里做的是将对象里的dessert属性值赋予给dessert1，依此类推，有点颠倒的感觉，结果如下：

QQ截图20181214102509.png

参数解构

使用对象解构的方式，我们可以很容易的给函数传递一个对象参数：

1
2
3
4
5
function food(dessert, drink, {location, restaurant} = {}) {
    console.log(dessert, drink, location, restaurant)
}

food('🎂', '☕', {location: 'fuzhou', restaurant: 'MrBird\'s Restaurant'})

20181214103349.png

模板字符串

ES6之前的字符串拼接：

1
2
3
4
5
6
let weather = '🌞', mood = '😄', drink = '🍸'

let message = "今天天气：" + weather
            + "，喝了一杯：" + drink
            + "，心情：" + mood
console.log(message)

ES6后我们可以这样做：

1
2
3
4
5
6
let weather = '🌞', mood = '😄', drink = '🍸'

let message = `今天天气：${weather}
               ，喝了一杯：${drink}
               ，心情：${mood}`
console.log(message)

QQ截图20181214105137.png

带标签的模板字符串

可以在模板字符串前加个标签，这个标签是个函数，我们可以在这个函数里输出一些值：

1
2
3
4
5
6
7
8
9
10
let weather = '🌞', mood = '😄', drink = '🍸'

let message = note`今天天气：${weather}
               ，喝了一杯：${drink}
               ，心情：${mood}`

function note(strings, ...params) {
    console.log(strings)
    console.log(params)
}

QQ截图20181214105927.png

可以看到，strings里的内容是模板字符串的每一个部分，...params包含的是模板字符串里的所有变量值。

字符串几个新方法

以什么开头startsWith，以什么结尾endsWith，是否包含includes：

1
2
3
4
5
6
7
8
9
10
11
let weather = '🌞', mood = '😄', drink = '🍸'

let message = `今天天气：${weather}
               ，喝了一杯：${drink}
               ，心情：${mood}`

console.log(
   message.startsWith('今天'),
   message.endsWith('😄'),
   message.includes('🍉')
)

QQ截图20181214110426.png

参数默认值

ES6后我们可以给函数参数指定默认值：

1
2
3
4
5
6
7
8
9
function food(dessert = '🎂', drink = '🍵') {
    return `${dessert} and ${drink}`
}

console.log(
    food(),
    '\n',
    food('🌭', '🍺')
)

QQ截图20181214110857.png

操作符...

展开操作符

在数组前加...，称为展开操作符，可以用于展开数组：

1
2
3
4
5
6
7
8
9
10
11
12
let fruits = ['🍍', '🍎'],
    foods = ['🍟', ...fruits]

console.log(
    fruits,
    '\n',
    ...fruits,
    '\n',
    foods,
    '\n',
    ...foods
)

QQ截图20181214111359.png

剩余操作符

在函数参数前加...，称为剩余操作符，用于接收函数剩下的参数：

1
2
3
4
5
function food(dessert,drink,...foods) {
    console.log(dessert,drink,foods)
}

food('🎂','🍺','🍟','🍤','🍖')

QQ截图20181214112024.png

剩余的参数被放到了一个数组里。

函数的名字

ES6函数新增了name属性，用于输出函数的名字:

1
2
3
4
5
6
7
8
9
function food() { }
var food_1 = function () { }
var food_2 = function deliciousFood() { }

console.log(
    food.name,
    food_1.name,
    food_2.name
)

QQ截图20181214113156.png

Object新增方法

Object.is()

判断两个东西是不是同一个：

1
2
3
4
5
6
7
8
console.log(+0 == -0)
console.log(+0 === -0)

console.log(NaN == NaN)
console.log(NaN === NaN)

console.log(Object.is(+0, -0))
console.log(Object.is(NaN, NaN))

QQ截图20181214134559.png

Object.assign()

作用就是将一个对象的内容赋予给另外一个对象：

1
2
3
4
let food = {dessert:'🍦'}

Object.assign(food, {drink: '🥣', fruit: '🥝'})
console.log(food)

QQ截图20181214135040.png

第一个参数为接收者，第二个参数为赋予者。

Object.setPrototypeOf()

设置对象的prototype，给个例子体会：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let breakfast = {
    getFood() {
        return '🧀'
    }
}

let lunch = {
    getFood() {
        return '🍜'
    }
}

let dinner = Object.create(lunch)
console.log(dinner.getFood())
console.log(Object.getPrototypeOf(dinner) === lunch)

Object.setPrototypeOf(dinner, breakfast)
console.log(dinner.getFood())
console.log(Object.getPrototypeOf(dinner) === breakfast)

QQ截图20181214140128.png

__proto__

我们还可以用__proto__（前后各两个下划线）设置对象的prototype：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let breakfast = {
    getFood() {
        return '🧀'
    }
}

let lunch = {
    getFood() {
        return '🍜'
    }
}

let dinner = {
    __proto__: lunch
}
console.log(dinner.getFood())
console.log(Object.getPrototypeOf(dinner) === lunch)

dinner.__proto__ = breakfast
console.log(dinner.getFood())
console.log(Object.getPrototypeOf(dinner) === breakfast)

QQ截图20181214140128.png

super

看下super的用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
let lunch = {
    getFood() {
        return '🍜'
    }
}

let dinner = {
    __proto__: lunch,
    getFood() {
        return super.getFood() + ' and 🥗'
    }
}
console.log(dinner.getFood())

QQ截图20181214141021.png

生成迭代器

ES6中我们可以使用function*和yield生成一个迭代器：

1
2
3
4
5
6
7
8
9
10
11
function* cook(foods) {
    for (value of foods) {
        yield value
    }
}

let result = cook(['🌮', '🍿', '🥧'])
console.log(result.next())
console.log(result.next())
console.log(result.next())
console.log(result.next())

QQ截图20181214142125.png

class类

ES6允许我们在JavaScript中定义一个类：

1
2
3
4
5
6
7
8
9
10
11
class Cook {
    constructor(food) {
        this.food = food
    }
    make() {
        console.log(this.food)
    }
}

let mrbird = new Cook(['🥞'])
mrbird.make()

QQ截图20181214143017.png

类里包含了一个有参构造器和方法。

get && set

我们可以在类里定义get和set：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Cook {
    constructor(food) {
        this.food = food
    }

    get foods() {
        return this.food
    }

    set foods(value) {
        this.food.push(value)
    }
}

let mrbird = new Cook(['🥞'])
mrbird.foods ='🍣'
mrbird.foods ='🥣'

console.log(mrbird.foods)

QQ截图20181214143758.png

静态方法

我们可以在类里定义静态方法，静态方法就是不需要实例化类就能调用的方法：

1
2
3
4
5
6
7
8
9
10
class Cook {
    constructor(food) {
        this.food = food
    }
     static make(food) {
        console.log(food)
    }
}

Cook.make('🍪')

QQ截图20181214144148.png

继承

ES6允许我们继承类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    introduce() {
        console.log(`${this.name} is ${this.age} years old`)
    }
}

class HandsomeBoy extends Person {
    constructor(name, age) {
        super(name, age);
    }
}

new HandsomeBoy('MrBird', '18').introduce()

QQ截图20181214145321.png

Set

一些Set的常用操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let foods = new Set('🧀🍧🍨')
console.log(foods)

foods.add('🍭')
foods.add('🍭')
console.log(foods)
console.log(foods.size)
console.log(foods.has('🍨'))

foods.delete('🧀')
console.log(foods)

foods.forEach(food => console.log(food))

foods.clear()
console.log(foods)

QQ截图20181214150419.png

Map

一些Map的常用操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let food = new Map()
let fruit = {},
    cook = () => {},
    dessert = '甜点'

food.set(fruit, '🍈')
food.set(cook, '🥄')
food.set(dessert, '🍦')

console.log(food)
console.log(food.size)
console.log(food.get(fruit))
console.log(food.get(cook))

food.forEach((value, key) => {
    console.log(`${key} = ${value}`)
})

food.delete(dessert)
console.log(food.has(dessert))

food.clear()
console.log(food)

QQ截图20181214151355.png

先到这里吧，详细的还是得参考http://es6.ruanyifeng.com/

或者https://babeljs.io/docs/en/learn

111164.gif

请作者喝瓶肥宅水🥤
0