ECMAScript 6

ECMA 組織前身是 歐洲計算機制造商協會

指定和釋出指令碼語言規範，標準在每年的 6 月份正式釋出一次，作為當年的正式版本

這樣一來，就不需要以前的版本號了，只要用年份標記就可以了.

ES6 既是一個歷史名詞，也是一個泛指“下一代 JavaScript 語言”，

含義是 5.1 版以後的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017 等等，

而 ES2015 則是正式名稱，特指該年釋出的正式版本的語言標準

一種新的語法從提案到變成正式標準，需要經歷五個階段。每個階段的變動都需要由 TC39 委員會批准。

Stage 0 - Strawman（展示階段）

js 包含三個部分（ECMAScript 、BOM、DOM）

• ECMAScript 新功能的開發，語法的簡化，效能優化

2009年釋出了 ES5.1，並且成為 ISO 國際標準（ISO/IEC 16262:2011）

2015年6月 ES6

還在實現中ing，從開始 制定 到 最後 釋出，正式通過，成為國際標準，整整用了 15 年

目標： 是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言

2016年ES7（變化不大，很多草案待實現）

2017年ES8

2018年ES9

• 擴充套件瀏覽器端
• BOM window
• DOM document
• 擴充套件伺服器端

Node

Node 是 JavaScript 的伺服器執行環境（runtime）。它對 ES6 的支援度更高。

除了那些預設開啟的功能，還有一些語法功能已經實現了，但是預設沒有開啟。

• 使用下面的命令，可以檢視 Node 已經實現的 ES6 特性

$ node --v8-options | grep harmony

Babel 轉碼器

是一個廣泛使用的 ES6 轉碼器，可以將 ES6 程式碼轉為 ES5 程式碼，從而在現有環境執行。

這意味著，你可以用 ES6 的方式編寫程式，又不用擔心現有環境是否支援。

• 注意：

Babel 預設只轉換新的 JavaScript 句法（syntax），而不轉換新的 API

比如 Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise 等全域性物件

以及一些定義在全域性物件上的方法（比如Object.assign）都不會轉碼

• 比如

• // 轉碼前
  input.map(item => item + 1);
  
  // 轉碼後
  input.map(function (item) {
      return item + 1;
  });

• 安裝:npm install --save-dev @babel/core
• 配置檔案.babelrc
• 基本配置格式：

• {
      "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": []
    }

1

1

1

1

• 'use strict';

嚴格模式，消除 js 語法的一些不合理、不嚴謹之處，減少一些怪異現象。

當瀏覽器識別，則進入嚴格模式解析執行。不識別的瀏覽器則忽略。

• 變數必須先宣告，在使用。
• 禁止自定義的函式中的 this 指向 window

預設指向 window 時，this 被賦值為 undefined

如果再函式中需要訪問 全域性時，直接用 window 就好

• eval(); 將會建立一個作用域，即不會影響全域性同名變數
• 物件禁止出現同名屬性

• var person = {
      name: "Tom",
      age: 22,
      
      get age (){
          return this.age;
      },
      set age (newAge){
          this.age = newAge;
      }
  };

• JSON

是一種輕量級的資料格式。 '{"name":"Ryen Toretto", "age": 22}' 屬性名，必須雙引號包裹

用來 作為前後臺互動的資料格式 （前臺傳送請求，後臺返回響應）

• 使用

• var obj = {name: "Tom", age: 18};
  
  var arr = [1, 3, 5, 7];
  
  var json = JSON.stringify(obj);    // 物件 處理成 JSON 資料
  console.log(json);
  
  json = JSON.stringify(arr);    // 陣列 處理成 JSON 資料
  console.log(json);
  
  
  // 解析 JSON
  var newArr = JSON.parse(json);
  console.log(newArr);

• ES6 新加入Object.create(obj);

將傳入的新物件 作為 新物件 的原型物件 // var newObj = {}; newObj.__proto__ = person; return newObj;

• 使用：

• var newObj = Object.create(person, {
      age:{
          value: 22
      },
      sex:{
          value: "男"
      }
  });

• ES6 對於陣列的擴充套件

var arr = [1, 6 ,8, 6, 9, 8, 5, 3, 2];

• 輸出第一個 6 的下標索引

arr.findIndex(function(item){item === 6;}); // 適用於 物件資料型別

等同於 arr.indexOf(6); // 找不到返回 -1 適用於 基本資料型別

• 輸出最後一個 6 的下標索引

arr.lastIndexOf(6);

• 輸出元素所有元素的值和下標

arr.forEach(function(item, index){... ...});

• 將所有元素 值+10，產生並返回這個新資料

var newArr = arr.map(function(item, index){return item+10;}); // 不影響原陣列

• 過濾出 原陣列 中值大於 4 的元素，作新陣列返回

var newArr = arr.filter(function(item, index){return item>4;}); // 不影響原陣列, 將 返回值為 true 的元素組成一個新陣列

• 輸出 陣列 各個元素的累加和

var sum = arr.reduce(function(prev, cur){return prev+cur;}, 0); // 從 左 開始迭代。 第二引數，是指第一次進入，prev 的值

var sum = arr.reduceRight(function(prev, cur){return prev+cur;}, 0); // 從 右 開始迭代