45:ECMAScript 6 简介

ECMAScript 6 简介

  1. [ECMAScript 和 JavaScript 的关系](https://es6.ruanyifeng.com/#docs/intro#ECMAScript 和 JavaScript 的关系)
  2. [ES6 与 ECMAScript 2015 的关系](https://es6.ruanyifeng.com/#docs/intro#ES6 与 ECMAScript 2015 的关系)
  3. 语法提案的批准流程
  4. [ECMAScript 的历史](https://es6.ruanyifeng.com/#docs/intro#ECMAScript 的历史)
  5. [Babel 转码器](https://es6.ruanyifeng.com/#docs/intro#Babel 转码器)

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

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

2、ES6 与 ECMAScript 2015 的关系

ECMAScript 2015(简称 ES2015)这个词,也是经常可以看到的。它与 ES6 是什么关系呢?

2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。因此,ES6 这个词的原意,就是指 JavaScript 语言的下一个版本。

但是,因为这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能。事情很快就变得清楚了,不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版,过一段时间再发 6.1 版,然后是 6.2 版、6.3 版等等。

但是,标准的制定者不想这样做。他们想让标准的升级成为常规流程:任何人在任何时候,都可以向标准委员会提交新语法的提案,然后标准委员会每个月开一次会,评估这些提案是否可以接受,需要哪些改进。如果经过多次会议以后,一个提案足够成熟了,就可以正式进入标准了。这就是说,标准的版本升级成为了一个不断滚动的流程,每个月都会有变动。

标准委员会最终决定,标准在每年的 6 月份正式发布一次,作为当年的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的 6 月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。

ES6 的第一个版本,就这样在 2015 年 6 月发布了,正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。2016 年 6 月,小幅修订的《ECMAScript 2016 标准》(简称 ES2016)如期发布,这个版本可以看作是 ES6.1 版,因为两者的差异非常小(只新增了数组实例的includes方法和指数运算符),基本上是同一个标准。根据计划,2017 年 6 月发布 ES2017 标准。

因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方,一般是指 ES2015 标准,但有时也是泛指“下一代 JavaScript 语言”。

3、语法提案的批准流程

任何人都可以向标准委员会(又称 TC39 委员会)提案,要求修改语言标准。

一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

  • Stage 0 - Strawman(展示阶段)
  • Stage 1 - Proposal(征求意见阶段)
  • Stage 2 - Draft(草案阶段)
  • Stage 3 - Candidate(候选人阶段)
  • Stage 4 - Finished(定案阶段)

一个提案只要能进入 Stage 2,就差不多肯定会包括在以后的正式标准里面。ECMAScript 当前的所有提案,可以在 TC39 的官方网站GitHub.com/tc39/ecma262查看。

本书的写作目标之一,是跟踪 ECMAScript 语言的最新进展,介绍 5.1 版本以后所有的新语法。对于那些明确或很有希望,将要列入标准的新语法,都将予以介绍。

4、ECMAScript 的历史

ES6 从开始制定到最后发布,整整用了 15 年。

前面提到,ECMAScript 1.0 是 1997 年发布的,接下来的两年,连续发布了 ECMAScript 2.0(1998 年 6 月)和 ECMAScript 3.0(1999 年 12 月)。3.0 版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript 语言的基本语法,以后的版本完全继承。直到今天,初学者一开始学习 JavaScript,其实就是在学 3.0 版的语法。

2000 年,ECMAScript 4.0 开始酝酿。这个版本最后没有通过,但是它的大部分内容被 ES6 继承了。因此,ES6 制定的起点其实是 2000 年。

为什么 ES4 没有通过呢?因为这个版本太激进了,对 ES3 做了彻底升级,导致标准委员会的一些成员不愿意接受。ECMA 的第 39 号技术专家委员会(Technical Committee 39,简称 TC39)负责制订 ECMAScript 标准,成员包括 Microsoft、Mozilla、Google 等大公司。

2007 年 10 月,ECMAScript 4.0 版草案发布,本来预计次年 8 月发布正式版本。但是,各方对于是否通过这个标准,发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司,反对 JavaScript 的大幅升级,主张小幅改动;以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司,则坚持当前的草案。

2008 年 7 月,由于对于下一个版本应该包括哪些功能,各方分歧太大,争论过于激烈,ECMA 开会决定,中止 ECMAScript 4.0 的开发,将其中涉及现有功能改善的一小部分,发布为 ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为 Harmony(和谐)。会后不久,ECMAScript 3.1 就改名为 ECMAScript 5。

2009 年 12 月,ECMAScript 5.0 版正式发布。Harmony 项目则一分为二,一些较为可行的设想定名为 JavaScript.next 继续开发,后来演变成 ECMAScript 6;一些不是很成熟的设想,则被视为 JavaScript.next.next,在更远的将来再考虑推出。TC39 委员会的总体考虑是,ES5 与 ES3 基本保持兼容,较大的语法修正和新功能加入,将由 JavaScript.next 完成。当时,JavaScript.next 指的是 ES6,第六版发布以后,就指 ES7。TC39 的判断是,ES5 会在 2013 年的年中成为 JavaScript 开发的主流标准,并在此后五年中一直保持这个位置。

2011 年 6 月,ECMAScript 5.1 版发布,并且成为 ISO 国际标准(ISO/IEC 16262:2011)。

2013 年 3 月,ECMAScript 6 草案冻结,不再添加新功能。新的功能设想将被放到 ECMAScript 7。

2013 年 12 月,ECMAScript 6 草案发布。然后是 12 个月的讨论期,听取各方反馈。

2015 年 6 月,ECMAScript 6 正式通过,成为国际标准。从 2000 年算起,这时已经过去了 15 年。

目前,各大浏览器对 ES6 的支持可以查看kangax.github.io/compat-table/es6/。

Node.js 是 JavaScript 的服务器运行环境(runtime)。它对 ES6 的支持度更高。除了那些默认打开的功能,还有一些语法功能已经实现了,但是默认没有打开。使用下面的命令,可以查看 Node.js 默认没有打开的 ES6 实验性语法。

// Linux & Mac
$ node --v8-options | grep harmony// Windows
$ node --v8-options | findstr harmony

5、Babel 转码器

Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。

// 转码前
input.map(item => item + 1);// 转码后
input.map(function (item) {return item + 1;
});

上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。

下面的命令在项目目录中,安装 Babel。

$ npm install --save-dev @babel/core

1、配置文件.babelrc

Babel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。

该文件用来设置转码规则和插件,基本格式如下。

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

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

# 最新转码规则
$ npm install --save-dev @babel/preset-env# react 转码规则
$ npm install --save-dev @babel/preset-react

然后,将这些规则加入.babelrc

  {"presets": ["@babel/env","@babel/preset-react"],"plugins": []}

注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc

2、命令行转码

Babel 提供命令行工具@babel/cli,用于命令行转码。

它的安装命令如下。

$ npm install --save-dev @babel/cli

基本用法如下。

# 转码结果输出到标准输出
$ npx babel example.js# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib# -s 参数生成source map文件
$ npx babel src -d lib -s

3、babel-node

@babel/node模块的babel-node命令,提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,而且可以直接运行 ES6 代码。

首先,安装这个模块。

$ npm install --save-dev @babel/node

然后,执行babel-node就进入 REPL 环境。

$ npx babel-node
> (x => x * 2)(1)
2

babel-node命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件es6.js,然后直接运行。

# es6.js 的代码
# console.log((x => x * 2)(1));
$ npx babel-node es6.js
2

4、@babel/register 模块

@babel/register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js.jsx.es.es6后缀名的文件,就会先用 Babel 进行转码。

$ npm install --save-dev @babel/register

使用时,必须首先加载@babel/register

// index.js
require('@babel/register');
require('./es6.js');

然后,就不需要手动对index.js转码了。

$ node index.js
2

需要注意的是,@babel/register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。

5、polyfill

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如IteratorGeneratorSetMapProxyReflectSymbolPromise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行,可以使用core-jsregenerator-runtime(后者提供generator函数的转码),为当前环境提供一个垫片。

安装命令如下。

$ npm install --save-dev core-js regenerator-runtime

然后,在脚本头部,加入如下两行代码。

import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');

Babel 默认不转码的 API 非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

6、浏览器环境

Babel 也可以用于浏览器环境,使用@babel/standalone模块提供的浏览器版本,将其插入网页。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。

Babel 提供一个REPL 在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/5955.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

选择前端框架重要依据是什么?

状态更改检测&#xff0c;也就是检测应用程序对状态值的改变&#xff0c;这样才会相应地更新 UI。 &#xff08;#MVC模式中模型Model的改变会更新View界面UI&#xff0c;这点类似后端的ORM&#xff0c;对象状态更改通过ORM框架自动变更相应数据表值&#xff09; 变更检测是前…

IntelliJ IDEA2023中利用maven-archetype-quickstart模板创建项目无src文件夹及maven插件下载过慢问题的解决

目录 介绍问题之解决问题2的解决问题1的解决 介绍 昨天下载并安装了IntelliJ IDEA 2023的最新版&#xff08;以下简称为IDEA 2023&#xff09;&#xff0c;学习利用该IDE编写Java项目及将其与maven结合构建项目。我所安装的maven是去年暑假安装的&#xff0c;版本为Apache Mav…

linux系统如何使用GPT工具进行分区

GPT&#xff08;GUID Partition Table&#xff09;是一种用于硬盘分区的新分区表格式&#xff0c;它具有比旧的MBR&#xff08;Master Boot Record&#xff09;分区表更高的灵活性和可靠性。在Linux系统中&#xff0c;我们可以使用GPT工具进行分区操作&#xff0c;本文将对如何…

linux常用命令—— less、more、head、cat

文章目录 1、less&#xff1a;向前或向后查看文件内容&#xff08;推荐使用&#xff09;1.1、less 基本用法1.2、快捷键操作1.3、查找文件中的关键字使用说明 1.4、linux中 less和more 的区别 2、more&#xff1a; 分页显示文件内容3、head&#xff1a;查看文件开头的内容4、ca…

认识主被动无人机遥感数据、预处理无人机遥感数据、定量估算农林植被关键性状、期刊论文插图精细制作与Appdesigner应用开发

目录 第一章、认识主被动无人机遥感数据 第二章、预处理无人机遥感数据 第三章、定量估算农林植被关键性状 第四章、期刊论文插图精细制作与Appdesigner应用开发 更多推荐 遥感技术作为一种空间大数据手段&#xff0c;能够从多时、多维、多地等角度&#xff0c;获取大量的…

[SQL挖掘机] - 删除数据库

介绍: 使用 SQL 中的 drop database命令。它会删除指定的数据库及其所有相关的表、视图、索引等对象。 使用命令: 下面是 drop database命令的基本语法&#xff1a; drop database database_name;其中&#xff0c;database_name是要删除的数据库的名称。 请注意&#xff0…

【数据结构常见七大排序(一)】—插入排序篇【直接插入排序】And【希尔排序】

目录 1.排序的概念及其运用1.1排序的概念1.2排序运用​​​​​​​​​​​​​​​​​​​​​1.3常见的七大排序 ​​2.直接插入排序2.1基本思想​​2.2直接插入排序2.3动图助解2.4直接插入排序源码​2.5直接插入排序的特性总结 ​​3.希尔排序( 缩小增量排序 )​​3.1希尔…

STM32CubeMX X-CUBE-AI更新模型

如题&#xff0c;我采用一个采用stm32CUBEMX生成了工程&#xff0c;工程里面使用了X-CUBE-AI对自定义的模型进行模型压缩&#xff0c;但是我经常要更新模型&#xff0c;那么怎样更新模型了。这里开博客记录一下。 如图所示&#xff0c;为基于STM32CUBEMX生成的工程文件目录结构…

C/C++ 程序 IDE 开发工具 CLion

下载地址&#xff1a; https://www.jetbrains.com/clion/ https://www.jetbrains.com/clion/ 下载地址&#xff1a; https://www.jetbrains.com/clion/download/ https://www.jetbrains.com/clion/download/ 历史版本&#xff08;老版本&#xff09;下载地址&#xff1a; h…

TCP/IP网络编程 第二十章:Windows中的线程同步

同步方法的分类及CRITICAL_SECTION同步 用户模式&#xff08;User mode)和内核模式&#xff08;Kernal mode&#xff09; Windows操作系统的运行方式是“双模式操作”&#xff08;Dual-mode Operation&#xff09;,这意味着Windows在运行过程中存在如下2种模式。 □用户模式&…

【分布式学习】服务注册与发现:Eureka、zk、Nacos、Consul对比

服务发现框架对比 –NacosEurekaConsulCoreDNSZookeeper一致性协议CPAPAPCP—CP健康检查TCP/HTTP/MYSQL/Client BeatClient BeatTCP/HTTP/gRPC/Cmd—Keep Alive负载均衡策略权重/metadata/SelectorRibbonFabioRoundRobin—雪崩保护有有无无无自动注销实例支持支持不支持不支持…

预处理过程(2/13)

头文件包含&#xff1a;#include定义一个宏&#xff1a;#define条件编译&#xff1a;#if、#else、#endif编译控制&#xff1a;#pragma 编译器提供的这些预处理命令&#xff0c;大大方便了程序的编写&#xff1a;通过头文件包含可以实现模块化编程&#xff1b;使用宏可以定义一…

关于正则表达式的简单介绍以及使用

一、介绍 正则表达式通常被用来检索匹配某种模式&#xff08;规律&#xff09;的文本 日常文本检索&#xff0c;如果单纯检索某个数字&#xff0c;字母&#xff0c;或者单词匹配出来的结果较多&#xff0c;而面对目标文件内容较大的时&#xff0c;我们也不可能肉眼对检索出来的…

JavaCV error AAC with no global headers is currently not supported

当我使用JavaCV库&#xff08;FFmpegFrameGrabber FFmpegFrameRecorde&#xff09;尝试将dhav码流转为rtsp的时候&#xff0c;出现了以下报错&#xff1a; Error: [rtsp 0000002318df7c30] AAC with no global headers is currently not supported.Exception in thread &quo…

leetcode 542. 01 矩阵

给定一个由 0 和 1 组成的矩阵 mat &#xff0c;请输出一个大小相同的矩阵&#xff0c;其中每一个格子是 mat 中对应位置元素到最近的 0 的距离。 两个相邻元素间的距离为 1 。 示例 1&#xff1a; 输入&#xff1a;mat [[0,0,0],[0,1,0],[0,0,0]] 输出&#xff1a;[[0,0,0],…

docker安装yapi

一&#xff1a;创建docker-compose.yml 创建docker-compose.yml文件&#xff0c;具体内容如下&#xff1a; version: 3services:yapi-web:image: jayfong/yapi #拉取镜像container_name: yapi-web #容器名称ports: - 3000:3000 #端口映射environment:- YAPI_ADMIN_ACCOUN…

解锁新技能《logback packagingData属性配置作用及源码分析》

开源SDK: <dependency><groupId>io.github.mingyang66</groupId><artifactId>oceansky-logger</artifactId><version>4.3.6</version> </dependency> <!-- 基于logback的日志组件SDK --> <dependency><grou…

Hadoop——Hadoop单机搭建问题汇总

1、org.apache.hadoop.security.AccessControlException: Permission denied: userroot... 解决方法&#xff1a;关闭Hadoop,在hdfs-site.xml文件中添加&#xff1a; <property><name>dfs.permissions</name><value>false</value> </proper…

【Unity2D】设置一物体默认在其他物体之上不被遮挡

比如我想让机器人显示在箱子的前面。 点击箱子&#xff0c;将其层级设置在机器人的后面。 即修改箱子的Order in Layer 在机器人之后 物体默认的Order in Layer 都是0 &#xff0c;将箱子的Order in Layer修改为-1即可 这样将确保先绘制机器人&#xff0c;然后绘制箱子。这样…

C#鼠标拖拽,移动图片实例

最近工作需要做一个鼠标可以拖拽移动图片的功能。 写了几个基本功能&#xff0c;勉强能用。这里记录一下。欢迎大神补充。 这个就是完成的功能。 下边的绿色是一个pictureBox&#xff0c;白色框也是一个pictureBox&#xff0c;他们二者是子父级关系。 绿色是父级&#xff0c…