ES6的介绍和环境配置

前言

ECMAScript 简介

ES 的全称是 ECMAScript，它是由 ECMA 国际标准化组织制定的一套脚本语言的标准化规范。

详细来说，ES 是由 ECMA 的第 39 号技术专家委员会（Technical Committee 39，简称 TC39）负责制订 ECMAScript 标准，成员包括 Microsoft、Mozilla、Google 等公司。

PS：简单来说，ECMAScript 是 JS 的语言标准。当然，ECMAScript 还包括其他脚本语言的语言标准。

ECMAScript 版本发布记录

1995 年：ECMAScript 诞生。
1997 年：ECMAScript 标准确立。ECMA 发布 ECMA-262 标准，推出浏览器标准语言 ECMAScript 1.0。
1999 年：发布 ES3；与此同时，IE5 风靡一时。
2009 年：发布 ECMAScript 5.0（简称 ES5）。例如 foreach、Object.keys、Object.create 和 json 标准。
2011 年：发布 ECMAScript5.1，成为 ISO 国际标准，从而推动所有浏览器都支持。
2015 年 6 月：发布 ECMAScript 6（简称 ES6），即 ECMAScript 2015。（注意，前者是按版本号区分，后者是按年份区分。ES 的后续的版本，请尽量用年份来命名。）
2016 年 6 月：发布 ECMAScript 7，即 ECMAScript 2016。
2017 年 6 月：发布 ECMAScript 8，即 ECMAScript 2017。
2018 年 6 月：发布 ECMAScript 9，即 ECMAScript 2018。
2019 年 6 月：发布 ECMAScript 10，即 ECMAScript 2019。
2020 年 6 月：发布 ECMAScript 11，即 ECMAScript 2020。
......

此后，每年更新一版。

ES6 简介

从上面的 ES 的版本记录可以看出：2015 年 6 月，ES6 正式发布。如果用年份来命名版本号，也可以称之为 ES2015。

ES6 是新的 JS 语法标准。ES6 实际上是一个泛指，泛指 ES 2015 及后续的版本。

很多人在做业务选型的时候，会倾向于选 jQuery。其实 jQuery 的语法是偏向于 ES3 的。而现在主流的框架 Vue.js 和 React.js 的默认语法，都是用的 ES6。

ES6 的改进如下：

ES6 之前的变量提升，会导致程序在运行时有一些不可预测性。而 ES6 中通过 let、const 变量优化了这一点。
ES6 增加了很多功能，比如：常量、作用域、对象代理、异步处理、类、继承等。这些在 ES5 中想实现，比较复杂，但是 ES6 对它们进行了封装。
ES6 之前的语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。

ES6 的目标是：让 JS 语言可以编写复杂的大型应用程序，成为企业级开发语言。

ES6 的环境配置（为了兼容 ES5）

掌握 ES6 之后，如果要考虑 ES5 的兼容性，可以这样做：写 ES6 语法的 js 代码，然后通过 Babel将 ES6 转换为 ES5。

babel 的作用是将 ES6 语法转为 ES5 语法，支持低端浏览器。

但是，在这之前，我们需要配置一下相关的环境。

建立工程目录

（1）先建立一个空的工程目录 ES6Demo，并在目录下建立两个文件夹 src和 dist：

src：书写 ES6 代码，我们写的 js 程序都放在这里。
dist：利用 Babel 编译生成的 ES5 代码。我们在 HTML 页面需要引入 dist 里的 js 文件。

（2）在 src 里新建文件 index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <!-- 我们引入 ES5 中的 js 文件，而不是引入 ES6 中的 js 文件。 -->
        <script src="./dist/index.js"></script>
    </head>
    <body></body>
</html>

注意，上方代码中，我们引入的是dist目录下的 js 文件。

然后我们新建文件 src/index.js：

let a = 'smyhvae';
const b = 'Henry';

console.log(a);
console.log(b);

这个文件是一个 ES6 语法的 js 文件，稍后，我们尝试把这个 ES6 语法的 js 文件转化为 ES5 的 js 文件。

PS：我们在写代码时，能用单引号尽量用单引号，而不是双引号，前者在压缩之后，程序执行会更快。

全局安装 Babel-cli

（1）初始化项目：

在安装 Babel 之前，需要先用 npm init 先初始化我们的项目。打开终端或者通过 cmd 打开命令行工具，进入项目目录，输入如下命令：

	npm init -y

