es6新特性

传统字符串用法

const str = 'hello world this is a string'

模板字符串

const str = `hello world this is a \`string\``
console.log(str)//hello world this is a `string`
const str = `hello world
 this is a \`string\``
console.log(str )
//输出 hello world
 this is a \`string\`
const name = 'tony'
constr str = ` hey,${name}`
console.log(str)//hey,tony

带标签的模板字符串

let data = console.log`hello world`
console.log(data)//["hello world"]
const name = 'tom'
const gender = true
function dealData(strings){
	console.log(strings)//['hey ,', ' is a', '.']//用嵌入的表达式作为分隔符
}
 dealData`hey , ${name} is a ${gender} .`

const name = 'tom'
const gender = true
function dealData(strings,name,gender){
   console.log(strings)//['hey ,', ' is a', '.']//用嵌入的表达式作为分隔符
   console.log(name,gender)//tom true
}
const result = dealData`hey , ${name} is a ${gender} .`
console.log(result)

const name = 'tom'
const gender = true
function dealData(strings,name,gender){
	//return '1243'
	const sex = gender ? 'man' : 'woman'
	return strings[0] + name + strings[1] + sex+ strings[2]
	//目的是对模板字符串进行加工，让返回的结果更适合用户的阅读
	// hey ,tom is a true.
}
const result = dealData`hey , ${name} is a ${gender} .`
console.log(result)//1243

参数默认值

//在形参的后面加一个等于号设置默认值
function foo (fo,bar = true) {//如果参数较多的情况下，只能放在最后一位
  console.log(bar)//false 以为传入的实参是false，不是undefined或者没有传递
}
foo(false)//没有传递实参，或者实参是undefined才会被使用

剩余参数

function foo (...args) {
  console.log(args)//[1,2,3,4]
}
foo(1, 2, 3, 4)

function foo (first, ...args) {
  console.log(args)//[2,3,4]
}
foo(1, 2, 3, 4)

展开数组

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

对象字面量

var bar = '124'
var obj = {
	name:'toney',
	bar //bar:bar
}
console.log(obj.bar)

var obj1 = {
	name:'toney',
	bar ,//bar:bar
	//method:functiion(){
	//	console.log(this)
	//},
	method(){
		console.log(this)
	}
}
console.log(obj1.method())

Object.assign

将源对象的属性赋值到目标对象中去

var target = {
  a: '121',
  b: '212'
}
var source = {
  a: '1211',
  c: '111'
}
var source1 = {
  a: '1212',
  d: '111'
}
var result = Object.assign(target, source, source1)
console.log(result)
//{
//	a:'1212',
//	b:'212',
//	c:'111',
//	d:'111'
//}
console.log(result == target)//true

Object.is

console.log(Object.is(+0, -0))//false
console.log(Object.is(NaN, NaN))//true

Proxy

代理对象
监视某个对象中的属性读写
可以使用ES5的Object.defineProperty为对象添加属性，Vue使用这个实现数据响应，从而实现数据的双向绑定
Proxy专门为了给对象设置访问代理器的

      var person = {
		name:'tony',
		age:20
	}
	//第一个参数是代理的处理对象，
	const personProxy = new Proxy(person,{
		//第一个参数代表目标对象，第二个是访问的属性名
		get(target, property){//监视属性的访问
			//console.log(target, property)
			//return 100
			return property in target ? target[property] : 'default'
		},
		//第一个参数代表目标对象，第二个是写入的属性名称，第三个地表写入的值
		set(target, property, value){//监视属性设置
			//{name:'tony',age:20} gender true
			//console.log(target, property, value)
			if(property == 'age'){
				if(!Number.isInteger(value)){//如果value不是Number类型报错
					throw new Error (`${value} is not a int`)
				}
			}
      target[property] = value//给代理目标设置专门的属性
      return true
		}
	})
	personProxy.gender = true
	//{name:'tony',age:20} name
	console.log(personProxy.name)//100

Proxy与Object.defineProperty的区别

Proxy的功能更为强大
Object.defineProperty只能监听对象属性的读写，而Proxy不仅能监听对象的读写
还能监听到更多对象操作，例如delete操作或者对象中方法的调用等

var person ={
	name:'ceshi',
	age:20
}
const proxy = new Proxy(person, {
	deleteProperty(person, property){
		console.log(person,property)
		delete person[property]
	}
})
delete proxy.name
console.log(person )

Proxy 更好支持数组对象的监视

let list = []
const listProxy = new Proxy(list,{
	set(target, property, value){
		console.log(target, property, value)
		target[property] = value
		return true
	}
}) 
listProxy.push(100)
// [] "0" 100
// [100] "length" 1
//get方法走了两次，set方法走了两次。因为push方法其实做了两步，第一是再length出加上push的值，第二是把length加一，所以走了两次。

handler方法	触发方式
get	读取某个属性
set	写入某个属性
has	in操作符
deleteProperty	delete操作符
getPrototypeOf	Object.getPrototypeOf()
setPrototypeOf	Object.setPrototypeOf(0
isExtensible	Object.isExtensible()
preventExtensions	Object.preventExtensions()
getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor()
defineProperty	Object.defineProperty()
ownKeys	Object.getOwnPropertyNames(),Object.getOwnPropertySymbols()
apply	调用一个函数
construct	用new调用一个函数

class

      function Person(name){
        this.name = name
      }
      Person.prototype.say = function(){
        console.log(`this is a name called ${this.name}`)
      }

      class Person{
        constuctor(name){
          this.name = name
        }
        say(){
          console.log(`this is a name called ${this.name}`)
        }
      }
      const p = new Person('tony')
      console.log(p.say())

集成extends

class Person{
	constuctor(name){
		this.name = name
	}
	say(){
		console.log(`this is a name called ${this.name}`)
	}
}
class Student extends Person{
	constuctor(name,number){		this.number = number
	}
	hello(){
		console.log(`this is a age called ${this.number}`)
	}
}
const p = new Student ('tony',21)
console.log(p.hello())//连同person一起被打印

set数据集合

类似数组，没有重复的数据

	const set = new Set()
	set.add(1).add(2).add(3).add(2)
	console.log(set)//Set {1, 2, 3}
	set.forEach(i => console.log(i))//1 2 3
	for(var i  of set){
		 console.log(i)
	}
	console.log(set.size)
	console.log(set.has(100))
	console.log(set.delete(3))
	set.clear()
	const arr = [1,2,4,5,6,3,1]
	const s = new Set(arr)
	Array.from(s)
	[...s]

map

类似对象，和传统对象一样，都是键值对集合，但是传统对象键只能是字符串

let obj = {}
obj[true] = 'val1'
obj[1243] = 'val2'
obj[{ a: 1 }] = 'val3'
console.log(Object.keys(obj))//['1243','true','object object']
console.log(obj['object object'])//val3

const m = new Map()
const tom = { tn: 90 }
m.set(tom, 200)
console.log(m)
console.log(m.get({ tn: 90 }))
console.log(m.has({ tn: 90 }))
console.log(m.delete({ tn: 90 }))
m.clear()
m.forEach((val, key) => {
  console.log(val, key)
})

Symbol

一种全新的数据类型

const s = Symbol()
console.log(s)//Symbol()
console.log(typeof s)//Symbol
console.log(Symbol() === Symbol() )//false