JavaScript ES6

ECMAScript 6 是什么？

ECMAScript 6 也稱為 ES6 和 ECMAScript 2015。

一些人把它稱作 JavaScript 6。

本章介紹 ES6 中的一些新特性。

  • JavaScript let
  • JavaScript const
  • 冪 (**)
  • 默認參數值
  • Array.find()
  • Array.findIndex()

對 ES6（ECMAScript 2015）的瀏覽器支持

Safari 10 和 Edge 14 是首先完全支持 ES6 的瀏覽器：

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript let

let 語句允許您使用塊作用域聲明變量。

實例

var x = 10;
// Here x is 10
{ 
  let x = 2;
  // Here x is 2
}
// Here x is 10

親自試一試

JavaScript const

const 語句允許您聲明常量（具有常量值的 JavaScript 變量）。

常量類似于 let 變量，但不能更改值。

實例

var x = 10;
// Here x is 10
{ 
  const x = 2;
  // Here x is 2
}
// Here x is 10

親自試一試

請在我們的 JavaScript Let / Const 章節中閱讀更多關于 let 和 const 的內容。

指數運算符

取冪運算符（**）將第一個操作數提升到第二個操作數的冪。

實例

var x = 5;
var z = x ** 2;          // 結果是 25

親自試一試

x ** y 的結果與 Math.pow(x,y) 相同：

實例

var x = 5;
var z = Math.pow(x,2);   // 結果是 25

親自試一試

默認參數值

ES6 允許函數參數具有默認值。

實例

function myFunction(x, y = 10) {
  // y is 10 if not passed or undefined
  return x + y;
}
myFunction(5); // 將返回 15

親自試一試

Array.find()

find() 方法返回通過測試函數的第一個數組元素的值。

此例查找（返回）第一個大于 18 的元素（的值）：

實例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

親自試一試

請注意此函數接受 3 個參數：

  • 項目值
  • 項目索引
  • 數組本身

Array.findIndex()

findIndex() 方法返回通過測試函數的第一個數組元素的索引。

此例確定大于 18 的第一個元素的索引：

實例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

親自試一試

請注意此函數接受 3 個參數：

  • 項目值
  • 項目索引
  • 數組本身

新的數字屬性

ES6 將以下屬性添加到 Number 對象：

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

實例

var x = Number.EPSILON;

親自試一試

實例

var x = Number.MIN_SAFE_INTEGER;

親自試一試

實例

var x = Number.MAX_SAFE_INTEGER;

親自試一試

新的數字方法

ES6 為 Number 對象添加了 2 個新方法：

  • Number.isInteger()
  • Number.isSafeInteger()

Number.isInteger() 方法

如果參數是整數，則 Number.isInteger() 方法返回 true。

實例

Number.isInteger(10);        // 返回 true
Number.isInteger(10.5);      // 返回 false

親自試一試

Number.isSafeInteger() 方法

安全整數是可以精確表示為雙精度數的整數。

如果參數是安全整數，則 Number.isSafeInteger() 方法返回 true。

實例

Number.isSafeInteger(10);    // 返回 true
Number.isSafeInteger(12345678901234567890);  // 返回 false

親自試一試

安全整數指的是從 -(253 - 1) 到 +(253 - 1) 的所有整數。

這是安全的：9007199254740991。這是不安全的：9007199254740992。

新的全局方法

ES6 還增加了 2 個新的全局數字方法：

  • isFinite()
  • isNaN()

isFinite() 方法

如果參數為 Infinity 或 NaN，則全局 isFinite() 方法返回 false。

否則返回 true：

實例

isFinite(10/0);       // 返回 false
isFinite(10/1);       // 返回 true

親自試一試

isNaN() 方法

如果參數是 NaN，則全局 isNaN() 方法返回 true。否則返回 false：

實例

isNaN("Hello");       // 返回 true

親自試一試

箭頭函數（Arrow Function）

箭頭函數允許使用簡短的語法來編寫函數表達式。

您不需要 function 關鍵字、return 關鍵字以及花括號。

實例

// ES5
var x = function(x, y) {
   return x * y;
}
// ES6
const x = (x, y) => x * y;

親自試一試

箭頭功能沒有自己的 this。它們不適合定義對象方法。

箭頭功能未被提升。它們必須在使用前進行定義。

使用 const 比使用 var 更安全，因為函數表達式始終是常量值。

如果函數是單個語句，則只能省略 return 關鍵字和花括號。因此，保留它們可能是一個好習慣：

實例

const x = (x, y) => { return x * y };

親自試一試