JavaScript でオブジェクトの map 関数を作成する
-
JavaScript で一般的な
map()メソッドを使用してオブジェクトの map 関数を作成する -
JavaScript で
for inループを使用してオブジェクトの map 関数を作成する - JavaScript のオブジェクトのカスタム map 関数を使用して新しいオブジェクトを作成する
-
JavaScript で
Object.entries()およびObject.fromEntries()を使用してオブジェクトの map 関数を作成する -
Object.entries()とObject.fromEntries()を使用して関数を記述し、JavaScript でオブジェクトを map する
JavaScript のオブジェクトに対して特定の操作を実行したい場合が多くあります。標準ライブラリには、これを実現するためのあらゆる種類のメソッドが含まれていますが、すべてのケースが網羅されているわけではありません。
この場合、オブジェクトの属性を反復処理して、Array.prototype.map 関数と同様のアクションを実行するネイティブな方法はありません。
したがって、各属性を調べて特定の値を追加する場合、標準のライブラリメソッドを使用してそれを行う方法はありません。ありがたいことに、map 関数を最初から作成し、必要に応じてカスタマイズすることができます。
JavaScript で一般的な map() メソッドを使用してオブジェクトの map 関数を作成する
このメソッドは、ネイティブの map() 関数を使用して、目的の結果を得ることができます。ただし、このメソッドは新しいオブジェクトを作成するのではなく、元のオブジェクトを変更することを知っておく必要があります。
元のオブジェクトを気にせず、結果が必要な場合は、次の方法でこれを実現できます。
let testObject = {'first': 1, 'second': 2, 'third': 3};
Object.keys(testObject).map(function(key, value) {
testObject[key] += 1
});
console.log(testObject);
出力：
{ first: 2, second: 3, third: 4 }
JavaScript で for in ループを使用してオブジェクトの map 関数を作成する
または、単純な for ループを使用して、オブジェクトの属性を反復処理し、目的の計算を実行することもできます。このメソッドは、hasOwnProperty() 関数を使用して、オブジェクトに有効な属性があるかどうかを確認します。
let testObject = {'first': 1, 'second': 2, 'third': 3};
for (var key in testObject) {
if (testObject.hasOwnProperty(key)) {
testObject[key] += 1;
}
}
console.log(testObject);
出力：
{ first: 2, second: 3, third: 4 }
JavaScript のオブジェクトのカスタム map 関数を使用して新しいオブジェクトを作成する
上記のように、前のメソッドは、目的の操作を実行しながら元のオブジェクトを上書きします。それを望まない場合は、代わりに新しいオブジェクトを作成し、元のオブジェクトをそのまま保持することができます。
明らかに、このメソッドはより多くのコードを必要としますが、結果は少しきれいになります。
let testObject = {'first': 1, 'second': 2, 'third': 3};
function customMap(object, mapFn) {
return Object.keys(object).reduce(function(result, key) {
result[key] = mapFn(object[key])
return result
}, {});
}
let newObject = customMap(testObject, function(value) {
return value + 1
});
console.log(testObject);
console.log(newObject);
出力：
{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }
出力には、元のオブジェクトと、値が変更された新しく作成されたオブジェクトが表示されます。興味があれば、使用した mapFn パラメーターは Array.from() メソッドの一部であり、マッピング関数として機能するように設計されています。
JavaScript で Object.entries() および Object.fromEntries() を使用してオブジェクトの map 関数を作成する
プロジェクトで下位互換性を気にせずに ES2019 標準を使用できる場合は、マッピング関数の作成に必要なコードを減らすことができます。
このメソッドのコードは次のようになります。
let testObject = {'first': 1, 'second': 2, 'third': 3};
let newObject = Object.fromEntries(
Object.entries(testObject).map(([key, value]) => [key, value + 1]));
console.log(testObject);
console.log(newObject);
出力：
{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }
これはワンライナーであるため、実装は少し簡単ですが、保守が難しい場合があります。
Object.entries() と Object.fromEntries() を使用して関数を記述し、JavaScript でオブジェクトを map する
上記のコードをより管理しやすく、保守しやすくしたいとします。その場合、最も簡単な解決策は、Object.entries() と Object.fromEntries() をカスタム関数に統合することです。
そのため、前のコードを書き直す方法は次のとおりです。
let testObject = {'first': 1, 'second': 2, 'third': 3};
function customMap(object, func) {
return Object.fromEntries(
Object.entries(object).map(([key, value]) => [key, func(value)]));
}
let newObject = customMap(testObject, (x) => x + 1);
console.log(testObject);
console.log(newObject);
出力：
{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }