js基礎系列-數組的基本方法

時間 2019-11-05

標籤基礎系列數組基本方法欄目 JavaScript 简体版

原文原文鏈接

前言

如何實現數組的扁平化，一道題引起對javaScript基礎思考，今日現總結下數組的基本方法, 搬運不易，多多點贊，感謝！java

基本方法

定義數組: const arr = [1, 2, 3, 4, 5, 6]算法

數組檢測

instanceof

用於測試構造函數的prototype屬性是否出如今對象的原型鏈中的任何位置數組

console.log(arr instanceof Array)
# 輸出: true
複製代碼

instanceof文檔傳送門瀏覽器

Array.isArray()

用於肯定傳遞的值是不是一個 Arraybash

console.log(Array.isArray(arr)); 
# true
Array.isArray(Array.prototype) 
# true Array.prototype也是個數組
複製代碼

Polyfillapp

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}
複製代碼

Array.isArray文檔傳送門函數

Object.prototype.toString.call()

console.log(Object.prototype.toString.call(arr)); 
# [object Array]
複製代碼

toString文檔傳送門測試

數組循環

every

arr.every(callback[, thisArg])
ui

爲數組中的每一個元素執行一次 callback 函數，直到它找到一個使 callback 返回 false（表示可轉換爲布爾值 false 的值）的元素。若是發現了一個這樣的元素，every 方法將會當即返回 false。不然，callback 爲每個元素返回 true，every 就會返回true
every遍歷的元素範圍在第一次調用 callback 以前就已肯定了。在調用 every 以後添加到數組中的元素不會被 callback 訪問到。若是數組中存在的元素被更改，則他們傳入 callback 的值是 every 訪問到他們那一刻的值。那些被刪除的元素或歷來未被賦值的元素將不會被訪問到
every 不會改變原數組
空數組由於沒有元素返回true。(空數組中全部元素都符合給定的條件)

示例:
arr.every(function(item, index, array){
  return item < 4
})
# 輸出 false
# 此時arr = []
arr.every(function(item, index, array){
  return item > 4
})
# 輸出 true
複製代碼

Polyfillthis

if (!Array.prototype.every) {
  Array.prototype.every = function(fun /*, thisArg */) {
    'use strict';
    if (this === void 0 || this === null) {
        throw new TypeError();   
    }
    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
       throw new TypeError();
    }
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t && !fun.call(thisArg, t[i], i, t))
        return false;
    }
    return true;
  };
}
複製代碼

some

arr.some(callback(element[, index[, array]])[, thisArg])

爲數組中的每個元素執行一次 callback 函數，直到找到一個使得 callback 返回一個「真值」（便可轉換爲布爾值 true 的值）。若是找到了這樣一個值，some() 將會當即返回 true。不然，some() 返回 false
遍歷的元素的範圍在第一次調用 callback. 時就已經肯定了。在調用 some() 後被添加到數組中的值不會被 callback 訪問到。若是數組中存在且還未被訪問到的元素被 callback 改變了，則其傳遞給 callback 的值是 some() 訪問到它那一刻的值
some() 被調用時不會改變數組,對於放在空數組上的任何條件，此方法返回false

示例: 
function checkAvailability(arr, val) {
  return arr.some(function(arrVal) {
    return val === arrVal;
  });
}
checkAvailability(arr, 3)
# 輸出true
# 此時arr = []
arr.some(function(item, index, array){
    return item > 4
})
# 輸出 false
複製代碼

Polyfill

if (!Array.prototype.some) {
  Array.prototype.some = function(fun/*, thisArg*/) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.some called on null or undefined');
    }
    if (typeof fun !== 'function') {
      throw new TypeError();
    }
    var t = Object(this);
    var len = t.length >>> 0;
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t && fun.call(thisArg, t[i], i, t)) {
        return true;
      }
    }
    return false;
  };
}
複製代碼

forEach

arr.forEach(callback[, thisArg]), 返回值：undefined

callback 函數會被依次傳入三個參數：數組當前項的值、數組當前項的索引、數組對象自己
forEach 方法按升序爲數組中含有效值的每一項執行一次callback 函數，那些已刪除或者未初始化的項將被跳過（例如在稀疏數組上）
注意: 不可鏈式調用,而且沒有辦法停止或者跳出 forEach() 循環，除了拋出一個異常。若是你須要這樣，使用 forEach() 方法是錯誤的

