[解決済み] JavaScriptのオブジェクトを反復処理する方法は?
2022-03-18 17:19:39
質問
JavaScriptでオブジェクトを持っています。
{
abc: '...',
bca: '...',
zzz: '...',
xxx: '...',
ccc: '...',
// ...
}
を使いたいのですが
for
ループでプロパティを取得します。そして、私はそれを部分的に反復したいのです(一度にすべてのオブジェクトのプロパティではありません)。
単純な配列であれば、標準的な
for
ループを使用します。
for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last
しかし、オブジェクトでそれを行うにはどうしたらよいのでしょうか。
どのように解決するのですか?
ほとんどのオブジェクトでは
for .. in
:
for (let key in yourobject) {
console.log(key, yourobject[key]);
}
ES6 では、キーと値の両方が同時に必要な場合、次のようにします。
for (let [key, value] of Object.entries(yourobject)) {
console.log(key, value);
}
継承したプロパティをログに残さないようにするには hasOwnProperty :
for (let key in yourobject) {
if (yourobject.hasOwnProperty(key)) {
console.log(key, yourobject[key]);
}
}
を確認する必要はありません。
hasOwnProperty
単純なオブジェクト (たとえば
{}
).
このMDNドキュメント は、オブジェクトとそのプロパティの扱い方について、より一般的に説明しています。
もしあなたが、quot;in chunks"をしたいのであれば、配列でキーを抽出することがベストです。順番は保証されないので、これが正しい方法です。モダンブラウザでは
let keys = Object.keys(yourobject);
より親和性を高めるには、こうするのがよいでしょう。
let keys = [];
for (let key in yourobject) {
if (yourobject.hasOwnProperty(key)) keys.push(key);
}
次に、インデックスによってプロパティを反復処理します。
yourobject[keys[i]]
:
for (let i=300; i < keys.length && i < 600; i++) {
console.log(keys[i], yourobject[keys[i]]);
}
関連
-
Vueの要素ツリーコントロールに破線を追加する説明
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] Java Mapの各エントリを効率的に反復処理するには?
-
[解決済み】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 実装 サイバーパンク風ボタン
おすすめ
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
JSアレイループと効率解析の比較
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vueの補間表現とv-textディレクティブの違いについて
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
Vueの「データを聴く」原則を解説
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法