四、Es6入门

Vue

ES6新特性
一、变量声明
var和let区别
let a;
const a;

	var声明的变量往往会越域;var可以多次声明同一个变量;var存在变量提升(声明的变量在下面，在上面可以访问)
	let声明的变量作用域严格;let只能声明一次，不可重复声明;let不存在变量提升
	const声明常量，变量值不能改变。

二、解构表达式
1.把数组arr的值分别赋给a,b,c (数组解构)

	let arr = [1,2,3];
	
	//以前写法
	let a = arr[0];
	let b = arr[1];
	let c = arr[2];
	
	//解构表达式写法
	let [a,b,c] = arr;

2.对象解构

	const person = {
		name:"jack",
		age:21,
		language:['java','js','css']
	}
	
	//以前写法
	const name = person.name;
	const age = person.age;
	const language = person.language;
	
	//解构表达式写法
	const{name,age,language} = person;
	//解构出来的参数命名（可选）
	const{name:name1,age:age1,language:language1} = person;

三、字符串扩展API

let str = "hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.startsWith("hello"));//true

字符串模板
let s = `
	<div>
		<span>hello world</span>
	</div>
`

字符串插入变量，表达式,和方法
let info = `我是${name},今年${age+10}了,我想说${fun()}`;

四、函数优化

*当调用参数b为传值的时候，给b赋值默认值1
	function add(a,b=1){
		return a+b;
	}
	
	add(20) -> 21

*不定参数
	function fun(...values){
		console.log(values.length);
	}
	
	fun(1,2); -> 2
	fun(1,2,6,8,9) -> 5

*箭头函数
	
	1.常规声明方法
	var a = function(obj){
		console.log(obj);
	}
	
	转换为箭头函数
	var a = obj => console.log(obj);
	
	2.常规多个参数的方法声明
	var sum = function (a,b){
		return a + b;
	}
	转换为箭头函数
	var sum = (a,b) => a + b;
	如果方法体多行
	var sum = (a,b) => {
		c = a + b;
		return a + c;
	};
	
	3.对象搭配解构表达式使用
	const person = {
		name:"jack",
		age:21,
		language:['java','js','css']
	}

	function hello(person){
		console.log("hello,"+ person.name)
	}
	
	转换为箭头函数
	var hello = (person) => console.log("hello,"+ person.name)
	
	搭配解构表达式
	var hello = ({name}) => console.log("hello,"+ name)

五、对象优化
ES6拓展新方法
Object.keys(obj); 获取obj所有key形成的数组
Object.values(obj); 获取obj所有value形成的数组
Object.entries(obj); 获取对象的所有key和value形成的二位数组
Object.assign(dest,…src); 将多个src对象的值拷贝到dest中（第一层为深拷贝，第二层为浅拷贝）

	const person = {
		name:"jack",
		age:21,
		language:['java','js','css']
	}
	
	Object.keys(person);     => ["name","age","language"]
	Object.values(person);   => ["jack",21,Array(3)]
	Object.entries(person);  => [Array(2),Array(2),Array(2)]   =>[["name","jack"],["age",21],["language",Array(3)]]
	
	
	const target = {a :1};
	const source1 = {b :2};
	const source2 = {c :3};
	
	Object.assign(target,source1,source2); =>  target => {a:1,b:2,c:3}
	
声明对象简写
	const name = "zhangsan";
	const age = 21;
	
	const person1 = {name :name,age:age};
	当key的值与value变量名一致时可简写
	const person2 = {name ,age};
	
对象函数属性简写
	
	let person3 = {
		name:"jack",
		//标准写法
		eat:funciton(food){
			console.log(this.name+"吃"+food);
		},
		
		//简写（箭头函数）
		//箭头函数不能使用this.属性
		eat2:food=>console.log(person3.name+"吃"+food),
		
		//正常简写
		eat3(food){
			console.log(this.name+"吃"+food);
		}
	}
	
	
对象拓展运算符
	//拷贝对象（深拷贝）  ...   相当于把person对象的属性值拆出来赋给 someone对象
	let person = {name:"aaa",age:1};
	let someone = {...person};
	
	//合并对象  相当于把所有对象（age,name）的属性值拆出来赋给 person 对象,如果 person对象原来存在相同的属性，则会被覆盖
	let age ={age:1};
	let name = {name:"zhangsan"};
	let person = {...age, ...name};

六、数组中新增了map和reduce方法
//map();接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回

	let arr = ["1","20","-5","3"];
	arr = arr.map(item=> item*2);  ->  [2,40,-10,6]
	
//reduce() 为数组中的每个元素依次执行回调函数，不包含数组中被删除或从未被赋值的元素
	arr.reduce(callback[,initalValue]); callback为自定义回调函数，initalValue为初始值(可不传)
	
	callback 可使用的四个参数依次为
		1.previousValue (上次调用callback函数返回的值，第一次调用callback函数时，存在初始值时为初始值（initalValue），否则为arr[0])
		2.currentValue (数组中当前被处理的元素)
		3.index (当前元素在数组中的索引)
		4.array (调用 reduce 方法的数组本身)

七、Promise异步操作优化