ES6中非常实用的新特性介绍.docVIP

ECMAScript6离我们越来越近了，作为它最重要的方言，Javascript也即将迎来语法上的重大变革，InfoQ特开设“深入浅出ES6”专栏，来看一下ES6将给我们带来哪些新内容。

写在前面

ES6已经提交给Ecma大会审查了，也就是说，我们将迎来一大波javascript的最新标准，还有一些语法糖。ES6中有很多值得我们关注的东西，下面是我发现的一些我们最常用的一些新特性，进行记录一下。

1.for-of循环

这个东西用来循环数组很爽，原因呢，是因为它弥补了目前es5中循环数组的一切缺陷。

比如for-in，它会遍历数组对象的附加属性，而不仅仅是遍历数组值。还有一点是，for-in中的索引是string类型的,这一点尤其重要。

vararrObj=[alexchen,1,{}];

arrObj._name=attr-AlexChen;

for(variinarrObj){

console.log(arrObj[i])//会把_name属性也遍历出来

console.log(typeof(i))//全部输出string

}

当然我们还有forEach()函数，它也有问题，比如你不能在里面breakreturn之类的：

vararrObj=[alexchen,boy,great];

arrObj.forEach(function(v){

if(v==boy){

returncannotreturn;

}

console.log(v)//会输出alexchengreat

})

这样看起来要比for-in简便很多。但就像上面说的一样，它有也有不足的地方。那么我们来试试for-of吧：

vararrObj=[alexchen,1,{}];

arrObj._name=attr-alexchen;

for(variofarrObj){

console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen

console.log(typeof(i))//这里会输出string,number,object

if(i==1){

break;

}

console.log(i)//只会输出alexchen，满足条件之后就不在继续循环，提高了效率并且可以自由控制跳出循环或继续循环

}

可以看到：

当使用for-of的时候，循环的是数组内部的元素且不会出现for-in中将附加属性也遍历的情况，其次，循环变量的类型和其在数组中的类型保持一致，而不是全部是string的情况。

就这两点就值得我们选择for-of而不是forEach()或for-in当然，现在还有些浏览器不支持。不过以上代码可以在最新版本的FireFox执行成功并得到预期结果。当然for-of并不是只在数组上使用，你可以用在任何类数组类型的对象上，比如DOMNodeList，字符串等。

2.模版字符串

这个东西也非常好玩，用在字符串拼接的地方。从名称上我们就知道是干啥的了。在前端开发过程中难免会遇到要动态拼接字符串的情况(动态dom生成，数据格式化)等：

(functionsayHello(name,words){

console.log(`hello:${name},welcomees6,yourwordsis:${words}`);//

})(alexchen,imadmin)//运行之后将会输出：hello:alexchen,welcomees6,yourwordsis:imadmin

注意，被当作模版的字符串使用`号包裹的。其中$(paramenter)是占位符,而且支持对象，eg:$(obj.name)这种形式。与普通字符串相比模版字符串可以写成多行而不需要用+连接：

hello:$(name),

welcomees6,

yourwordsis$(words)

值得注意的是，模版字符串不会转义特殊字符，因此需要自己处理其中的安全隐患。模版字符串并不能够代替模版框架，原因是模版字符串没有内置的循环语法和条件语句。因此，对于常规的普通的字符串拼接，我们可以使用它来完成，会让你的代码看起来更酷一点。PS(除此之外，我觉得它并没有什么卵用。ψ(╰_╯))

这里有更详细的介绍来解决上面说道的没有内置循环和判断分支的问题:

es6-模版