ECMAScript6 and its constant variable declaration

Several important versions of ECMAScript (ES for short)

ES6 is a general reference, meaning the next generation standard of JavaScript after version 5.1, covering ES2015, ES2016, ES2017, etc. The first version of ES6 was released in June 2015 and its official name is "ECMAScript 2015 Standard" ( Referred to as ES2015).

ES6 expands many new features on the basis of ES5.

ES5: Released in 2009

ES6 was released in 2015. ES2015 expanded many new features based on ES5.

ES7 2016 released ES June 2015 (not much changed)

1. Index 3**3=27

2. The array prototype method includes() is used to determine whether an array contains a specified value.
var arr=[1,2,3,4,] console.log(arr.includes(2))

[NaN].includes(NaN);  // true
[NaN].indexOf(NaN);   // -1
ECMAScript 6.0 (hereinafter referred to as ES6) is the next generation standard of the JavaScript language and was officially released in June 2015. Its goal is to enable the JavaScript language to be used to write complex large-scale applications and become an enterprise-level development language.

2.babel--Convert ES6 code to ES5 code

初始化项目 
npm init 
npm init -y 快速初始化项目

1. Install transcoding tools

cnpm install -g babel-cli   babel
cnpm install --save -dev babel-cli babel-preset-latest

2. Install conversion rules

cnpm install -g babel-preset-latest

3. Specify the conversion rules to create a new .babelrc

{
   "presets":["latest"]
}
cnpm install --save-dev babel-cli babel-preset-latest

The babel tool is a tool used in the development phase of the project - save is a tool installation and partial installation in the development phase
jquery tool is a tool used in the product phase in the project - dev is a tool installation and partial installation in the online phase

4. You can also input the file converted from ES6 to ES5 into another file.

babel 2-hello.js --out-file 2-helloo.js

5. Convert the es6 files in the entire src directory into es5 files to the dist directory

babel src --out-dir dist

3.Modularization

Modular mechanism (commonjs and es6)

Package management mechanism (npm, cnpm, yarn)

NPM is a tool that makes it easier for Javascript developers to share, reuse and update code. The reused code is called a package or module. A module contains one or more js files. The module generally also contains a package.json file, which contains the configuration information of the module. This file is a json file, and its configuration information is as follows: name module name version module version description description information main specifies module entry file type When the type value is module, es modular scripts scripts are supported, and can be called using 'npm run script name' dependencies dependencies devDependencies environment dependencies or test dependencies

cnpm update // When installing cnpm for the first time, just use the latest domain name $ npm config set registry https://registry.npmmirror.com/ $ npm install -g cnpm --registry= https://registry.npmmirror.com

// Configure mapping modification rules in the project npm.taobao.org => npmmirror.com registry.npm.taobao.org => registry.npmmirror.com

# Old $ npm config set registry http://registry.npm.taobao.org/ # New $ npm config set registry https://registry.npmmirror.com/ # Old

$ npm install -g cnpm --registry=https://registry.npm.taobao.org # 新 $ npm install -g cnpm --registry=https://registry.npmmirror.com

# 旧 $ npm install -g yarn --registry=https://registry.npm.taobao.org # 新 $ npm install -g yarn --registry=https://registry.npmmirror.com
ES6 modular code import export
NodeJS has its own modularization mechanism that implements the CommonJS modularization specification require('babel-polyfill')
a.js b.js b.js needs to use variables in a.js
1.html document introduces a.js b.js --
2. Modular import and export, modules can communicate with each other
request.js
    export function get(){
    }
Home.vue
    import {get} from '/path'
a.js exports name
Import name into b.js

CommonJs modular specification (server side)

ES6 modular
    specification import module import 'xxx'
export module
    export {firstName, lastName}; // list export
export { firstName as first, lastName as last}; // rename
    export export var a =3;Export a single attribute;
    export functions(){}//Export a single attribute
    . Default export.
A module can only have one default export. You cannot use var, let or const to export the default value export default.
       export default{}
        export default function (){}
incorrect writing method
    var a=1;
    export a; does not provide an external interface export{a}

1-module1.js

let fristName = 'ren'
let lastName = 'terry';
export { fristName, lastName }
console.log('这是module1模块')

2-module2.js

import './1-module1'
import { fristName, lastName } from './1-module1'
// es6 静态加载  编译时加载
console.log('module2打印', fristName, lastName)
先转码  再运行
babel src --out-dir dist
node dist/module/2-module2.js

ES6 exports an interface, and the interface stores a variable.

4. CommonJS modularization

CommonJS modules are objects, and object properties must be looked up on input.

Modular objects

Node provides a Module constructor internally. All modules are instances of Module. Inside each module, there is a module object representing the current module. It has the following properties. module.id The identifier of the module, usually the module file name with an absolute path. module.filename The file name of the module, with an absolute path. module.loaded returns a Boolean value indicating whether the module has completed loading. module.parent returns an object representing the module that called this module. module.children returns an array representing other modules to be used by this module. module.exports represents the value output by the module.

//nodejs模块导出  commonJS规范
let firstname = 'ren';
let lastname = 'terry';
// module.exports.firstname = firstname;
module.exports = {
  firstname: firstname,
  lastname: lastname
};
// Nodejs模块导入
let { firstname, lastname } = require('./module3');
console.log(firstname, lastname);
console.log(module.id);
console.log(module.filename);
console.log(module.loaded);
console.log(module.parent);
console.log(module.children);

Differences between ES6 modules and CommonJS modules:

1. The CommonJS module outputs a copy/replication of a value, and the ES6 module outputs a reference to the value.
2. CommonJS modules are loaded at runtime, and ES6 modules are output interfaces at compile time.

1.Copy of CommonJS modular specification values

1.1 Export module

  let firstname='ren';
   let lastname='terry';
   setTimeout(()=>{
       firstname:'zhao'
   },2000)
   module.exports={
       firstname,
       lastname
   };

1.2 Import module

 let {firstname,lastname}=require('./module1.js');
   console.log(firstname,lastname);
   setTimeout(()=>{
      console.log(firstname,lastname);//ren terry
   },4000)

2. References to ES6 module values

2.1 Export module

  let firstname='ren';
   let lastname='terry';
   setTimeout(()=>{
       firstname='zhao'
   },2000)
   export {
       firstname,
       lastname
   };

2.2 Import module

 import {firstname,lastname} from './module3.js';
    console.log(firstname,lastname);
    setTimeout(()=>{
      console.log(firstname,lastname);//zhao terry
   },4000)

statement

1.let is used to declare a variable

        1 The variable will not be promoted, that is, the variable cannot be used before the variable is declared.
        2. It cannot be declared repeatedly
        . 3. It has a block-level scope and is only valid in the current scope
        . 4. There is a temporary dead zone.

2.const is used to declare a constant

        1. Variable declaration will not be promoted, that is, the variable cannot be used before the variable is declared.
        2. Repeated declarations are not allowed.
        3. It has local scope, that is, variables declared by const can only be used in the corresponding code block.
        4. Variables declared by const need to be assigned a value when they are declared.
        5. There is a temporary dead zone