Javascript

ES6 基础

对象字面量

属性值简写

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

==>

var events = { listeners, listen }

可计算属性名

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

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

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

方法定义

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

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

==>

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

箭头函数

作用域

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

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

格式

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

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

解构

对象的解构

如果有这样一个对象:

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

可以这样获取它的属性:

Copy
var { pseudonym } = character

或者取它的别名:

Copy
var { pseudonym: pseudonymAlias } = character

深度解构:

Copy
var { metadata: { gender } } = character

深度解构并取别名:

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

数组的解构

基本形式:

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

跳过:

Copy
var [x, , z] = lst;

默认值:

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

交换:

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

函数参数默认值

箭头函数默认值:

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

函数参数的解构

基本形式:

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

默认值:

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

剩余参数和拓展运算符

剩余参数

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

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

模板字面量

使用反引号 ` 表示:

Copy
var text = `Hello "World"`

字符串插值

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

标签模版

Copy
//对于标签模版
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
)
}

类，符号，对象和装饰器

类

原型

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

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

类

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

表达式声明类

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

工程函数创建类

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

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

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

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

静态方法

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

类的继承

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

Object.assign

合并对象操作

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

Object.assign 不会递归对象

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

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

Copy
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

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

Object.setPrototypeOf

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

Copy
//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
)

符号

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

创建符号

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

作为对象的属性名

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

无法用 for...in Object.keys Object.getOwnPropertyNames 获取符号属性

可通过 Object.getOwnPropertySymbols 获取

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

使用符号

...

装饰器

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

迭代与流程控制

To be write