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

JavaScript 2019-01-04

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

写在前面

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

1. for-of循环

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

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

属性也遍历出来 console.log(typeof(i)) // 全部输出 string }

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

输出alexchen great })

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

输出,alexchen,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 并不是只在数组上使用，你可以用在任何类数组类型的对象上，比如 DOM NodeList，字符串等。

2. 模版字符串

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

输出：hello: alexchen,your words is: im admin

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

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

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