es6快速入门

1.环境准备与模块导出

使用npm搭建一个基于webpack的项目，配置loader：使用babel对es6转码：

新建一个文件，定义一个的函数并导出：

//模块导出
export default function(){
    window.console.log('模块导出')
}

在入口文件引用上个文件：

import test from './comp1/comp1'
test()

2.常量

es5中定义常量的方式：

//es5中定义常量的方法：
const callbacks=[];
Object.defineProperty(window,'PI',{
    value:"2423",
    writable:false,//只读
})
console.log(window.PI)
//es6中定义常量
const a='sdf';

3.作用域

ES5 只有全局作用域和函数作用域，没有块级作用域，

//es5中作用域
const callbacks=[];
for(var i=0;i<2;i++){
	callbacks[i]=function(){ //闭包
		return i
	}
}
console.table([
	callbacks[0](),
	callbacks[1](),
])

以上代码，因为闭包的原因 使得值不能被正常赋值。

//es6中作用域
for(let j=0;j<2;j++){ //当前块作用域
	callbacks[j]=function(){ 
		return j
	}
}
console.table([
	callbacks[0](),
	callbacks[1](),
])

4.箭头函数

var f = v => v;
 
// 等同于
var f = function (v) {
  return v;
};

当参数只有一个时（）可以省略，当返回值只有一个表达式时{ return}可以省略 

{//es3,es5
	var events=[1,2,3];
	var odd=events.map(function(v){
    return v+1;
	});
	console.log(events,odd);
}
{ //es6
	let events=[1,2,3];
	var odd=events.map(v=>v+1); 
	console.log(events,odd);
}

5.默认参数

{//es3,es5
  function f(x){
		if(x==undefined){
			x=1;
		}
    return x;
	}
	console.log(f(2))
}
{ //es6
	const f= (x=2) => x
	 console.log(f());
}

es6直接可以在函数头给参数赋值：

也可以赋值一个函数：

{ //es6
	const checkP=() => {
		throw new Error('不嫩为空')
	}
	const f=(x=checkP(),y=1)=>{ 
          return x+y;
	}
	 console.log(f(1));
	 try{
	   f()
	 }catch(e){
	   console.log(e)
	 }
}

• 可变参数

//可变参数
{ //es3,es5
	function f(){
		var a=Array.prototype.slice.call(arguments);//获取参数
		var sum=0;
		a.forEach(function(item){
			sum+=item;
		});
    return sum;
	}
  console.log(f(1,2,3));
}
 
{ //es6
	f= (...a)=>{ //...a表示一个可变参数的列表
		let sum=0;
		a.forEach(item=>{
			sum+=item;
		})
		return sum;
	}
  console.log(f(1,3,3));
}

...a表示一个可变参数的列表

• 利用扩展运算符合并数组

  //合并数组
  { //es3,es5
  	var a=['ew',1];
  	var b=['健康的'];
  	a=a.concat(b);
  	console.log(a);
  }
   
  { //es6
  	let a=['ew',1];
  	let b=['dg',...a];
  	console.log(b);
  }

6.对象代理

上文中提到了es5保护变量，采用的是给对象设置只读：

Object.defineProperty(window,'PI',{
    value:"2423",
    writable:false,//只读
})

在es6中，使用中间代理层proxy的规则来保护数据：

let Person={
	name:"liu",
	sex:'famel'
}
let per=new Proxy(Person,{ //通过proxy代理来操作Person对象,并且定义一个操作规则
	get(target,key){
		return target[key]
	} ,
	set(target,key,value){
		
		if(key!=='sex'){
			target[key]=value;
		}
 
	}
})
 
per.name='最近减肥';
per.sex='nv'
 
console.table({
	name: per.name,
	sex:per.sex
})

此时Person对象的se'x属性已被保护