【JS】JavaScript-ES6新特性

1.ES6中的常量写法

// 常量命名
constPI=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
varfactory=function(){
this.a ='a';
this.b ='b';
this.c ={
a :'a+',
b :function(){
returnthis.a;
}
}
}
console.log(newfactory().c.b())
}
{// es6
varfactory=function(){
this.a ='a';
this.b ='b';
this.c ={
a :'a+',
b :()=>{
returnthis.a;
}
}
}
console.log(newfactory().c.b())
}

5.可变参数

{
// es3 es5 可变参数
functionf(){
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 可变参数
functionf(...a){// 求和参数
var sum =0;
a.forEach(item=>{
sum+=item*1;
})
return sum;
}
console.log(f(1,2,3,6));
functionf2(...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  数据保护
varPerson=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 =newPerson();
// 读取
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 =newProxy(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
});
}