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的更多相关文章

随机推荐

  1. 使用semaphore写一个显示锁

    /** * 这里只是将Semaphore包装了一下,注意当Semaphore的构造参数是1时,本身就是一个显示锁 */ public class SemaphoreLock { ); public v ...

  2. Sitecore A / B测试

    测试您的Web内容非常重要.这是查看页面中的页面和组件是否达到预期效果的好方法.测试还可以让您放心,您的内容足够吸引人,以增加转化次数并最大限度地提高增长率. 测试如何运作? 测试通过向访问者随机显示 ...

  3. 机器学习之TensorFlow介绍

    TensorFlow的概念很简单:使用python定义一个计算图,然后TensorFlow根据计算图生成高性能的c++代码. 如上图所示,使用图的方式实现了函数\(f(x,y)=x^2y+y+2\)的 ...

  4. How to get the free disk space in PostgreSQL (PostgreSQL获取磁盘空间)

    Get the current free disk space in PostgreSQL PostgreSQL获取磁盘空间 from eshizhan Here has a simple way t ...

  5. 消息队列mq总结

    一.消息队列概述消息队列中间件是分布式系统中重要的组件,主要解决应用解耦,异步消息,流量削锋等问题,实现高性能,高可用,可伸缩和最终一致性架构.目前使用较多的消息队列有ActiveMQ,RabbitM ...

  6. android studio学习---签名打包的两种方式

    注:给我们自己开发的app签名,就代表着我自己的版权,以后要进行升级,也必须要使用相同的签名才行.签名就代表着自己的身份(即keystore),多个app可以使用同一个签名. 如果不知道签名是啥意思, ...

  7. contab路径问题(脚本调用另一个文件)

    问题描述 当在定时任务里,要执行一个脚本A,然后A脚本需要调用另一个文件B,此时定时任务执行不成功,会报错找不到文件   解决办法 先cd到放执行脚本的路径,这样就在定时任务的脚本里可以调用相对路径下 ...

  8. PS图片转CSS+HTML页面的正确步骤

    转载来源:https://www.cnblogs.com/gg_lihui/p/3396409.html 制作网页标准的流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html ...

  9. 海盗分金问题SQL求解(贪心算法)

    问题 经济学上有个"海盗分金"模型:是说5个海盗抢得100枚金币,他们按抽签的顺序依次提方案:首先由1号提出分配方案,然后5人表决,超过半数同意方案才被通过,否则他将被扔入大海喂鲨 ...

  10. 【前端_React】npm常用命令

    安装模块(包): //全局安装 $ npm install 模块名 -g //本地安装 $ npm install 模块名 //一次性安装多个 $ npm install 模块1 模块2 模块n -- ...