上方代码中，-y 代表全部默认同意，就不用一次次按回车了（稍后再根据需要，在文件中手动修改）。命令执行完成后，会在项目的根目录下生成 package.json 文件：

{
    "name": "es6demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
    },
    "author": "smyhvae",
    "license": "ISC"
}

PS：VS Code 里打开终端的快捷键是：Contol + ~。

（2）全局安装 Babel-cli：

在终端中输入以下命令：

	npm install -g babel-cli

如果安装比较慢的话，Mac 下可以使用cnpm进行安装，windows 下可以使用nrm切换到 taobao 的镜像。

（3）本地安装 babel-preset-es2015 和 babel-cli：

	npm install --save-dev babel-preset-es2015 babel-cli

安装完成后，会发现package.json文件，已经多了 devDependencies 选项：

（4）新建.babelrc：

在根目录下新建文件.babelrc，输入如下内容：

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

（5）开始转换：

现在，我们应该可以将 ES6 的文件转化为 ES5 的文件了，命令如下：（此命令略显复杂）

	babel src/index.js -o dist/index.js

我们可以将上面这个命令进行简化一下。操作如下：

在文件 package.json 中修改键 scripts中的内容：

  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },

修改后的效果如下：

目前为止，环境配置好了。以后，我们执行如下命令，即可将src/index.js这个 ES6 文件转化为 dist/index.js这个 ES5 文件：

	npm run build

我们执行上面的命令之后，会发现， dist 目录下会生成 ES5 的 js 文件：

index.js：

'use strict';

var a = 'smyhvae';
var b = 'Henry';

console.log(a);
console.log(b);

当我们打开网页后，就可以在浏览器的控制台，看到代码的输出结果。

ES5中的严格模式

ES的几个重要版本

ES5 : 09年发布。
ES6(ES2015) : 2015年发布，也称为ECMA2015。
ES7(ES2016) : 2016年发布，也称为ECMA2016 (变化不大)。

严格模式的理解

概念

理解：除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）。

顾名思义，这种模式使得Javascript在更严格的语法条件下运行。

目的：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
消除代码运行的一些不安全之处，为代码的安全运行保驾护航
为未来新版本的Javascript做好铺垫

使用

针对整个脚本文件：将use strict放在脚本文件的第一行，则整个脚本文件将以严格模式运行。
针对单个函数：将use strict放在函数体的第一行，则整个函数以严格模式运行。

PS：如果浏览器不支持，则这句话只解析为一条简单的语句, 没有任何副作用。

脚本文件的变通写法：因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中。

语法和行为改变

必须用var声明变量
禁止自定义的函数中的this指向window
创建eval作用域
对象不能有重名的属性

严格模式和普通模式的区别

下面列举几条严格模式的内容。

全局变量显式声明

在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。

禁止this关键字指向全局对象：

        var foo = function () {
            console.log(this);
        }

        foo();

上方代码中，普通模式打印的是window。严格模式下打印的是undefined。

创设eval作用域

禁止使用with语句

因为with语句无法在编译时就确定，属性到底归属哪个对象。

构造函数必须通过new实例化对象

构造函数必须通过new实例化对象，否则报错。因为this为undefined，此时无法设置属性。

比如说：

        var Cat = function (name) {
            this.name = name;
        }

        Cat('haha');

上方代码中，如果在严格模式下，则会报错。

为了让代码更安全，禁止函数内部遍历调用栈

严格模式下无法删除变量

属性相关

普通模式下，对一个对象的只读属性进行赋值，不会报错，只会默默地失败。严格模式下，将报错。

严格模式下，对禁止扩展的对象添加新属性，会报错。

普通模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。

普通模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，多个重名的参数属于语法错误。

比如下面这样的代码：

	var obj = {
		username: 'smyh';
		username: 'vae'
	}

上面的代码，在严格模式下属于语法错误，因为有重名的属性。

函数必须声明在顶层

将来Javascript的新版本会引入"块级作用域"。为了与新版本接轨，严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允许在非函数的代码块内声明函数。

新增关键字

为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。

参考链接：

阮一峰 | Javascript 严格模式详解

ES5中的一些扩展

JSON 对象

1、js对象(数组) --> json对象(数组)：

	JSON.stringify(obj/arr)

2、json对象(数组) --> js对象(数组)：

	JSON.parse(json)

上面这两个方法是ES5中提供的。

我们要记住，我们通常说的“json字符串”，只有两种：json对象、json数组。

typeof json字符串的返回结果是string。

Object的扩展

