配列のキーや要素を含むイテラブルなオブジェクトを返す - keys, values, entries

《初回公開：2023/10/19 , 最終更新：未》

keys, values, entriesの各メソッドは配列のキー(インデックス値)や要素を含む、イテレータでありかつイテラブルなオブジェクトを返す。
これらのメソッドは空のスロットをスキップしない。

【　目次　】

配列のキーや要素を含むイテラブルなオブジェクトを返す - keys, values, entries

entries

配列の各要素に対してキーと値のペアを返す。
イテレータのnextメソッドから返される値はlength=2の配列[index,value]として返される。

イテレータとして利用

const array = ['a', 'b', 'c'];
const iterator = array.entries();

let result = iterator.next();
while (!result.done) {
    console.log(result.value);  // [0, 'a'] [1, 'b'] [2, 'c']
    result = iterator.next();
}

entriesメソッドから返される値はイテラブルでもあるのでfor...of 文を使って値を取り出す事もできる。

イテラブルとして利用

const array = ['a', 'b', 'c'];
const iterable = array.entries();

for (const [index, value] of iterable) {
    console.log(`index = ${index}, value = ${value}`);
}
// index = 0, value = a
// index = 1, value = b
// index = 2, value = c

keys

配列の各要素に対してインデックスのキーを返す。
イテラブルとして使用すると。

const array = ['a', 'b', 'c'];
const iterable = array.keys();

for (const index of iterable) {
    console.log(index); // 0 1 2
}

values

配列の各要素に対して要素の値を返す。
イテラブルとして使用すると。

const array = ['a', 'b', 'c'];
const iterable = array.values();

for (const value of iterable) {
    console.log(value); // a b c
}

Objectクラスのkeys, values, entriesメソッドとの違い

似たようなメソッドにObjectクラスのkeys, values, entriesメソッドがある

Objectクラスのkeys, values, entriesメソッドはクラスメソッドであるのに対して、Arrayクラスのkeys, values, entriesメソッドはインスタンスメソッドとして実装されている。
またObjectクラスのkeys, values, entriesメソッドが配列を返すのに対して、Arrayクラスのkeys, values, entriesメソッドが返すオブジェクトは配列では無い。

const array = ['a', 'b', 'c'];

// array.entriesは配列ではない
console.log(Array.isArray(array.entries())) // false
// Object.entriesは配列を返す
console.log(Array.isArray(Object.entries(array)))   // true

不連続な配列に対してArrayクラスのkeys, values, entriesメソッドは空のスロットをスキップしない。
Objectクラスのkeys, values, entriesメソッドは空のスロットをスキップする。

const array = ['a', , 'c'];

for (const [index, value] of array.entries()) {
    console.log(`index = ${index}, value = ${value}`);
}
// index = 0, value = a
// index = 1, value = undefined
// index = 2, value = c

for (const [index, value] of Object.entries(array)) {
    console.log(`index = ${index}, value = ${value}`);
}
// index = 0, value = a
// index = 2, value = c