ES6新特性

块级作用域let const var

最佳实践：不用var，主用const，配合let

数组的解构

const arr=[100,200,300]

const [foo,bar,baz]=arr
console.log(foo)

const [, , baz]=arr
console.log(baz)//300

const [foo,...rest]=arr
console.log(rest)//[200,300]

const [foo,bar,baz,more]=arr
console.log(more)//undefined

const [foo,bar,baz,more='default value']=arr
console.log(more)

对象的解构

const obj={name:'ybq',age:19}

const {name}=obj
console.log(name)

const name='tom'
const {name:objName='jack'}=obj
console.log(objName)

const {log} =console
log(’foo')

模板字符串

const str= `hello es2015`

const name='tom'
const msg=`hey ${name}`

const str=tag`hello world,${name}`
function tag(str,name){
  return string
}
console.log(str)//'111'

字符串的扩展方法

includes()
startsWith()
endsWith()

const message='error:foo is not defined.'
message.startsWith('error')//true
message.endsWith('.')//true
message.includes('foo')//true

参数默认值

function foo(bar,enable=true){
conso.log(enable)
}
foo()//true,注意带默认值的参数要放在最后，否则无法正常工作

剩余参数

function foo(...args){
  console.log(args)
}
foo(1,2,3,4)//[1,2,3,4]注意带默认值的参数要放在最后，且只能使用一次

展开数组

const arr=['foo','bar','baz']
console.log.apply(console,arr)//foo bar baz

console.log(...arr)

箭头函数

不会改变this的指向

const inc=n=>n+1
console.log(inc(100))

const person={
  name:'tom',
  sayHi:()=>{
    console.log(this.name)
  }
}
person.sayHi()//undefined

对象字面量增强

const bar='123'
const obj={
 foo:123,
 //bar:bar
 bar,
 [Math,random()]:123//计算属性名
}

对象扩展方法

将多个源对象中的属性复制到一个目标对象中,后面对象的属性覆盖第一个对象

const source={
  a:123,
  b:123
}
const source2={
  b:789,
  d:789
}
const target={
  a:456,
  c:456
}
const result Object.assing(target,source，source2)

console.log(target)//{a:123,c:456,b:789,d:789}
//原理是后面的对象依次覆盖合并到第一个对象中

//设置对象默认值
function func(obj){
  const  funcObj=Object.assign({},obj)
  funcObj.name='func obj'
}
func('global obj')

Proxy代理对象

proxy相当于门卫，对数据读写做监听

const person={
  name:'tom',
  age:20
}
const personProxy=new Proxy(preson,{
  get(target,property){
    return property in target? target[property]:'default'
  },
  set(target,property,value){
    target[property]=value
  }
})
personProxy.age=100
console.log(personProxy.name)

Object.defineProperty只能监听到对象的读写
proxy可以监视到更多的对象以及数组的操作
Proxy是以非侵入的方式监管看对象的读写

Reflect统一的对象操作API

静态类，内部封装了一系列对对象的底层操作
Reflect成员方法就是Proxy处理对象的默认实现
统一提供一套用于操作对象的API

const obj={
  name:'24523'
}
Reflect.has(obj,'name')
Reflect.deleteProperty(obj,'name')
Reflecto.ownKeys(obj)

Promise提供了更优秀的异步编程解决方案

class类

//原始写法
function Persion(name){
  this.name=name
}
Person.prototyoe.say=function(){
  console.log(this.name)
}
//class写法
class Person{
  constructor(name){
    this.name=name
  }
  say(){
    console.log(this.name)
  }
}
const p=new Person('tom')
p.say()

实例方法和静态方法

es2015中新增静态成员的static关键词

class Person{
  constructor(name){
    this.name=name
  }
  say(){
    console.log(this.name)
  }
  static create(name){
    return new Person(name)
  }
}
const p=Person.create('tom')
p.say()

类的继承extends

class Person{
  constructor(name){
    this.name=name
  }
  say(){
    console.log(this.name)
  }
}
class Student extends Person{
  construcor(name,number){
  //name参数在父类中也要用到，所以使用super对象
    super(name)//super指向父类，调用他相当于调用父类的构造函数
    this.number=number
  }
  hello(){
    super.say()
    console.log(this.number)
  }
}
const s=new Student('jack',100)
s.hello()

Set,Map数据结构

set内部成员不允许重复

const arr=[1,2,1,3,5,1]
const result =[...new Set(arr)]
console.log(result)//[1,2,3,5]

const obj={}
obj[true]='value'
obj[123]]='value'
obj[{a:1}]='value'
console.log(Object.keys(obj))
//map可以使用任意类型的数据作为键，object只能用字符串和symbol作为键
const m=new Map()
const tom={name:'tom'}
m.set(tom,90)
m.get(tom)
//m.has(),m.delete(),m.clear()
m.forEach((value,key)=>{})

Symbol数据类型

为对象添加一个独一无二的属性名

const name=Symbol()
const person={
  [name]:'ybq',
  say(){
    console.log(this[name])
  }
}
person.say()

for ... of ...

可以遍历任意类型的数据

Iterable迭代器

实现Iterable接口就是for...of...的前提

const todos={
  life:[],
  learn:[],
  [Symbol.iterator]:function(){
    const all=[...life,...learn]
    let index=0
    return {
      next:function(){
        return {
          vallue:all[index],
          done:index++ >= all.length
        }
      }
    }
  }
}
for(const item of todos){
  console.log(item)
}

Generator生成器

function * foo{
  console.log(1)
  yield 100
  console.log(2)
  yield 200
  console.log(3)
  yield 300
}

const generator=foo()
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())