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 与我们的实际要的效果明显不一样

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。