ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ECMAScript JavaScript 的关系
一个常见的问题是,ECMAScript JavaScript 到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。
因此,ECMAScript JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现另外的 ECMAScript 方言还有 Jscript ActionScript)。日常场合,这两个词是可以互换的。
在讲解 ES6 语法之前,我们得先了解下Babel
Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
  return item + 1;
});
上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。
1、变量声明 const 和 let
我们都是知道在 ES6 以前,var 关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
function aa() {
    if(bool) {
        var test = 'hello man';
    } else {
        console.log(test); //bool 是 false 的话, 执行结果是 undefined
    }
}
以上的代码实际上是:
function aa() {
    var test; // 变量提升
    if(bool) {
        test = 'hello man';
    } else {
        //此处访问 test 值为 undefined
        console.log(test);
    }
    //此处访问 test 值为 undefined
}
所以不用关心 bool 是否为 true or false。实际上,无论如何 test 都会被创建声明。
接下来 ES6 主角登场:
我们通常用 let 和 const 来声明,let 表示变量、const 表示常量。let 和 const 都是块级作用域。怎么理解这个块级作用域?
在一个函数内部
在一个代码块内部
说白了 {}大括号内的代码块即为 let 和  const 的作用域。
看以下代码:
function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //报错, test is not defined
        console.log(test)
    }
}
let 的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。
再来说说const
const name = 'lux'
name = 'joe' //再次赋值此时会报错, Assignment to constant variable.
说一道面试题
var funcs = []
for (var i = 0; i < 10; i++) {
    funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
    func()
})
这样的面试题是大家常见,很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢?两种解决方法。直接上代码。
// ES5告诉我们可以利用闭包解决这个问题
var funcs = []
for (var i = 0; i < 10; i++) {
    func.push((function(value) {
        return function() {
            console.log(value)
        }
    }(i)))
}
// es6
for (let i = 0; i < 10; i++) {
    func.push(function() {
        console.log(i)
    })
}
达到相同的效果,es6简洁的解决方案是不是更让你心动!!!
2、模板字符串
es6 模板字符简直是开发者的福音啊,解决了 ES5 在字符串功能上的痛点。
第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用 ${} 来界定。
es6新特性面试//es5
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux
第二个用途,在 ES5 时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
// es5
var msg = "Hi \
man!
"
// es6
const template = `<div>
    <span>hello world</span>
</div>`
//实例
const name = "zhangsan"
const template = `<div>
<span>Nice to meet you ${name}</span>
</div>`
console.log(template); 
//
<div>
    <span>Nice to meet you zhangsan</span>
</div>
对于字符串 es6 当然也提供了很多厉害的方法。说几个常用的。
// 1.includes:判断是否包含然后直接返回布尔值
let str = 'hahay'
console.log(str.includes('y')) // true
// 2.repeat: 获取字符串重复n次
let s = 'he'
console.peat(3)) // 'hehehe'
//如果你带入小数, Math.floor(num) 来处理
3、函数
3.1、函数默认参数
在 ES5 我们给函数定义参数默认值是怎么样?
function action(num) {
    num = num || 200;
    //当传入num 时,num 为传入的值
    //当没传入参数时,num 即有了默认值200
    return num;
}
但细心观察的同学们肯定会发现,num 传入为0的时候就是 false, 此时 num = 200 与我们的实际要的效果明显不一样