1. 調べようと思ったきっかけ
参考「非推奨の機能、廃止された機能 - JavaScript | MDN」
何となく上のページを読んでいたら、
とあったのですが、for...in のページを見ても「分割代入型 for...in」が何なのか書いてなかったので、気になって調べてみました。
(実は最近まで for...in が非推奨だと勘違いしていました… (汗
2. 分割代入型 for...in (非推奨)
普通の for...in は非推奨ではないですが、「分割代入型 for...in」は非推奨です。
// Array
const array = [['a', 1], ['b', 2], ['c', 3]];
console.log('array');
for (const [key, value] in array) { // ★
console.log({key, value});
}
// Map
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
console.log('map');
for (const [key, value] in map) { // ★
console.log({key, value});
}
// Object
const object = {'a': 1, 'b': 2, 'c': 3};
console.log('object');
for (const [key, value] in object) { // ★
console.log({key, value});
}
(もちろん [key, value] 以外にもコードがあり得ます)
※実行環境によりますが、このコードは正しく動作しないと思った方が良いです。
3. 分割代入型 for...of
こちらは使って大丈夫です。
(for...of と Iterator を使った方法が非推奨、という情報がありますが、ここで言っているのは Iterator を使わない方法です)
3.1. Array
配列の要素を分割代入して使いたいときはそのまま回せます。
// Array
const array = [['a', 1], ['b', 2], ['c', 3]];
console.log('array');
for (const [key, value] of array) { // ★
console.log({key, value});
}
3.2. Array - Array.prototype.entries()
配列のインデックスを key にして回したいときは Array.prototype.entries() を使います。
// Array 2
const array2 = ['a', 'b', 'c'];
console.log('array2');
for (const [key, value] of array2.entries()) { // ★
console.log({key, value});
}
3.3. Map
Map はそのまま回すことができます。
// Map
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
console.log('map');
for (const [key, value] of map) { // ★
console.log({key, value});
}
参考「Map で反復する - for...of - JavaScript | MDN」
3.4. Object - Object.entries()
Object で Map と同じようなことがしたいときは Object.entries() を使います。
// Object
const object = {'a': 1, 'b': 2, 'c': 3};
console.log('object');
for (const [key, value] of Object.entries(obj)) { // ★
console.log({key, value});
}
※ Object.entries() は、ES8 の機能です。
日本語版の MDN だと「これは実験段階の機能です。」と出てきますが、英語版だと取り除かれています。
参考「Object.entries() - JavaScript | MDN」(日本語版)
参考「Object.entries() - JavaScript | MDN」(英語版)
※ Object.entries() は Array.prototype.entries() とは違い、static メソッドです。
4. forEach()
4.1. Array - 分割代入
分割代入は関数の引数でも使えます。
ただし、アロー関数の場合、引数の括弧 () を省略できません。
// Array
const array = [['a', 1], ['b', 2], ['c', 3]];
console.log('array');
array.forEach(([key, value]) => { // ★
console.log({key, value});
});
4.2. Array
インデックスは普通の forEach() で取得できます。
// Array 2
const array2 = ['a', 'b', 'c'];
console.log('array2');
array2.forEach((value, key) => { // ★
console.log({key, value});
});
※ Array.prototype.entries() に forEach() を使うことはできません。
4.3. Map
Map もそのまま forEach() で回せます。
// Map
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
console.log('map');
map.forEach((value, key) => { // ★
console.log({key, value});
});
4.4. Object - Object.entries() - 分割代入
Array.prototype.entries() は forEach() で回せませんが、Object.entries() は回せます。
// Object
const object = {'a': 1, 'b': 2, 'c': 3};
console.log('object');
Object.entries(object).forEach(([key, value]) => { // ★
console.log({key, value});
});
5. key だけを回して value を取得
5.1. 普通の for...in
普通の for...in で key だけ取得して const value = foo[key]; のように value を取得する。
5.2. key 配列を使う
以下のコードで key 配列を取得し、for...of や forEach() で key ごとに回し、const value = foo[key]; のように value を取得する。
Object.keys(array);
Map.prototype.keys();
Object.keys(object);