ECMAScript 6 (ES6 for short) is the next generation standard of the JavaScript language, which was officially released in June 2015. Its goal is to make the JavaScript language usable for writing complex, large-scale applications, called an enterprise development language.

1.1 Relationship between ECMAScript and JavaScript

The relationship between ECMAScript and JavaScript is that the former is a specification of the latter and the latter is an implementation of the former (the zero-shopping ECMAScript dialect also has JScript and ActionScript). In everyday situations, the two words are interchangeable.

1.2 Relationship between ES6 and ECMAScript2015

ECMAScript2015 (ES2015 for short) is also a word that is often used, so how does it relate to ES6? After ECMAScript5.1 was released in 2011, version 6.0 was developed. Thus, the term ES6 literally refers to the next version of the JavaScript language. ES6 is both a historical term and a general reference, meaning the next generation standard of JavaScript after 5.1 version, covering ES2015, ES2016, ES2017, etc., and ES2015 is the official name, specially released the official version of the language standard.

1.3 Grammar Proposal approval process

Anyone can make a proposal to the Standards Committee (also known as the TC39 Committee) to change the language standard. A new grammar goes through five stages from proposal to formal standard. Changes to Tiktok at each stage are approved by the TC39 Committee.

  • Stage 0: Strawman
  • Stage 1: A Proposal
  • Stage 2: The Draft
  • This is Stage 3.
  • Stage 4: Finished

Once a proposal makes it to Stage 2, it is generally assumed that it will be included in the later formal standards. All current proposals can be found on TC39’s website at Github.com/tc39/ecma26… In the view.

1.4 History of ECMAScript

ES6 took 15 years from the beginning to the final release.

1.5 Babel transcoder

Babel is a widely-used ES6 transcoder that converts ES6 code to ES5, enabling some browsers that do not support ES6 to execute the code. Here’s a transcoding Babel does to ES6 syntax to make code work in JavaScript environments that don’t support arrow functions:

Input. map(item => item + 1); Input. map(function (item) {return item + 1; });Copy the code

The following command installs Babel in the project directory.

$ npm install --save-dev @babel/core
Copy the code

1.6 polyfill

By default, Babel only converts new JavaScript syntax, not new apis, such as Iterator, Generator, Set, Map, Proxy, Reflect, Symbol, Promise, etc. And some methods defined on global objects (such as Object.assign) do not transcode.

For example, ES6 adds the array. from method to Array objects. Babel doesn’t transcode this method. If you want this method to work, you can use core-js and regenerator-Runtime (the latter provides transcoding for the generator function) to provide a shim for the current environment. Installation command:

$ npm install --save-dev core-js regenerator-runtime
Copy the code

Then add the following to the script header:

import 'core-js'; import 'regenerator-runtime/runtime'; / / or require (' core - js); require('regenerator-runtime/runtime');Copy the code

There are a number of apis for Babel that do not transcode by default. See the definitions. Js file of the babel-plugin-transform-Runtime module for a full list.

Browser environment

Babel can also be used in a browser environment, plugging it into a web page using the browser version provided by the @babel/standalone module.

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

Note that web pages convert ES6 code to ES5 in real time, which has an impact on performance. The scripts that have been transcoded must be loaded in the production environment.

Babel provides an online REPL compiler that can convert ES6 code to ES5 code online. The converted code can be directly inserted into the web page as ES5 code.