ES6中很是实用的新特性介绍

写在前面

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

1. for-of循环

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

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

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
    console.log(arrObj[i])  // 会把_name属性也遍历出来 
    console.log(typeof(i))  // 所有输出 string
}

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

var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
    if (v == 'boy') {
        return 'can not return';
    }
    console.log(v) //会输出alexchen great
})

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

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
    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 并非只在数组上使用，你能够用在任何类数组类型的对象上，好比 DOM NodeList， 字符串 等。

2. 模版字符串

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

(function sayHello(name, words) {   
    console.log(`hello: ${name},welcome es6,your words is: ${words}`);  //
})('alexchen','im admin')//运行以后将会输出：hello: alexchen,welcome es6,your words is: im admin

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

` 
hello:$(name),
welcome es6,
your words is $(words)
  
`

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

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

es6-模版字符串-mozilla

3. 默认参数（Defaults parameters）

这个有点意思，是这样的，咱们都知道 js 函数是不须要给函数参数设置默认值的，好比以下代码会报错：

(function(a=0,b=0){return a+b;})(1,2)//不支持es6的浏览器下会报错的SyntaxError: Unexpected token =

这也就意味着，咱们的参数不能给默认值，若是须要给参数默认值就须要在函数内部判断其是否为 undefined 的方式来处理。然而在 ES6 中呢，咱们能够给参数设置默认值，而不用在函数内部去判断后赋默认值，不但能够赋值默认值，还可使用运算表达式，以下：

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
    console.log(`welcome ${pars1} ,u r  ${pars2}!!`)//用到了上面说的模版字符串
})();
/**参数为空时输出，welcome alexchen ,u r  admin!!,
   若是第一个参数不是alexchen则输出，welcome alexchen ,u r  not admin!!**/

这种方式在编写代码时很是的简便，和动态语言同样，好比 c# 中。这样既直观，又方便。因此用起来仍是很不错的。还一个剩余参数（Rest parameters），笔者没发现有什么特别的用处，所以就不写啦，感兴趣的能够去看看

默认参数和剩余参数-mozilla

ES6 中还有不少新特性和语法。感兴趣的能够看一下 mozilla 团队的博客，里面有很详细的介绍，并且是系列文章。

mozilla-ES6-系列介绍

好了，以上就是我在 ES6 中发现的三个比较实用的新东西，这三个应该是平常开发中用的最多的了,在此作个记录。