ECMAScript6

1、ES6简介

1.1、什么是ES6

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

1.2、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）。日常场合，这两个词是可以互换的。

1.3、为什么要学习ES6？

这个问题可以转换一种问法，就是学完es6会给我们的开发带来什么样便利？chrome解释javascript的引擎叫做V8，有一个人把V8引擎转移到了服务器，于是服务器端也可以写javascript，这种在服务器端运行的js语言，就是Node.js。Node.js一经问世，它优越的性能就表现了出了，很多基于nodejs的web框架也应运而生，express就是之一，随之而来的就是全栈MEAN mogoDB,Express,Vue.js,Node.js开发，javaScript越来越多的使用到web领域的各个角落，js能做的事情也越来越多。Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。nodejs是一种开发趋势，Vue.js这种前端框架是一种开发趋势，ES6被普及使用也是趋势。目前一些前端框架都在使用ES6语法，例如Vue、React、D3等等，所以ES6也是学习好前端框架的基础。

2、ES6环境搭建

由于有些低版本的浏览器还不支持ES6的语法，所以在不使用框架的情况下，需要将ES6语法转换为ES5语法。

2.1、前期准备

先创建一个项目，项目中有两个文件夹，src和dist，一个html文件

src：将编写的ES6的js文件放到此文件夹中（这里是index.js文件）

dist：将通过Babel编译成的ES5的js文件放到此文件中（这里是index.js文件）

html：注意：将dist中编译好的文件引入到HTML文件中，而不是src中的js文件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="./dist/index.js"></script>

 </head>

 <body>

     Hello ES6

 </body>

 </html>

2.2、ES6环境搭建

第一步：

在src目录下，新建index.js文件。这个文件很简单，我们只作一个a变量的声明，并用console.log()打印出来。

let a = 1;

console.log(a);

第二步：

在项目的根目录初始化项目并生成package.json文件(可以根据自己的需求进行修改)

cnpm init -y

{

    "name": "es6",

    "version": "1.0.0",

    "description": "",

    "main": "index.js",

    "scripts": {

        "test": "echo \"Error: no test specified\" && exit 1"

     },

    "keywords": [],

    "author": "",

    "license": "ISC"

}

第三步：

安装Babel插件（将ES6语法转换为ES5）

cnpm install -g babel-cli

第四步：

当然现在还不能正常转换，还需要安装ES5所需的一个包

cnpm install --save-dev babel-preset-es2015 babel-cli 安装完成后，package.json会有所变化

{

    "name": "es6",

     "version": "1.0.0",

    "description": "",

    "main": "index.js",

    "scripts": {

        "test": "echo \"Error: no test specified\" && exit 1"

    },

    "keywords": [],

    "author": "",

    "license": "ISC",

    "devDependencies": {

    "babel-cli": "^6.26.0",

    "babel-preset-es2015": "^6.24.1"

    }

}

第五步：

在项目的根目录添加一个 .babelrc 文件，并添加内容

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

在windows系统中创建.babelrc文件的方法

方法一：根目录下，创建“.babelrc.”文件名就可以了！（前后共两个点）

方法二：cmd进入根目录，输入“type null>.babelrc”，回车即可！

第六步：

安装完成后我们可以通过命令进行转换

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

第七步：

可以将命令进行简化（package.json进行配置）

"scripts": {
    "test": "echo "Error: no test specified" && exit 1"
},

修改为：

{

    "name": "es6",

    "version": "1.0.0",

    "description": "",

    "main": "index.js",

    "scripts": {

        "test": "babel src/index.js -o dist/index.js"

    },

    "keywords": [],

    "author": "",

    "license": "ISC",

    "devDependencies": {

        "babel-cli": "^6.26.0",

        "babel-preset-es2015": "^6.24.1"

    }

}

然后我们可以通过下面命令转义代码：

npm run test

React_01_ECMAScript6的更多相关文章

随机推荐

kvm虚拟机vnc配置
通过vnc方式访问虚拟主机上的KVM虚拟机通过虚拟主机的IP地址与端口进行访问 1. 修改qemu.conf # vi /etc/libvirt/qemu.conf vnc_listen = &q ...
winform子窗口与父窗口的交互-使用委托与事件
实现子窗口与父窗口的交互,通过父窗口调用并控制子窗口,子窗口也能控制父窗口,使用委托和事件的方法,可以实现. 1.父窗口调用子窗口,并通过子窗口控制父窗口新建工程,创建两个窗体显示子窗体的代 ...
AspNet Core结合Quartz使用定时任务且通过注入缓存或者配置参数
一.经常在项目会用到定时任务同步数据或更新缓存等操作,在很久以前我们可能经常会用一个多线程或timer来做定时任务,这样能实现比较简单轻量级的任务:对于任务多且都调用频率不一样的任务,我们都会用到Qu ...
Mvc中模拟模型
如题,每次研究前台技术都要建数据库.连接,还遇到VS各种版本问题,太麻烦. 写这么一个东西,模仿后台Model,上课的时候研究代码层面的内容.甚好. 数据库类: class myDatabase { ...
洛谷P1523 旅行商简化版(DP)
题目: P1523 旅行商简化版解析可以看做是两个人同时从西往东走,经过不一样的点,走到最东头的方案数设$f[i][j]$表示一个人走到i,一个人走到j的最短距离($i<j$) 第 ...
vue中通过hls.js播放m3u8格式的视频
近期做了一个功能,是接入一个海康的摄像头的监控视频,怎么获取m3u8的视频这里就不在叙述了,只说一下怎么将m3u8格式的视频成功播放一.m3u8和HLS介绍 1.M3U8文件是指UTF-8编码格式的 ...
ASP.NET Core使用EPPlus导入导出Excel
开发过程中,经常会遇到导入导出数据的需求,本篇博客介绍在.NET Core中如何使用EPPlus组件导入导出Excel EPPlus: EPPlus是使用Open Office XML格式(xlsx) ...
2 Linux磁盘管理
Linux磁盘管理:磁盘管理好坏直接关系到整个系统的性能问题常用三个命令:df.du.fdiskdf:列出文件系统的整体磁盘使用量 df 参数目录或文件名 -a:理出所有文件系统,包括系统特有的 / ...
ubuntu安装vbox虚拟机
ubuntu安装vbox虚拟机一.安装准备 1.查看主机配置二.下载安装包 (建议将安装包下载并保存) a.下载virtualbox安装包下载链接https://www.virtualbo ...
nginx $remote_addr 详解
1. 参考:https://blog.51cto.com/cuidehua/1827244?source=drt

React_01_ECMAScript6