Class

class Animal {
  constructor(name, color) {
    this.name = name
    this.color = color
  }
  toString() {
    console.log('name:' + this.name + ',color:' + this.color)
  }
}
var animal = new Animal('dog', 'white')
animal.toString()
console.log(animal.hasOwnProperty('name'))
console.log(animal.hasOwnProperty('toString'))
console.log(animal.__proto__.hasOwnProperty('toString'))

class Cat extends Animal {
  constructor(action) {
    // 如果没有置顶consructor,默认带super函数的constructor将会被添加
    super('cat', 'white')
    this.action = action
  }
  toString() {
    console.log(super.toString())
  }
}
var cat = new Cat('catch')
cat.toString()

console.log(cat instanceof Cat)
console.log(cat instanceof Animal)

模块化(Module)

导出(export)

• 可以导出：变量、常量、函数

导入(import)

import defaultMethod, { otherMethod } from 'xxx.js'

箭头（Arrow）函数

卸载监听器时的陷阱

// 正确
class PauseMenu extends React.Component {
  constructor(props) {
    super(props)
    this._onAppPaused = this.onAppPaused.bind(this)
  }
  componentWillMount() {
    AppStateIOS.addEventListener('change', this._onAppPaused)
  }
  componentWillUnmount() {
    AppStateIOS.removeEventListener('change', this._onAppPaused)
  }
  onAppPaused(event) {}
}

// 正确
class PauseMenu extends React.Component {
  componentWillMount() {
    AppStateIOS.addEventListener('change', this.onAppPaused)
  }
  componentWillUnmount() {
    AppStateIOS.removeEventListener('change', this.onAppPaused)
  }
  onAppPaused = (event) => {}
}

函数入参默认值

function foo(height = 50, color = 'red'){}

模板字符串

• 通过 ${} 完成字符串的拼接

解构

获取数组中的值

• 可以设置默认值

• 交换数据

var foo = ['one', 'two', 'three', 'four']
var [one, two, three] = foo
console.log(one)
console.log(two)
console.log(three)
//如果你要忽略某些值，你可以按照下面的写法获取你想要的值var [first, , , last] = foo;console.log(first); console.log(last);
//你也可以这样写var a, b;

[a, b] = [1, 2]
console.log(a)
console.log(b)

var c, d
[c = 5, d = 7] = [1]
console.log(c)
// 1
console.log(d)
// 7

var m = 1
var n = 3
[m, n] = [n, m]
console.log(m)
console.log(n)

延展操作符(Spread operator)

• 函数调用

function sum(x, y, z) {
  return x + y + z
}
const numbers = [1, 2, 3]

console.log(sum.apply(null, numbers))

console.log(sum(...numbers))

• 构造数组

const stuendts = ['Jine', 'Tom']
const persons = ['Tony', ...stuendts, 'Aaron', 'Anna']
conslog.log(persions)

• 数组拷贝，与Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)

var arr = [1, 2, 3]
var arr2 = [...arr]
arr2.push(4)
console.log(arr2)

• 连接多个数组

var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
var arr3 = [...arr1, ...arr2] //等同于var arr4 = arr1.concat(arr2)

• 在React中的应用：避免传入一些不需要的参数

var params = {
  name: '123',
  title: '456',
  type: 'aaa',
}
var { type, ...other } = params

<CustomComponent type="normal" number={2} {...other} />
// 等同于<CustomComponent type='normal' number={2} name='123' title='456' />

对象属性简写

const name = 'Ming',
  age = '18',
  city = 'Shanghai'
const student = {
  name,
  age,
  city,
}
console.log(student)

Promise

var waitSecond = new Promise(function (resolve, reject) {
  setTimeout(resolve, 1000)
})
waitSecond
  .then(function () {
    console.log('Hello')
    return waitSecond
  })
  .then(function () {
    console.log('Hi')
  })

let与const

• var定义的变量为函数级作用域

• let与const定义的变量为块级作用域