ECMAScript6 とその定数変数宣言

ECMAScript (略して ES) のいくつかの重要なバージョン

ES6とは、JavaScriptのバージョン5.1以降の次世代標準を意味し、ES2015、ES2016、ES2017などを指す総称です。ES6の最初のバージョンは2015年6月にリリースされ、正式名称は「ECMAScript 2015 Standard」（以下、「ECMAScript 2015 Standard」といいます）です。 ES2015)。

ES6 は、ES5 に基づいて多くの新機能を拡張します。

ES5: 2009 年リリース

ES6 は 2015 年にリリースされました。ES2015 では、ES5 に基づいて多くの新機能が拡張されました。

ES7 2016 リリース ES 2015 年 6 月 (大きな変更はありません)

1. インデックス 3**3=27

2. 配列プロトタイプメソッド include() は、配列に指定された値が含まれているかどうかを判断するために使用されます。
var arr=[1,2,3,4,] console.log(arr.includes(2))

[NaN].includes(NaN);  // true
[NaN].indexOf(NaN);   // -1
ECMAScript 6.0 (以下、ES6) は JavaScript 言語の次世代標準であり、2015 年 6 月に正式リリースされました。その目標は、JavaScript 言語を使用して複雑な大規模アプリケーションを作成できるようにし、エンタープライズレベルの開発言語になることです。

2.babel -- ES6 コードを ES5 コードに変換します。

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

1.トランスコーディングツールをインストールする

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

2. 変換ルールをインストールする

cnpm install -g babel-preset-latest

3. 新しい .babelrc を作成するための変換ルールを指定します。

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

babel ツールはプロジェクトの開発フェーズで使用されるツールです - save は開発フェーズでのツールのインストールと部分インストールです
jquery ツールはプロジェクトの製品フェーズで使用されるツールです - dev はツールのインストールと部分インストールですオンライン段階では。

4. ES6からES5に変換したファイルを別ファイルに入力することもできます。

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

5. src ディレクトリ全体の es6 ファイルを dist ディレクトリの es5 ファイルに変換します。

babel src --out-dir dist

3.モジュール化

モジュラーメカニズム (commonjs および es6)

パッケージ管理機構（npm、cnpm、yarn）

NPM は、JavaScript 開発者がコードを簡単に共有、再利用、更新できるようにするツールです。再利用されたコードはパッケージまたはモジュールと呼ばれます。モジュールには 1 つ以上の js ファイルが含まれています。通常、モジュールには、モジュールの構成情報を含む package.json ファイルも含まれています。このファイルは json ファイルであり、その構成情報は次のとおりです。 name モジュール名 version モジュールバージョン description 説明情報 main はモジュールエントリファイルの種類を指定します。 type 値が module の場合、es モジュラースクリプトスクリプトがサポートされており、' を使用して呼び出すことができます。 npm run スクリプト名' の依存関係依存関係 devDependency 環境の依存関係またはテストの依存関係

cnpm update // 初めて cnpm をインストールするときは、最新のドメイン名を使用してください $ npm config set registry https://registry.npmmirror.com/ $ npm install -g cnpm --registry= https://registry.npmmirror .com

// プロジェクトのマッピング変更ルールを構成する npm.taabao.org => npmmirror.com registry.npm.taabao.org => registry.npmmirror.com

# 旧 $ npm config set registry http://registry.npm.taobao.org/ # 新 $ npm config set registry https://registry.npmmirror.com/# 旧

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

# 旧 $ npm install -g tongue --registry= https://registry.npm.taabao.org # 新 $ npm install -g tongue --registry= https://registry.npmmirror.com
ES6 モジュラー コードインポート エクスポート
NodeJS には、CommonJS モジュール仕様を実装するための独自のモジュール化メカニズムがあります require('babel-polyfill')
a.js b.js b.js は、
a.js b.js -- 
2. モジュール式のインポートとエクスポート、モジュール間の通信が可能です。
request.js
    エクスポート関数 get(){ 
    Home.vue 
    import {get} from '/path' 
a.js は名前を b.js にエクスポートし
、
名前をインポートします

CommonJs モジュラー仕様 (サーバー側)

ES6 モジュラー
    仕様 import module import 'xxx'
export module
    export {firstName, lastName}; //リストのエクスポート export
{firstName as first, lastName as last}; //名前の変更
    export var a =3;単一の属性をエクスポートします。export
    function(){}//単一の属性をエクスポートします
    。デフォルトのエクスポート。
モジュールはデフォルトのエクスポートを 1 つだけ持つことができます。var、let、または const を使用してデフォルト値のエクスポートデフォルトをエクスポートすることはできません。
       エクスポートデフォルト{}
        エクスポートデフォルト関数 (){}
書き方が間違っています
    var a=1;
    エクスポート a; は外部インターフェースを提供しませんエクスポート{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 はインターフェイスをエクスポートし、インターフェイスには変数が保存されます。

4. CommonJSのモジュール化

CommonJS モジュールはオブジェクトであり、入力時にオブジェクトのプロパティを検索する必要があります。

モジュール式オブジェクト

ノードは内部的にモジュールコンストラクターを提供します。すべてのモジュールは Module のインスタンスです。各モジュール内には、現在のモジュールを表すモジュールオブジェクトがあります。以下のような性質を持っています。module.id モジュールの識別子。通常は絶対パスを含むモジュールファイル名です。module.filename モジュールのファイル名 (絶対パス付き)。module.loaded は、モジュールのロードが完了したかどうかを示すブール値を返します。module.parent は、このモジュールを呼び出したモジュールを表すオブジェクトを返します。module.children は、このモジュールで使用される他のモジュールを表す配列を返します。module.exports は、モジュールによって出力された値を表します。

//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);

ES6 モジュールと CommonJS モジュールの違い:

1. CommonJS モジュールは値のコピー/レプリケーションを出力し、ES6 モジュールは値への参照を出力します。
2. CommonJS モジュールは実行時にロードされ、ES6 モジュールはコンパイル時に出力インターフェイスになります。

1.CommonJSモジュラー仕様値のコピー

1.1 エクスポートモジュール

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

1.2 インポートモジュール

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

2. ES6 モジュール値への参照

2.1 エクスポートモジュール

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

2.2 インポートモジュール

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

声明

1.let は変数の宣言に使用されます

        1. 変数は昇格されません。つまり、変数が宣言されるまでは変数を使用できません。
        2. 繰り返し宣言することはできません
        。 3. ブロックレベルのスコープがあり、現在のスコープでのみ有効です
        。 4.一時的なデッドゾーンがあります。

2.constは定数の宣言に使用されます

        1. 変数宣言は昇格されません、つまり、変数が宣言されるまでは変数を使用できません
        2. 繰り返しの宣言は許可されません。
        3. ローカルスコープを持つ、つまり、const で宣言された変数は、対応するコードブロック内でのみ使用できます
        4. const で宣言された変数は、宣言時に値を割り当てる必要があります。
        5. 一時的なデッドゾーンがある