讓我們來聊一聊 JavaScript 新版本：ECMAScript 2016 (通常被稱為 ES7)。
ES7 帶來了兩個新功能：Array.prototype.includes() 和 新的指數運算子：**
Array.prototype.includes()
使用 .indexOf() 來確定一個元素是否在陣列中存在的方式已經成為歷史。
|
1 2 3 |
['my','mom','hates','me'].indexOf('mom') // 1 // 雖然有些難以理解，但返回值 1 表示 'mom' 字串在陣列中的索引值，而不是陣列中只有一個 'mom'。 |
重點其實是“存在”。
.indexOf() 的“本職工作”應該是用來確定某個值在陣列中的索引。
而如果我們的目的是確定一個元素是否在陣列中存在，那麼使用 .indexOf() 並不是最好的選擇。理由很簡單：當查詢某個東西的存在性時我們希望得到一個布林值，而不是數值。
Array.prototype.includes() 做的恰恰就是這件事。它能確定陣列中是否包含給定元素，有就返回 true，否則返回 false 。
|
1 2 3 4 |
var life = ['mom', 'dad', 'brother'] life.includes('mom') // true life.includes('girlfriend') // false |
深入標準
Array.prototype.includes ( searchElement [ , fromIndex ] )
searchElement—— 要查詢的元素。fromIndex（可選的） — 開始查詢的起始索引。
深入瞭解 規範，就像一次尋找力量之旅。
規範中的內容如下：
讓我們循序漸進，用一些例子來理解規範。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
# includes # [1] searchs in ascending order # 搜尋按升序進行 > Array(10000000).concat(4).includes(4) true # [Time] 500 miliseconds 耗時 500ms > [4].concat(Array(10000000)).includes(4) true # [Time] 90 miliseconds 耗時 90ms # [2] uses SameValueZero algorithm # 使用 SameValueZero 演算法比較 > [NaN].indexOf(NaN) -1 > [NaN].includes(NaN) true # [3] if found at any position returns true # otherwise, false is returned # 在任何位置找到都會返回 true，否則返回 false > [1, 2, 3].includes(2) true > [1, 2, 3].includes(7) false # [4] it treats missing array elements as undefined # 將陣列中缺失的元素視為 undefined > [1, , 3].indexOf(undefined) -1 > [1, , 3].includes(undefined) true |
- 這裡的區別是元素 4 的位置。在第一個例子中 4 位於陣列末尾，所以 includes 方法會搜尋整個陣列。按規範，
.includes()方法會在找到searchElement後立即返回，所以第二個例子執行地更快。 - SameValueZero 演算法與嚴格相等比較（
.indexOf()採用）的最大區別就是它允許檢測 NaN 元素。 - 元素被找到就返回
true，否則返回false。不再使用索引作為結果了 - 與
.indexOf()相反，.includes()並不會跳過缺失的陣列元素，而會將其視為undefined。
你已經開始感受到力量了麼？我們還沒說 fromIndex 呢。
規範中是這樣寫的：
可選的第二引數
fromIndex預設值為0（這意味整個陣列都會被搜尋）。如果這個引數的值大於或等於陣列長度，則會直接返回 false ，陣列將不會被搜尋。如果值為是負數，則代表相對於陣列末尾的偏移量。如果偏移量超過陣列長度，則整個陣列都會被搜尋。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
# fromIndex # [1] it defaults to 0 # 預設為 0 > [1,2,3].includes(1) true # [2] if >= array.length, false is returned # 如果 >= array.length, 返回 false > [1,2,3].includes(1, 10) false # [3] if negative, it is used as the offset, i.e. # 如果為負數，則被用作偏移 # offset = array.length + fromIndex > [1,2,3].includes(3, -2) # fromIndex = 3 (array length) + -2 (fromIndex) = 1 true # [4] if offset < 0, the whole array is searched # 如果根據偏移計算的搜尋起始索引 < 0，則整個陣列都會被搜尋 > [1,2,3].includes(1, -5) # fromIndex = 0 true |
- 如果不提供
fromIndex引數則預設其為0，這時整個陣列都將被搜尋。 - 當
fromIndex大於陣列長度時，.includes()立即返回 false。 - 如果
fromIndex是負值, 那麼起始索引計算方式為array.length — fromIndex。這在搜尋陣列末尾元素時很有用。例如fromIndex = -5意味著只搜尋最後 5 個元素。 - 為了避免
.includes()執行中斷，當計算得到的起始索引小於 0 時，整個陣列會被搜尋。我個人更希望中斷 ?
好了——最後一個新功能……
指數運算子（**）
我們一直期待著指數計算也能像進行加減乘除一樣方便。
是的，這一天已經到來。
操作符 ** 和 Math.pow() 的行為一致。它返回第一個運算元的第二個運算元次的乘方值 (例如 x ** y)。
|
1 2 3 4 5 6 |
# x ** y (aka Math.pow(x,y)) > 2 ** 2 4 > 2 ** 'operand' NaN |
就這麼多！
現在你已經掌握 ES7 ！好好用吧！