ECMAScript 6学习笔记

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

请作者喝瓶肥宅水~

TOP