コハムコハムWebクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。記事は上記記事を意訳したものです。※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。はじめにJavaScript配列は言語の強力な機能であり、多数の組み込みメソッドと独自のメソッドを作成する能力を提供します。この投稿では、プロパティ定義、カスタムメソッド、さまざまなループ構造を含む高度な配列操作技術を探ります。これらの技術を詳細に示すためにサンプル配列を使用します。配列の作成と表示まず、配列を作成し、その内容をコンソールに記録しましょう。arrは1から10までの値で配列を初期化します。console.log(arr)は配列全体をコンソールに出力します。カスタム配列プロパティ:MylengthJavaScriptでは、配列プロトタイプにカスタムプロパティを定義できます。ここでは、配列の要素を数えるカスタムプロパティMylengthを作成します。Object.definePropertyを使用してArray.prototypeに新しいプロパティを定義します。get()メソッドは配列を反復処理し、各要素をカウントします。console.log(arr.Mylength)はカスタムプロパティを使用して配列の長さをログに記録します。カスタム配列メソッド:myForEach配列のカスタムメソッドも定義できます。以下のコードは、組み込みのforEachメソッドのカスタム実装であるmyForEachを定義します。Array.prototype.myForEachは配列プロトタイプに新しいメソッドを追加します。コールバック関数は配列の各要素に対して実行されます。コールバック内のconsole.log(item)は各要素をコンソールに記録します。配列のループ処理JavaScriptは配列をループ処理するためのいくつかの方法を提供します。各方法を探ってみましょう:for...ofループfor...ofループは配列の値を反復処理します。arr)は配列の各要素を反復処理します。console.log(value)は各要素をコンソールに記録します。従来のforループ従来のforループは、インデックスを使用してより制御された反復を提供します。index++)は0から配列の長さまで反復します。arr[index]はインデックスで現在の要素にアクセスします。console.log(element)は各要素をコンソールに記録します。for...inループfor...inループは、インデックス付きでないプロパティを含む、配列の列挙可能なプロパティを反復処理します。arr)は配列のプロパティを反復処理します。key)は配列自身のプロパティのみがアクセスされることを保証します。arr[key]は現在のキーに対応する要素にアクセスします。console.log(element)は各要素をコンソールに記録します。for...inのバリアント間の違い上記で示したfor...inループの2つのバリアントには微妙な違いがあります。最初のバリアントは配列自身のプロパティのみがアクセスされることを保証する追加のチェックを使用しますが、2番目のバリアントにはこのチェックが含まれていません。このループは配列自身のプロパティのみがアクセスされ、継承されたプロパティはアクセスされないことを保証します。これは配列のプロトタイプに追加される可能性のあるプロパティのログを避けるのに有用です。このループは継承されたものを含む全ての列挙可能なプロパティにアクセスします。これは配列がプロトタイプからプロパティを継承している場合、予期しない結果につながる可能性があります。これはプロトタイプから継承されたプロパティを明示的に含めたい場合に有用です。ログに記録します結論この投稿では、JavaScriptでの高度な配列操作技術を、カスタムプロパティとメソッド、さまざまなループ構造を含めて説明しました。for...inループの2つのバリアント間の違いも探りました。これらのツールは配列の柔軟性と力を高め、より効率的で表現力豊かなコードを可能にします。これらの技術を理解することで、JavaScriptプログラミングスキルを大幅に向上させ、より汎用性が高く保守しやすいコードを書くことができます。10:30Webクリエイターのコハムです。地味な事務職からWeb制作会社に転職してフリーランスになりました。キンクマハムスターと2人暮らし。3©コハム引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。