Javascript - ming5ming

ES6 基础#

对象字面量#

属性值简写

var events = {
	listeners: listeners,
	listen: listen;
}

==>

var events = { listeners, listen }

可计算属性名

若有变量 var expertise = 'journalism'
则可以为一个对象添加这样一个属性:

var person = {
	name: 'gui',
	age: 27
}

person[expertise] = {
	years: 5,
	interests: ['a', 'b', 'c']
}

方法定义

通过添加属性为对象声明方法

var emitter = {
	on: function (a, b) {
	...
	}
}

==>

var emitter = {
	on(a,b) {
	...
	}
}

箭头函数#

作用域

箭头函数不会创建新的作用域，作用域同父级作用域。不创建闭包

var timer = {
	seconds: 0,
	start() {
		setInterval(() => {
		this.seconds++
		},1000)
	}
}
//this 为 timer 块的作用域的this
timer.start()

格式

如果返回对象时要用括号:

var objectFactory = () => ({ modular: 'es6' })

解构#

对象的解构

如果有这样一个对象:

var character = {
	name: 'Bruce',
	pseudonym: 'Batman',
	metadata: {
		age: 34,
		gender: 'male'
		}
}

可以这样获取它的属性:

var { pseudonym } = character

或者取它的别名:

var { pseudonym: pseudonymAlias } = character

深度解构:

var { metadata: { gender } } = character

深度解构并取别名:

var { meatadata: { gender: characterGender } } = character

数组的解构

基本形式:

var lst = ['a', 'b', 'c']
var [x, y, z] = lst;

跳过:

var [x, , z] = lst;

默认值:

var [ x = 'x', , z = 'z'] = lst;

交换:

var left = 5
var right = 8
[left, right] = [right, left]

函数参数默认值

箭头函数默认值:

var double = (input = 0) => input * 2

函数参数的解构

基本形式:

function foo({ brand = 'Volkswagen', make = 1999 }) {
	console.log(brand)
	console.log(make)
}
foo({ make: 2000 })
//<= 'Volkswagen'
//<= 2000
foo()
//<= 报错

默认值:

function foo({ brand = 'Volkswagen', make = 1999 } = {} ) {
	console.log(brand)
	console.log(make)
	}
foo()
//<= 'Volkswagen'
//<= 2000

剩余参数和拓展运算符#

剩余参数
拓展运算符
将可遍历对象转换成数组

[...'show me']
//<- ['s', 'h', 'o', 'w', ' ', 'm', 'e']

模板字面量#

使用反引号 ` 表示:

var text = `Hello "World"`

字符串插值

`Hello, ${ 2 + 3 }`
//<- "Hello, 6"

标签模版

//对于标签模版
tag`Hello, ${name}. I am ${ emotion } to meet you!`
//有如下函数调用
tag(
	['Hello, ', '. I am ', ' to meet you!'],
	'Maurice',
	'thrilled'
)
//tag函数实现方式
function tag(parts, ...values) {
	return parts.reduce(
		(all, part, index) => all + values[index - 1] + part
	)
}

类，符号，对象和装饰器#

类#

原型

function Fruit(name, calories) {
	this.name = name
	this.calories = calories
	this.pieces = 1
}

Fruit.prototype.chop = function () {
	this.pieces++
}
Fruit.prototype.bite = function (person) {
	...
}

类

class Fruit {
	constructor(name, calories) {
		this.name = name
		this.calories = calories
		this.pieces = 1**
	}
	chop() {
		this.pieces++
	}
	bite(person) {
		...
	}
}

表达式声明类

const Person = class {
	constructor(name) {
		this.name = name 
	}
}

工程函数创建类

const createPersonClass = name => class extends Person {
	constructor() {
		super(name)
	}
}

const JackePerson = createPersonClass('Jake')
const jake = new JackePerson()

可通过同一个 key 储存读取数据的类:

class LocalStorage {
	constructor(key) {
		this.key = key
	}
	get data() {
		return JSON.parse(localStorage.getItem(this.key))
	}
	set data(data) {
		localStorage.setItem(this.key, JSON.stringify(data))
	}
}

静态方法

//原型链
function Person() {
	...
}
Person.isPerson = function (person) {
	return person instanceof Person
}
//类
class Person() {
	...
	static isPerson() {
		...
	}
}

类的继承

//原型继承
function Banana() {
	Fruit.call(this, 'banana', 105)
}
Banana.prototype = Object.creat(Fruit.prototype)
Banana.prototype.slice = function() {
	...
}
//类继承 -> 使用 extends 关键字

Object.assign

合并对象操作

function md(input, options) {
	const config = Object.assgign({}, defaults, options)
}
//defaults先赋值给{}, 然后options再赋值给{}
//用户提供的属性就会被覆盖

Object.assign 不会递归对象

Object.assign({}, { a: { b: 'c', d: 'e' } }, { a: { f: 'g' } })
// <- { a: { f: 'g' } }

更应该优先使用的赋值方法:

const grocery = { ...details }
// Object.assign({}, details)
const grocery = { type: 'fruit', ...details }
// Object.assign({ type: 'fruit' }, details)
const grocery = { type: 'fruit', ...details, ...fruit }
// Object.assign({ type: 'fruit' }, details, fruit)
const grocery = { type: 'fruit', ...details, color: 'red' }
// Object.assign({ type: 'fruit' }, details, { color: 'red' })

Object.is

NaN === NaN
// <- false
Object.is(NaN, NaN)
// <- true
-0 === +0
// <- true
Object.is(-0, +0)
// <- false

Object.setPrototypeOf

改变已有对象原型，有性能问题

//ES5
const baseCat = { type: 'cat', legs: 4 }
const cat = Object.create(baseCat)
cat.name = 'Milanesita'
//ES6
const baseCat = { type: 'cat', legs: 4 }
const cat = Object.setPrototypeOf(
{ name: 'Milanesita' },
baseCat
)

符号#

本地符号 (包装对象创建，储存引用或反射访问)

创建符号

const first = Symbol('something')
//唯一性
console.log(Symbol() === Symbol())
// <- false
console.log(Symbol('my symbol') === Symbol('my symbol'))
// <- false

作为对象的属性名

const weapon = Symbol('weapon')
const character = {
	name: 'Penguin'
	[weapon]: 'umbrella'
}

无法用 for...in Object.keys Object.getOwnPropertyNames 获取符号属性
可通过 Object.getOwnPropertySymbols 获取

console.log(Object.getOwnPropertySymbols(character))
// <- [Symbol(weapon)]

使用符号

...

装饰器#

类装饰器函数接受 3 个参数：被装饰的类构造函数 ctor；如果被修饰的类继承了其他类，
则包含父类的 heritage；带有被修饰类的成员描述符列表的 merbers 数组。

迭代与流程控制#

To be write