示例：
const newArr = []
arr.forEach(function(item, index, array){
  newArr.push(item)
})
# 輸出newArr [1,2,3,4,5,6]
複製代碼

filter

arr.filter(callback(element[, index[, array]])[, thisArg])

爲數組中的每一個元素調用一次 callback 函數，並利用全部使得 callback 返回 true 或等價於true的值的元素建立一個新數組,若是沒有任何數組元素經過測試，則返回空數組
callback 只會在已經賦值的索引上被調用，對於那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有經過 callback 測試的元素會被跳過，不會被包含在新數組中
不會改變原數組，它返回過濾後的新數組

示例:
const newArr = arr.filter(function(item, index){
  return item > 4
})
# 輸出 [5,6]
複製代碼

map

arr.map(function callback(currentValue[, index[, array]]) { }[, thisArg])

給原數組中的每一個元素都按順序調用一次 callback 函數。callback 每次執行後的返回值（包括 undefined）組合起來造成一個新數組。 callback 函數只會在有值的索引上被調用；那些歷來沒被賦過值或者使用 delete 刪除的索引則不會被調用。
callback 函數會被自動傳入三個參數：數組元素，元素索引，原數組自己
map 不修改調用它的原數組自己（固然能夠在 callback執行時改變原數組）
一個新數組，每一個元素都是回調函數的結果,若是map的數組爲空，則返回空數組

示例：
const newArr = arr.map(function(item, index, array){
  let obj = {}
  obj[item] = item
  return obj
})
# 輸出[ { '1': 1 },{ '2': 2 },{ '3': 3 },{ '4': 4 },{ '5': 5 },{ '6': 6 } ]
複製代碼

數組的增刪改查操做

數組的查找

find

arr.find(callback[, thisArg])

對數組中的每一項元素執行一次 callback 函數，直至有一個 callback 返回 true。當找到了這樣一個元素後，該方法會當即返回這個元素的值，不然返回 undefined。注意 callback 函數會爲數組中的每一個索引調用即從 0 到 length - 1，而不只僅是那些被賦值的索引，這意味着對於稀疏數組來講，該方法的效率要低於那些只遍歷有值的索引的方法。
find方法不會改變數組

示例
const newArr = arr.find(function(item, index, array){
  return item === 5
})
# 輸出 5
複製代碼

findIndex

arr.findIndex(callback[, thisArg])

對數組中的每一個數組索引0..length-1（包括）執行一次callback函數，直到找到一個callback函數返回真實值（強制爲true）的值。若是找到這樣的元素，findIndex會當即返回該元素的索引。若是回調從不返回真值，或者數組的length爲0，則findIndex返回-1。與某些其餘數組方法（如Array#some）不一樣，在稀疏數組中，即便對於數組中不存在的條目的索引也會調用回調函數
回調函數調用時有三個參數：元素的值，元素的索引，以及被遍歷的數組
findIndex不會修改所調用的數組

示例
const index = arr.findIndex(function(item, index, array){
  return item === 2
})
# 輸出 1
複製代碼

indexOf

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

fromIndex 開始查找的位置。若是該索引值大於或等於數組長度，意味着不會在數組裏查找，返回-1。若是參數中提供的索引值是一個負值，則將其做爲數組末尾的一個抵消，即-1表示從最後一個元素開始查找，-2表示從倒數第二個元素開始查找。默認爲0
首個被找到的元素在數組中的索引位置; 若沒有找到則返回 -1
注意：對於String方法，請參閱 String.prototype.indexOf(),indexOf 使用嚴格相等（strict equality，即 ===）比較 searchElement 和數組中的元素。

示例
const index = arr.indexOf(2)
# 輸1
複製代碼

lastIndexOf

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

返回指定元素（也即有效的JavaScript值或變量）在數組中的最後一個的索引，若是不存在則返回 -1。從數組的後面向前查找，從 fromIndex 處開始
lastIndexOf 使用嚴格相等（strict equality，即 ===）比較 searchElement 和數組中的元素。

