JavaScript-ES6新特性

1.ES6中的常量写法

// 常量命名
const PI = 3.1415926
console.log(PI);

// 作用域
const callbacks = [];
for(var i = 0; i<= 3;i++){
	callbacks[i] = function(){
		return i*2
	}
}

console.table([
	callbacks[0](),
	callbacks[1](),
	callbacks[2](),
])

2.作用域 let & var

const callbacks = [];
for(var i = 0; i<=3;i++){
	callbacks[i] = function(){
		return i*3
	}
}

console.table([
	callbacks[0](),
	callbacks[1](),
	callbacks[2](),
])

/////// ES6 中的作用域

const callbacks2 = []
for(let j =0 ;j<=3;j++){
	callbacks2[j] = function(){
		return j*3
	}
}

console.table([
	callbacks2[0](),
	callbacks2[1](),
	callbacks2[2](),
])

3.箭头函数

{
	// es3,es5
	$.post(url,data,function(res){
	
	});
	// es6
	$.post(url,data,(res) => {
	
	});
}
{
	// es3,es5
	var evens = [1,2,3,4,5];
	var odds = evens.map(function(v){ // 实现循环
		return v+1
	});
	console.log(evens,odds);
}

{
	// es6
	let evens = [1,2,3,4,5];
	let odds = evens.map(v => v+1) // 实现循环
	console.log(evens,odds);
}

4.this

{ //es3,es5
	var factory = function(){
		this.a = 'a';
		this.b = 'b';
		this.c = {
			a : 'a+',
			b : function(){
				return this.a;
			}
		}
	}
console.log(new factory().c.b())
}

{ // es6
	var factory = function(){
		this.a = 'a';
		this.b = 'b';
		this.c = {
			a : 'a+',
			b : () =>{
				return this.a;
			}
		}
	}
	console.log(new factory().c.b())
}

5.可变参数

{
	// es3 es5 可变参数
	function f(){
		var a = Array.prototype.slice.call(arguments);
		var sum = 0;
		a.forEach(function(item){
			sum+=item*1;
		})
		return sum;
	}
	console.log(f(1,2,3));
	
}
{
	// es6 可变参数
	function f(...a){ // 求和参数
		var sum = 0;
		a.forEach(item=>{
			sum+=item*1;
		})
		return sum;
	}
	console.log(f(1,2,3,6));
	function f2(...a){ // 求差函数
		var sum = 0;
		a.forEach(item=>{
			sum-=item*1;
		})
		return sum;
	}
	console.log(f2(1,2,3,6));
}

6.合并数组

{
	// es5 合并数组
	var params = ['hello',7,true];
	var other = [1,2,3].concat(params);
	console.log(other);
}
{
	// es6 合并数组 扩展运算符
	var params = ['hello',7,true];
	var other = [1,2,3,...params];
	console.log(other);
}

7.数据保护

1. es3

{
	// es3  数据保护
	var Person = function() {
		var data = {
			name:'es3',
			sex:'male',
			age:15
		}
		this.get = function(key){
			return data[key];
		};
		this.set = function(key,value){
			if(key !== 'sex'){
				data[key] = value;
			} else{
				console.log(key+'是受保护的！(es3)');
			}
		};
	}
	
	// 声明一个实例
	var person = new Person();
	// 读取
	console.table({
		name: person.get('name'),
		sex: person.get('sex'),
		age: person.get('age')
	});
	// 修改
	person.set('name','es3-cname');
	console.table({
		name: person.get('name'),
		sex: person.get('sex'),
		age: person.get('age')
	});
	// 修改sex
	person.set('sex','famale');
	console.table({
		name: person.get('name'),
		sex: person.get('sex'),
		age: person.get('age')
	});
}

2. es5

{
	// es5 数据保护
	var Person = {
		name:'es5',
		sex:'male',
		age:12
	}
	
	Object.defineProperty(Person,'sex',{
		writable:false,
		value:'male'
	});
	
	console.table({
		name: Person.name,
		sex: Person.sex,
		age: Person.age
	});
	Person.sex = 'female';
	Person.name = 'es5-canme';
	Person.age = 22;
	console.table({
		name: Person.name,
		sex: Person.sex,
		age: Person.age
	});
}

性别没有修改成功！

1. es6

{
	// es6 数据保护
	let Person = {
		name:'es6',
		sex:'male',
		age:17
	};
	// 代理对象
	let person = new Proxy(Person,{
		get(target,key){
			return target[key];
		},
		set(target,key,value){
			if(key!=='sex'){
				target[key]=value;
			}else{
				console.log(key+'是受保护的！(es6)');
			}
		}
	});
	
	// 读取
	console.table({
		name: person.name,
		sex: person.sex,
		age: person.age
	});
	// 修改
	person.sex = 'female';
	person.sex = 'female';
	person.sex = 'female';
	person.sex = 'female';
	// 读取
	console.table({
		name: person.name,
		sex: person.sex,
		age: person.age
	});
}