Javascript 6里的4个新语法
JS的ES6版本已经被各大浏览器广泛支持，很多前端框架也已经使用ES6，并且还有Babel可以做兼容处理，所以ES6已经进入了应用阶段
如果您对ES6还不太熟悉，下面4个简单的基础用法可以帮助您快速了解ES6
1.使用let和const声明变量
在传统的ES5代码中，变量的声明有两个主要问题
（1）缺少块儿作用域的支持
（2）不能声明常量
ES6中，这两个问题被解决了，增加了两个新的关键字：let和const
块儿作用域使用let
vara=1;
if(true){
varb=2;
}
console.log(a);//1
console.log(b);//2
ES5中if块儿内声明的变量b可以在块儿外访问
//inES6
leta=1;
if(true){
letb=2;
}
console.log(a);//1
console.log(b);//ReferenceError:bisnotdefined
ES6中if块儿内使用let声明的变量b不能在块儿外访问
下面这段代码是常见的一个比较迷惑人的情况
vara=[];
for(vari=0;i<5;i++){
a.push(function(){
console.log(i);
});
}
a.forEach(function(value){
value();
});
运行结果是：5,5,5,5,5
使用let声明循环中的变量i
varb=[];
for(leti=0;i<5;i++){
b.push(function(){
console.log(i);
});
}
b.forEach(function(value){
value();
});
运行结果是：0,1,2,3,4
定义常量使用const
//inES5 varMY_CONSTANT=true; MY_CONSTANT=false;
ES5中不能定义常量，值可以被改，只能靠我们自己来保证
//inES6 constMY_CONSTANT=true; MY_CONSTANT=false;//UncaughtTypeError:Assignmenttoconstantvariable
ES6中使用const声明的常量是不可以被改的
2.模板字符串
下面这种字符串与变量的拼接方式是比较常见的
varurl=‘http://www.'+domain+‘.com/'+path+‘?'+queryParams;
ES6提供了简洁的用法
leturl=`http://www.${domain}.com/${path}?${queryParams}`;
3.新的Set和Map对象
ES5中我们经常使用数组来存储动态数据，例如
varcollection=[]; collection.push(1,2,1); console.log(collection);//[1,2,1]
其中包含了重复数据，如果不想有重复数据，需要使用代码判断
functionaddToCollection(collection,value){
if(collection.indexOf(value)<0){
collection.push(value)
}
}
ES6提供了Set对象，处理这个情况就方便多了
letcollection=newSet();
collection.add(1);
collection.add(2);
collection.add(1);
console.log(collection);//Set{1,2}
Set还可以方便的遍历集合，和处理集合中的数据
ES5中通常使用object来存储键值对数据，例如
varcollection={};
collection.a=‘abc';
collection.b=‘xyz';
ES6有了Map，就可以这样使用
letcollection=newMap(); collection.set(‘a',‘abc'); collection.set(‘b',‘xyz');
遍历也很简单
collection.forEach(function(value,key){
console.log(key+":"+value);
});
console.log(collection.size);
4.函数参数
ES6中函数的参数有两个新特性
默认值
functiondoSomething(someObject){
console.log(someObject);
}
这里有可能会出现运行时错误，需要验证参数
functiondoSomething(someObject){
if(someObject===undefined){
someObject={};
}
console.log(someObject);
}
这类的验证代码非常普遍，ES6中可以给参数设置默认值，就简单了很多
functiondoSomething(someObject={}){
console.log(someObject);
}
对象解构
我们常会把一个包含键值对的对象做为参数传给某个函数，然后在函数内获取对象的各个属性
functiondoSomething(someObject){
varone=someObject.propOne;
console.log(one);
vartwo=someObject.propTwo;
console.log(two);
varthree=someObject.propThree;
console.log(three);
}
ES6可以让我们直接在参数中解构对象参数
functiondoSomething({propOne,propTwo,propThree}){
console.log(propOne);
console.log(propTwo);
console.log(propThree);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。