示例
# arr = [1,2,3,4,5,2,2]
const index = arr.lastIndexOf(2)
# 輸出6
複製代碼

includes

arr.includes(valueToFind[, fromIndex])

返回一個布爾值 Boolean ，若是在數組中找到了（若是傳入了 fromIndex ，表示在 fromIndex 指定的索引範圍中找到了）則返回 true，不然爲false
從fromIndex 索引處開始查找 valueToFind。若是爲負值，則按升序從 array.length + fromIndex 的索引開始搜（即便從末尾開始往前跳 fromIndex 的絕對值個索引，而後日後搜尋）。
fromIndex 大於等於數組的長度，則會返回false，且該數組不會被搜索。若是計算出的索引小於 0，則整個數組都會被搜索。默認爲 0，
注意:使用 includes()比較字符串和字符時是區分大小寫

示例
const bool = arr.includes(2) # true
const bool = arr.includes(2, 4) # false
const bool = arr.includes(2, -5) # true 從index 1開始查找
const bool = arr.includes(2, -2) # false 從index 4開始查找
const bool = arr.includes(2, -1) # false
const bool = arr.includes(12) # false
[1, 2, NaN].includes(NaN) # true
複製代碼

數組的增刪改等操做

push

arr.push(element1, ..., elementN)

將一個或多個元素添加到數組的末尾，並返回該數組的新長度
push 方法有意具備通用性。該方法和call()或apply()一塊兒使用時，可應用在相似數組的對象上。push方法根據length屬性來決定從哪裏開始插入給定的值。若是length不能被轉成一個數值，則插入的元素索引爲 0，包括 length 不存在時。當 length 不存在時，將會建立它。

示例
const length = arr.push(2)
# 輸出length = 7
# 原數組變成[ 1, 2, 3, 4, 5, 6, 2 ]
複製代碼

pop

arr.pop()

從數組中刪除最後一個元素，並返回該元素的值。此方法更改數組的長度(當數組爲空時返回undefined)
pop 方法有意具備通用性。該方法和 call() 或 apply() 一塊兒使用時，可應用在相似數組的對象上。pop方法根據 length屬性來肯定最後一個元素的位置。若是不包含length屬性或length屬性不能被轉成一個數值，會將length置爲0，並返回undefined

示例
const lastVal = arr.pop()
# 輸出lastVal = 6
# 原數組變成[ 1, 2, 3, 4, 5 ]
複製代碼

unshift

arr.unshift(element1, ..., elementN)

方法將一個或多個元素添加到數組的開頭，

const length = arr.unshift(11)
# 輸出length = 7
# 原數組變成[ 11, 1, 2, 3, 4, 5, 6 ]
複製代碼

shift

arr.shift()

shift 方法移除索引爲0的元素(即第一個元素)，並返回被移除的元素，其餘元素的索引值隨之減 1。若是 length 屬性的值爲 0 (長度爲 0)，則返回 undefined。
shift 方法並不侷限於數組：這個方法可以經過 call 或 apply 方法做用於相似數組的對象上。可是對於沒有length屬性（從0開始的一系列連續的數字屬性的最後一個）的對象，調用該方法可能沒有任何意義。

示例
const lastVal = arr.shift()
# 輸出lastVal = 1
# 原數組變成 [ 2, 3, 4, 5, 6 ]
複製代碼

slice

arr.slice() [0, end]
arr.slice(begin) [begin, end]
arr.slice(begin, end) [begin, end)

