ES6新特性
1.变量声明let和const
在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
var bool = true; function aa() { if(bool) { var test = 'hello man' } else { console.log(test) } }
以上代码实际为:
var bool = true; function aa() { var test // 变量提升 if (bool) { test = 'hello man'; console.log('1', test); // 1 hello man } else { //此处访问test 值为undefined console.log('2', test) } console.log('3', test) //3 hello man } // console.log('4', test) //报错 test is not defined aa(); console.log('5', test) //报错 test is not defined
当走else分支时
var bool = false; function aa() { var test // 变量提升 if (bool) { test = 'hello man'; console.log('1', test); } else { console.log('2', test);//2 undefined } console.log('3', test) //3 undefined } // console.log('4', test) //报错 test is not defined aa(); console.log('5', test) //报错 test is not defined
ES6中:
const:常量;
let:变量;
const PI2= 3.1415926 PI2 = 201452789 //再次赋值此时会报错 //常量则不能更改
const callbacks=[]; for(var i=0;i<=2;i++){ callbacks[i]=function(){ return i*2; } } console.table([ callbacks[0](), callbacks[1](), callbacks[2](), ])
运行结果“
const callbacks2=[]; //只有let这一处不一样!!!! for(let i=0;i<=2;i++){ callbacks2[i]=function(){ return i*2; } } console.table([ callbacks2[0](), callbacks2[1](), callbacks2[2](), ])
代码结果:
因为let和const都是块级作用域。let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。var声明的函数,是内部函数形成了闭包。取到的是外部函数变量的最终值。
const再次声明对象的引用时,不会报错!
const b={ a:3 }; b.a=4; b.c=5; console.log(b.a); //4 console.log(b.c); //5
const b={ a:3 }; b=2; //Uncaught SyntaxError: Identifier 'b' has already been declared
因为对象是引用类型,返回的是对象存储的指针,上例中,b是指向存储的指针,指针因为const是不变的,但是它指向的内容b.a可以变。
2.ES5中块作用域:立即执行函数: ( (function(){}) ());
( (function(){ function f2(){ return 1; } console.log(f2()===1); //true }) () ); ( (function(){ function f2(){ return 2; } console.log(f2()===2); //true }) () )
ES6中块作用域:{}
{ function f2(){ return 1; } console.log(f2()===1); //true } { function f2(){ return 2; } console.log(f2()===2); //true }
3.箭头函数
ES5 function a(){}
{ const evens=[1,3,5,7]; const odds=evens.map( function(v){ return v+1; }) console.log(evens,odds); //(4) [1, 3, 5, 7] (4) [2, 4, 6, 8] }
ES6 ()=>{} //只有一个参数时,小括号可以省略;{}中的表达式直接作为返回值时,{}也可以省略
{ const evens=[1,3,5,7]; const odds=evens.map(v=>v+1); console.log(evens,odds); //(4) [1, 3, 5, 7] (4) [2, 4, 6, 8] }
ES6中this没有形成自己的作用域,this指向离它最近的作用域块
//ES5 function Foo(){ this.a='a'; this.b='b'; //此处为构造函数,则this 指向实例f2本身 this.c={ a:'a+', b:function(){ return this.a; //此处thi.c为都对象,则this指向对象本身 } } } var f2=new Foo(); console.log(f2.c.b()); //a+
//ES6 function Foo(){ this.a='a'; this.b='b'; this.c={ a:'a+', b:()=>this.a } } var f2=new Foo(); console.log(f2.c.b()); //a
4.默认参数
//ES5 function f(x,y,z){ y=y||2; z=z||2; return x+y+z}; f(2)//6; f(2,3)//7 f(2,3,4)//9
//ES6 function f(x,y=2,z=2){return x+y+z}; f(2)//6; f(2,3)//7 f(2,3,4)//9
f() //NaN
5.异常参数检测
在4的实例中,函数f调用时应至少传入一个参数,那若一个参数都不传入时,会显示NaN; ES6可以用在此处作参数异常检测;
{ function cheackPara(){ throw new Error('There isn\'t a parameter'); } function f(x= cheackPara(),y=2,z=2){ return x+y+z}; try{ f() } catch(e){ console.log(e) } //Error: There isn't a parameter }
可变参数
//ES5 需要借助数组的arguments { function f(){ var a=Array.prototype.slice.call(arguments); var sum=0; a.forEach(function(item){ sum+=item; }) return sum; } console.log(f(1)); //1 console.log(f(1,2,3)); //6 }
//ES6 function f(...a){ //... 为扩展运算符,则a为可变参数列表 var sum=0; a.forEach(item=>{sum+=item}); return sum; } console.log(f(1)); //1 console.log(f(1,2,3)); //6
//ES5合并数组 var a=[1,2,3]; var b=[4,5]; b=b.concat(a) //[4,5, 1, 2, 3] console.log(b); c=[4,5].concat(a); console.log(c); //[4,5, 1, 2, 3]
//ES6运用扩展运算符合并数组 var a=[1,2,3]; var b=[4,5]; b=[b,...a]; //[Array(2), 1, 2, 3] console.log(b); c=[4,5,...a]; console.log(c); //[4,5, 1, 2, 3]
6.ES6代理
ES6中数据保护,原理就是通过访问代理,对数据访问做限制,最终提供的数据不是源数据
{ let Person={ name:'ES6', sex:'male', age:16 }; let person= new Proxy( Person,{ //代理 get (target,key){ //读操作 return target[key]; }, set (target,key,value){ //写操作 if(key !=='sex'){ target[key]=value; } } }); console.table({ name: person.name, //此处的person为代理,不是原数据 sex: person.sex, age: person.age }) }
运行结果:
更多ES6相关知识
7.对象字面量增强写法
const name="张三"; const sex="male"; const obj={ name, sex }
const obj={ name:"张三", fn(){ console,log("函数的字面量增强写法。") } }