こんなことできるって知ってた？JavaScriptの配列を極めるプロ直伝のトリック

Mastering JavaScript: Deep Dive into Array Tooling.🚀🚀

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

はじめに

JavaScript配列は言語の強力な機能であり、多数の組み込みメソッドと独自のメソッドを作成する能力を提供します。この投稿では、プロパティ定義、カスタムメソッド、さまざまなループ構造を含む高度な配列操作技術を探ります。これらの技術を詳細に示すためにサンプル配列を使用します。

はじめに
配列の作成と表示
カスタム配列プロパティ：Mylength
カスタム配列メソッド：myForEach
配列のループ処理
for...inのバリアント間の違い
- バリアント1：
- バリアント2：
結論

配列の作成と表示

まず、配列を作成し、その内容をコンソールに記録しましょう。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 1から10までの値で配列を初期化
console.log(arr); // 配列全体をコンソールに出力

ポイント： - let arrは1から10までの値で配列を初期化します。 - console.log(arr)は配列全体をコンソールに出力します。

カスタム配列プロパティ：Mylength

JavaScriptでは、配列プロトタイプにカスタムプロパティを定義できます。ここでは、配列の要素を数えるカスタムプロパティMylengthを作成します。

Object.defineProperty(Array.prototype, 'Mylength', {
  get() {
    let count = 0; // カウンターを初期化
    for (const _ of this) {
      count++; // 配列の各要素に対してカウンターを増加
    }
    return count; // 最終的なカウントを返す
  }
});

console.log(arr.Mylength); // カスタムプロパティを使用して配列の長さをログに記録

ポイント： - Object.definePropertyを使用してArray.prototypeに新しいプロパティを定義します。 - get()メソッドは配列を反復処理し、各要素をカウントします。 - console.log(arr.Mylength)はカスタムプロパティを使用して配列の長さをログに記録します。

カスタム配列メソッド：myForEach

配列のカスタムメソッドも定義できます。以下のコードは、組み込みのforEachメソッドのカスタム実装であるmyForEachを定義します。

Array.prototype.myForEach = function myForEach(callback) {
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this); // 配列の各要素に対してコールバックを実行
  }
};

arr.myForEach(function(item) {
  console.log(item); // 各要素をコンソールに記録
});

ポイント： - Array.prototype.myForEachは配列プロトタイプに新しいメソッドを追加します。 - コールバック関数は配列の各要素に対して実行されます。 - コールバック内のconsole.log(item)は各要素をコンソールに記録します。

配列のループ処理

JavaScriptは配列をループ処理するためのいくつかの方法を提供します。各方法を探ってみましょう：

for...ofループ

for...ofループは配列の値を反復処理します。

for (const value of arr) {
  console.log(value); // 各要素をコンソールに記録
}

ポイント： - for (const value of arr)は配列の各要素を反復処理します。 - console.log(value)は各要素をコンソールに記録します。

従来のforループ

従来のforループは、インデックスを使用してより制御された反復を提供します。

for (let index = 0; index < arr.length; index++) {
  const element = arr[index]; // インデックスで現在の要素にアクセス
  console.log(element); // 各要素をコンソールに記録
}

ポイント： - for (let index = 0; index < arr.length; index++)は0から配列の長さまで反復します。 - const element = arr[index]はインデックスで現在の要素にアクセスします。 - console.log(element)は各要素をコンソールに記録します。

for...inループ

for...inループは、インデックス付きでないプロパティを含む、配列の列挙可能なプロパティを反復処理します。

for (const key in arr) {
  if (Object.hasOwnProperty.call(arr, key)) { // プロパティが配列自身のプロパティであるかチェック
    const element = arr[key]; // 現在のキーに対応する要素にアクセス
    console.log(element); // 各要素をコンソールに記録
  }
}

ポイント： - for (const key in arr)は配列のプロパティを反復処理します。 - Object.hasOwnProperty.call(arr, key)は配列自身のプロパティのみがアクセスされることを保証します。 - const element = arr[key]は現在のキーに対応する要素にアクセスします。 - console.log(element)は各要素をコンソールに記録します。

for...inのバリアント間の違い

上記で示したfor...inループの2つのバリアントには微妙な違いがあります。最初のバリアントは配列自身のプロパティのみがアクセスされることを保証する追加のチェックを使用しますが、2番目のバリアントにはこのチェックが含まれていません。

バリアント1：

for (const key in arr) {
  if (Object.hasOwnProperty.call(arr, key)) { // プロパティが配列自身のプロパティであるかチェック
    const element = arr[key]; // 現在のキーに対応する要素にアクセス
    console.log(element); // 各要素をコンソールに記録
  }
}

ポイント： - このループは配列自身のプロパティのみがアクセスされ、継承されたプロパティはアクセスされないことを保証します。 - これは配列のプロトタイプに追加される可能性のあるプロパティのログを避けるのに有用です。

例：

Array.prototype.customProp = "私はプロトタイププロパティです";
for (const key in arr) {
  if (Object.hasOwnProperty.call(arr, key)) {
    const element = arr[key];
    console.log(element);
  }
}
// 1から10までをログに記録しますが、'customProp'は無視します

バリアント2：

for (const key in arr) {
  const element = arr[key]; // 現在のキーに対応する要素にアクセス
  console.log(element); // 各要素をコンソールに記録
}

ポイント： - このループは継承されたものを含む全ての列挙可能なプロパティにアクセスします。これは配列がプロトタイプからプロパティを継承している場合、予期しない結果につながる可能性があります。 - これはプロトタイプから継承されたプロパティを明示的に含めたい場合に有用です。

例：

Array.prototype.customProp = "私はプロトタイププロパティです";
for (const key in arr) {
  const element = arr[key];
  console.log(element);
}
// 1から10までをログに記録し、その後 "私はプロトタイププロパティです" をログに記録します