返回一個新的含有提取元素的新數組對象，這一對象是一個由begin和end（不包括end）決定的原數組的淺拷貝。原始數組不會被改變
beigin 從該索引處開始提取原數組中的元素（從0開始）。若是該參數爲負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2)表示提取原數組中的倒數第二個元素到最後一個元素（包含最後一個元素）。若是省略 begin，則 slice 從索引 0 開始
end 在該索引處結束提取原數組元素（從0開始）。slice會提取原數組中索引從 begin 到 end 的全部元素（包含begin，但不包含end）。slice(1,4)提取原數組中的第二個元素開始直到第四個元素的全部元素（索引爲 1, 2, 3的元素）。若是該參數爲負數，則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1)表示抽取了原數組中的倒數第二個元素到最後一個元素（不包含最後一個元素，也就是隻有倒數第二個元素）。若是 end 被省略，則slice 會一直提取到原數組末尾。若是 end 大於數組長度，slice 也會一直提取到原數組末尾 — slice 不修改原數組，只會返回一個淺複製了原數組中的元素的一個新數組
複製原則若是該元素是個對象引用（不是實際的對象），slice 會拷貝這個對象引用到新的數組裏。兩個對象引用都引用了同一個對象。若是被引用的對象發生改變，則新的和原來的數組中的這個元素也會發生改變。對於字符串、數字及布爾值來講（不是 String、Number 或者 Boolean 對象），slice 會拷貝這些值到新的數組裏。在別的數組裏修改這些字符串或數字或是布爾值，將不會影響另外一個數組。

示例
const newArr = arr.slice()
# 輸出 [ 1, 2, 3, 4, 5, 6 ]
const newArr = arr.slice(1)
# 輸出 [ 2, 3, 4, 5, 6 ]
const newArr = arr.slice(3, 5)
# 輸出 [ 4, 5 ]
const newArr = arr.slice(-2)
# 輸出 [ 5, 6 ]
const newArr = arr.slice(-2, 4)
# 輸出 [ 5, 6 ]
const index = arr.slice(-2, -7)
# 輸出 []
複製代碼

splice

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

經過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。此方法會改變原數組由,若是隻刪除了一個元素，則返回只包含一個元素的數組。若是沒有刪除元素，則返回空數組
start 指定修改的開始位置（從0計數）。若是超出了數組的長度，則從數組末尾開始添加內容；若是是負值，則表示從數組末位開始的第幾位（從-1計數，這意味着-n是倒數第n個元素而且等價於array.length-n）；若是負數的絕對值大於數組的長度，則表示開始位置爲第0位
deleteCount 若是 deleteCount 大於 start 以後的元素的總數，則從 start 後面的元素都將被刪除（含第 start 位）。若是 deleteCount 被省略了，或者它的值大於等於array.length - start(也就是說，若是它大於或者等於start以後的全部元素的數量)，那麼start以後數組的全部元素都會被刪除。若是 deleteCount 是 0 或者負數，則不移除元素。這種狀況下，至少應添加一個新元素。
item1 ... 要添加進數組的元素,從start 位置開始。若是不指定，則 splice() 將只刪除數組元素

示例
const spliceArr = arr.splice(1, 0, 'bk')
# 輸出原數組[ 1, 'bk', 2, 3, 4, 5, 6 ] spliceArr[]
const spliceArr = arr.splice(1, 1, 'bk', 'growth')
# 輸出原數組[ 1, 'bk', 'growth', 3, 4, 5, 6 ] spliceArr[2]
const spliceArr = arr.splice(1, 1)
# 輸出原數組[ 1, 3, 4, 5, 6 ] spliceArr[2]
const spliceArr = arr.splice(-2, 1)
# 輸出原數組[ 1, 3, 4, 6 ] spliceArr[5]
const spliceArr = arr.splice(2)
# 輸出原數組[ 1, 2 ] spliceArr [ 3, 4, 5, 6 ]
const spliceArr = arr.splice(2, 100)
# 輸出原數組[ 1, 2 ] spliceArr [ 3, 4, 5, 6 ]
const spliceArr = arr.splice(2, -2)
# 輸出原數組[ 1, 2, 3, 4, 5, 6 ] spliceArr[]
複製代碼

concat

old_array.concat(value1[, value2[, ...[, valueN]]])

用於合併兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組
每一個參數的順序依次是該參數的元素（若是參數是數組）或參數自己（若是參數不是數組）。它不會遞歸到嵌套數組參數中。
淺拷貝原則
對象引用（而不是實際對象）：concat將對象引用複製到新數組中。原始數組和新數組都引用相同的對象。也就是說，若是引用的對象被修改，則更改對於新數組和原始數組都是可見的。這包括也是數組的數組參數的元素。數據類型如字符串，數字和布爾（不是String，Number 和 Boolean 對象）：concat將字符串和數字的值複製到新數組中
注意：數組/值在鏈接時保持不變。此外，對於新數組的任何操做（僅當元素不是對象引用時）都不會對原始數組產生影響，反之亦然。

示例
鏈接兩個數組
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
arr1.concat(arr2)
# 輸出 [1, 2, 3, 4, 5, 6]
鏈接三個數組
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr2 = [7, 8, 9]
arr1.concat(arr2, arr3)
# 輸出 [1, 2, 3, 4, 5, 6, 7, 8, 9]
值鏈接三個數組
const arr1 = [1, 2, 3]
const arr2 = 4
const arr2 = [7, 8, 9]
arr1.concat(arr2, arr3)
# 輸出 [1, 2, 3, 4, 7, 8, 9]
複製代碼

fill(Es6新增)

arr.fill(value[, start[, end]])
arr.fill(value, start = 0, end = this.length)

用一個固定值填充一個數組中從起始索引到終止索引內的所有元素。不包括終止索引，返回修改後的數組
若是 start 是個負數, 則開始索引會被自動計算成爲 length+start, 其中 length 是 this 對象的 length 屬性值。若是 end 是個負數, 則結束索引會被自動計算成爲 length+end。
當一個對象被傳遞給 fill方法的時候, 填充數組的是這個對象的引用

示例
arr.fill(4)
# 輸出 [4,4,4,4,4,4]
arr.fill(4, 1)
# 輸出 [1,4,4,4,4,4]
arr.fill(4, 1, 1)
# 輸出 [1, 2, 3, 4, 5, 6]
arr.fill(4, 7, 7)
# 輸出 [1, 2, 3, 4, 5, 6]
arr.fill(4, -4, -3)
# 輸出 [1, 2, 4, 4, 5, 6]
arr.fill(4, NaN, NaN)
# 輸出 [1, 2, 4, 4, 5, 6]
Array(3).fill(4)
# 輸出 [4, 4, 4]
[].fill.call({ length: 3 }, 4)
# 輸出{0: 4, 1: 4, 2: 4, length: 3}
var arr = Array(3).fill({})
arr[0].hi = "hi"
# 輸出[{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
複製代碼

copyWithin(Es6新增)

arr.copyWithin(target[, start[, end]])
arr.copyWithin(target, start = 0, end = this.length)

方法淺複製數組的一部分到同一數組中的另外一個位置，並返回它，而不修改其大小
參數 target、start 和 end 必須爲整數。若是 start爲負，則其指定的索引位置等同於 length+start，length 爲數組的長度。end 也是如此。
會修改當前數組

示例
arr.copyWithin(0, 3)
# 輸出 [4, 5, 6, 4, 5, 6]
arr.copyWithin(-2)
# 輸出 [1, 2, 3, 4, 1, 2]
arr.copyWithin(0, 3, 4)
# 輸出 [4, 2, 3, 4, 5, 6]
arr.copyWithin(-2, -3, -1)
#輸出 [1, 2, 3, 4, 4, 5]
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
# 輸出 {0: 1, 3: 1, length: 5}
複製代碼

flat(Es6新增)

var newArray = arr.flat(depth)

會按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回
指定要提取嵌套數組的結構深度，默認值爲 1
flat() 方法會移除數組中的空項

示例
const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
# [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
# [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
# [1, 2, 3, 4, 5, 6]
# 使用 Infinity 做爲深度，展開任意深度的嵌套數組
arr3.flat(Infinity); 
# [1, 2, 3, 4, 5, 6]
const arr4 = [1,2,3,[4,,5]]
arr4.flat()
# [1, 2, 3, 4, 5]
複製代碼

reduce

arr.reduce(callback[, initialValue])
arr.reduce(function(Accumulator, CurrentValue, currentIndex, SourceArray), InitialValue)

Accumulator (acc) (累計器)
CurrentValue (cur) (當前值)
CurrentIndex (idx) (當前索引)
SourceArray (src) (源數組)
InitialValue 做爲第一次調用 callback函數時的第一個參數的值。若是沒有提供初始值，則將使用數組中的第一個元素。在沒有初始值的空數組上調用 reduce 將報錯。
對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值
若是數組爲空且沒有提供initialValue，會拋出TypeError 。若是數組僅有一個元素（不管位置如何）而且沒有提供initialValue，或者有提供initialValue可是數組爲空，那麼此惟一值將被返回而且callback不會被執行。

示例
# 求和
const arr = [0,1,2,3,4]
arr.reduce(function(accumulator, currentValue){
    return accumulator + currentValue
})
# 10
複製代碼

看下執行過程

# 二維數組轉爲一位數組
const arr = [0,[1,2],[3,4]]
arr.reduce(function(accumulator, currentValue){
    return accumulator.concat(currentValue)
}, [])
# 輸出[0, 1, 2, 3, 4]
# 假如如今是多維數組轉爲一位數組呢
const arr2 = [0,[1,2],[3,4, [5,6,[7,8]]]]
const flatArr = (arr) => {
   return arr.reduce(function(accumulator, currentValue){
        return accumulator.concat(Array.isArray(currentValue)? flatArr(currentValue): currentValue)
    }, []) 
}
flatArr(arr2)
# 輸出 [0, 1, 2, 3, 4, 5, 6, 7, 8]
# 計算數組中每一個元素出現的次數
const arr3 = [1,1,2,3,4,2, 2, 3]
var counted = arr3.reduce(function (allArr, num) {
  if (num in allArr) {
    allArr[num]++;
  }
  else {
    allArr[num] = 1;
  }
  return allArr;
}, {})
# 輸出 {1: 2, 2: 3, 3: 2, 4: 1}
複製代碼

數組排序

sort

arr.sort([compareFunction])

用原地算法對數組的元素進行排序，並返回數組。排序算法如今是穩定的。默認排序順序是根據字符串Unicode碼點
排序後的數組。請注意，數組已原地排序，而且不進行復制
若是 compareFunction(a, b) 小於 0 ，那麼 a 會被排列到 b 以前;若是 compareFunction(a, b) 等於 0, a 和 b 的相對位置不變。備註： ECMAScript 標準並不保證這一行爲，並且也不是全部瀏覽器都會遵照（例如 Mozilla 在 2003 年以前的版本）；若是 compareFunction(a, b) 大於 0 ， b 會被排列到 a 以前。 compareFunction(a, b)必須老是對相同的輸入返回相同的比較結果，不然排序的結果將是不肯定的。

示例
const arr = [1,9,2,1,3,5,12,3]
arr.sort(function(a,b){
    return a - b
})
# 輸出 [1, 1, 2, 3, 3, 5, 9, 12]
複製代碼

reverse

arr.reverse()

將數組中元素的位置顛倒,並返回該數組。

示例
arr.reverse()
# 輸出 [ 6, 5, 4, 3, 2, 1 ]
複製代碼

數組ES新增

entries

arr.entries()

返回一個新的Array Iterator對象，該對象包含數組中每一個索引的鍵/值對。Array Iterator是對象，它的原型（proto:Array Iterator）上有一個next方法，可用用於遍歷迭代器取得原數組的[key,value]

示例
const newIterator = arr.entries()
newIterator.next()
# 輸出
entries輸出: Array Iterator {}
    __proto__: Array Iterator
    next: ƒ next()
    Symbol(Symbol.toStringTag): "Array Iterator"
    __proto__: Object
next輸出: {value: Array(2), done: false}
    done: false
    value: (2) [0, 1]
    __proto__: Object
    
for (let e of newIterator) {
    console.log(e);
}
# 輸出[0, 1]、[1, 2]、[2, 3]、[3, 4]、[4, 5]、[5, 6]
複製代碼

keys

arr.keys()

返回一個包含數組中每一個索引鍵的Array Iterator對象
索引迭代器會包含那些沒有對應元素的索引

示例
var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]
複製代碼

values

arr.values()

返回一個新的 Array Iterator對象，該對象包含數組每一個索引的值

let arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr.values();
# 您的瀏覽器必須支持 for..of 循環
# 以及 let —— 將變量做用域限定在 for 循環中
for (let letter of eArr) {
  console.log(letter);
}
# 輸出 w y k o p
另外一種迭代方式
eArr.next().value 
# w
複製代碼