ES5给Object扩展了一些静态方法，常用的有2个，我们接下来讲解。

方法一

	Object.create(prototype, [descriptors])

作用: 以指定对象为原型，创建新的对象。同时，第二个参数可以为为新的对象添加新的属性，并对此属性进行描述。

举例1：（没有第二个参数时）

    var obj1 = {username: 'smyhvae', age: 26};
    var obj2 = {address:'shenzhen'};

    obj2 = Object.create(obj1);
    console.log(obj2);

打印结果：

我们发现，obj1成为了obj2的原型。

举例2：（有第二个参数时）

第二个参数可以给新的对象添加新的属性。我们修改上面的代码，尝试给obj2添加新属性sex：

    var obj1 = {username: 'smyhvae', age: 26};
    var obj2 = {address: 'shenzhen'};

    obj2 = Object.create(obj1, {
        sex: {//给obj2添加新的属性`sex`。注意，这一行的冒号不要漏掉
            value: '男',  //通过value关键字设置sex的属性值
            writable: false,
            configurable: true,
            enumerable: true
        }
    });

    console.log(obj2);

上方代码中，我们通过第5行的sex给obj2设置了一个新的属性sex，但是要通过value来设置属性值（第6行）。

设置完属性值后，这个属性值默认是不可修改的，要通过writable来设置。总而言之，这几个关键字的解释如下：

value：设置属性值。
writable：标识当前属性值是否可修改。如果不写的话，默认为false，不可修改。
configurable：标识当前属性是否可以被删除。默认为false，不可删除。
enumerable：标识当前属性是否能用 for in 枚举。默认为false，不可。

方法二

这个方法有点难理解。

	Object.defineProperties(object, descriptors)

作用：为指定对象定义扩展多个属性。

代码举例：

    var obj2 = {
        firstName : 'smyh',
        lastName : 'vae'
    };
    Object.defineProperties(obj2, {
        fullName : {
            get : function () {
                return this.firstName + '-' + this.lastName
            },
            set : function (data) {  //监听扩展属性，当扩展属性发生变化的时候自动调用，自动调用后将变化的值作为实参注入到set函数
                var names = data.split('-');
                this.firstName = names[0];
                this.lastName = names[1];
            }
        }
    });
    console.log(obj2.fullName);
    obj2.firstName = 'tim';
    obj2.lastName = 'duncan';
    console.log(obj2.fullName);
    obj2.fullName = 'kobe-bryant';
    console.log(obj2.fullName);

get ：用来获取当前属性值的回调函数
set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值

存取器属性：setter,getter一个用来存值，一个用来取值。

Object的扩展（二）

obj对象本身就自带了两个方法。格式如下：

get 属性名(){} 用来得到当前属性值的回调函数

set 属性名(){} 用来监视当前属性值变化的回调函数

举例如下：

    var obj = {
        firstName : 'kobe',
        lastName : 'bryant',
        get fullName(){
            return this.firstName + ' ' + this.lastName
        },
        set fullName(data){
            var names = data.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    };
    console.log(obj.fullName);
    obj.fullName = 'curry stephen';
    console.log(obj.fullName);

数组的扩展

下面讲的这几个方法，都是给数组的实例用的。

方法1：

	Array.prototype.indexOf(value)

作用：获取 value 在数组中的第一个下标。

方法2：

	Array.prototype.lastIndexOf(value)

作用：获取 value 在数组中的最后一个下标。

方法3：遍历数组

	Array.prototype.forEach(function(item, index){})

方法4：

	Array.prototype.map(function(item, index){})

作用：遍历数组返回一个新的数组，返回的是加工之后的新数组。

方法5：

	Array.prototype.filter(function(item, index){})

作用：遍历过滤出一个新的子数组，返回条件为true的值。

函数function的扩展：bind()

ES5中新增了bind()函数来改变this的指向。

	Function.prototype.bind(obj)

作用：将函数内的this绑定为obj, 并将函数返回。

面试题: call()、apply()和bind()的区别：

都能改变this的指向
call()/apply()是立即调用函数
bind()：绑定完this后，不会立即调用当前函数，而是将函数返回，因此后面还需要再加()才能调用。

PS：bind()传参的方式和call()一样。

分析：

为什么ES5中要加入bind()方法来改变this的指向呢？因为bind()不会立即调用当前函数。

bind()通常使用在回调函数中，因为回调函数并不会立即调用。如果你希望在回调函数中改变this，不妨使用bind()。

JavaScript基础之ES6语法（上） | 青训营