ES6详解

首先唠唠ES的发展史，ES6为ECMAScript的六个版本。ESMAScript是一个语言的标准。
ESMAScript+WEBapi(DOM、BOM)=JavaScript
ActionScript+WEBapi(DOM、BOM)=flash

年份	版本	事件
1996	ES1.0	Netscape公司把js交个了ECMA的组织，es正式出现
2007	ES4.0	由于更新过大，未被认同，被废除
2008	ES3.1	是目前大量使用的，是严重缩水的4.0，名字Harmony
2015.06	ES6.0	ES6正式发布 又称 ES2015
2016	ES7	就不在使用版本号了，而是使用年份的代号了

标准委员会最终决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript 2015是在2015年6月发布ES6的第一个版本。ECMAscript 2016是ES6的第二个版本、以此类推，…下面步入正题。

let声明变量

let,const用于声明变量，用来替代老语法的var关键字，与var不同的是，let/const会创建一个块级作用域（通俗讲就是一个花括号内是一个新的作用域）
总结：
1.let声明的变量不会挂在window中，不会造成全局变量的污染
2.新增了一个块级作用域一个{}为一个作用域,以前只有函数作用域，全局作用域
3.let不允许重复声明
4.let不会声明提前（只是人为看到的效果，实际上是有提前的，提前在临时性的死区中）

	console.log(num)
	let num = 100;
	console.log(num)
//报错：Uncaught ReferenceError: Cannot access 'num' before initialization

const声明常量

1.不允许被修改，否则会报错（不允许改变内存空间的地址）
2.const声明和赋值必须一次性完成，并且后期不允许改变存储空间的地址

		const
		let a = 10;
		a = 100;
		console.log(a);
		
		const obj = {};
		obj.name = "jack";
		console.log(obj)
		const abc;
		console.log(abc)

字符串模板

模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。 模板字符串中嵌入变量和函数，需要将变量名写在${}之中

//字符串换行
let str = `今天
居然
停电了`
console.log(str)
const a = 10;
//ES5
var string = '这个数字是'+ a;
//ES6
var string = `这个数字是${a}`; 

…运算符 起到参数收集作用

1. 收集符只能出现一次
2. 一个函数，剩余参数收集只能在最后一个形参

//收集、收集参数只能放在最后一个参数
	function num (a,...arg){
		console.log(a,arg);
	}
	num(1,2,3,4)
//展开
	let arr = [1,2,3];
	console.log(...arr);
	let arr2 = [4,5,6];
	let newArr = [...arr,...arr2];
	console.log(newArr)
// 浅克隆
	let arr1 = [1,2,3,4,{name:"jack"}];
	let arr2 = [...arr1];
	console.log(arr1,arr2);
	console.log(arr1 == arr2);
	console.log(arr1[4] == arr2[4]);  

函数

1. ES6中参数可以加默认值

function fun (a,b=10,c=20){
	return a+b+c;
}
console.log( fun(30) )//60
console.log( fun(10,undefined,30) )//50
//null在数学中，默认的为0，不要传递null
console.log( fun(10,null,30) ) //40

2. 创建一个元素，插入到某个元素中
   name：创建的标签，大多数为div
   container:需要往那个元素中插入，大多数为container、contetn、内容

function createElement(name = 'div',container = getContainere(),content){
	const ele = document.createElement(name);
	if(content){
		ele.innerHTML = content
	}
	container.appendChild(ele)
}
function getContainer(){
	return document.getElementById("container");
}
createElement(undefined,undefined,"demo")

箭头函数

箭头函数的写法

1. 如果参数只有一个，可以省略小括号

const fun = num => {
	console.log(num)
}
fun(100)

2. 如果箭头函数只有一条返回语句，可以省略花括号，可以省略return. 参数 => 返回值

const fun1 = num => num%2 !== 0;
console.log(fun(3))

3.如果返回值是一个对象的时候，就会认为成函数体，把返回值变成表达式的形式

const obj = (a,b) => ({
	a : a,
	b : b
})
console.log( obj(1,2) )

与普通函数的区别

1.箭头函数中没有this、argument、new、target，如果要强行使用，则指向函数外层对应的this，argument，new.target

const fun = () => {
	console.log(this)
}
fun() //window

2. 箭头函数没有原型，所以占用的空间非常小，不能当成构造函数使用

应用场景

1. 临时使用的函数，并不会刻意的去调用。（如：1.异步的事件处理 2.事件处理）
2. 继续去沿用外层的this
3. 对象的属性不要去用箭头函数，除非是特别的需求
4. 数组方法的时候，保证代码的简洁

this指向问题

1.对象调用函数，this指向对象
2.直接调用函数，this指向window
3.如果使用了new关键字，this指向新创建的对象
4.如果使用apply、call、bind、this指向绑定的数据
5.如果是DOM事件函数，this指向事件源

对象

1. 属性简写
2. 方法简写

function fun(name,age,sex){
	return{
		//属性简写
		name,
		age,
		//方法简写
		sex(){
			console.log(this.name,this.age)
		}
	}
}
const user = fun("t
Tom","16")
console.log(user);
user.sex()

3. 计算属性名

const prop1 = "name";
const prop2 = "say";
const user = {
	[prop1] : "Tom",
	[prop2](){
		console.log(this[prop1);
	}
}
console.log(user[prop1])
user[prop3]()

新增API

1. is()

//基本上和===一样，除了一下两种情况
console.log(NaN === NaN);//false
console.log(+0 === -0)//true
console.log(Object.is(NaN,NaN));//false
console.log(Object.is(+0,-0));//false
console.log(Object.is({},{}));//false

2. assign()用于混合对象，带浅克隆

	const obj1 = {
		a : 123,
		b : 456,
		c : "abc"
	}
	const obj2 = {
		a : 789,
		e : "asdf"
	}
	// 将2的内容覆盖到1  会对1产生影响
	const obj = Object.assign({},obj1,obj2)
	console.log(obj)//{a: 789, b: 456, c: "abc", e: "asdf"}
	console.log(obj == obj1)//false

3. getOwnpropertyNames()枚举的顺序，返回一个数组，枚举出来对象的属性，顺序是由厂商规定的。先排数字，升序，再排其他

4. setPrototypeOf(),设置某个对象的隐式原型 proto

	const obj1 = {
	a : 1
	}
	const obj2 = {
		b : 2
	}
	//obj1.__proto__ = obj2   必须要通过构造函数来完成
	// Object.setPrototypeOf(obj1,obj2)
	console.log(obj1)

构造函数

1.类的声明不会被提升，和let constf一样，有临时性死区
2.类的所有代码都在严格模式中执行
3.类的所有方法都是不可枚举的
4.类的所有方法都无法当成构造函数直接使用
5.类的构造器必须使用new，来调用