[解決済み] オブジェクトのためのマップ関数(配列の代わりに)
2022-03-15 07:19:17
質問
あるオブジェクトがあります。
myObject = { 'a': 1, 'b': 2, 'c': 3 }
のようなネイティブメソッドを探しています。
Array.prototype.map
のように使用されます。
newObject = myObject.map(function (value, label) {
return value * value;
});
// newObject is now { 'a': 1, 'b': 4, 'c': 9 }
JavaScriptにはこのような
map
関数はありますか?(Node.JS用に欲しいので、クロスブラウザの問題は気にしません)。
どのように解決するのですか?
ネイティブの
map
には
Object
オブジェクトを作成しますが、こんなのはどうでしょう。
var myObject = { 'a': 1, 'b': 2, 'c': 3 };
Object.keys(myObject).map(function(key, index) {
myObject[key] *= 2;
});
console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }
しかし、オブジェクトに対する反復処理は
for ... in
:
var myObject = { 'a': 1, 'b': 2, 'c': 3 };
for (var key in myObject) {
if (myObject.hasOwnProperty(key)) {
myObject[key] *= 2;
}
}
console.log(myObject);
// { 'a': 2, 'b': 4, 'c': 6 }
更新情報
多くの人が、これまでのメソッドは新しいオブジェクトを返すのではなく、オブジェクトそのものを操作していることに言及しています。それについては、新しいオブジェクトを返し、元のオブジェクトはそのままにしておく別の解決策を追加したいと思いました。
var myObject = { 'a': 1, 'b': 2, 'c': 3 };
// returns a new object with the values at each key mapped using mapFn(value)
function objectMap(object, mapFn) {
return Object.keys(object).reduce(function(result, key) {
result[key] = mapFn(object[key])
return result
}, {})
}
var newObject = objectMap(myObject, function(value) {
return value * 2
})
console.log(newObject);
// => { 'a': 2, 'b': 4, 'c': 6 }
console.log(myObject);
// => { 'a': 1, 'b': 2, 'c': 3 }
Array.prototype.reduce
は、以前の値を現在の値にいくらかマージすることで、配列を単一の値に縮小します。このチェーンは空のオブジェクト
{}
. 繰り返しごとに、新しいキー
myObject
が追加され、その2倍のキーが値として追加される。
更新
ES6の新機能により、よりエレガントな表現が可能になりました。
objectMap
.
const objectMap = (obj, fn) =>
Object.fromEntries(
Object.entries(obj).map(
([k, v], i) => [k, fn(v, k, i)]
)
)
const myObject = { a: 1, b: 2, c: 3 }
console.log(objectMap(myObject, v => 2 * v))
関連
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] モバイルブラウザの検出
-
[解決済み] 2つのJavaScriptオブジェクトの等質性を判断する方法は?
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
Vueでルートネスティングを実装する例
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR