日 - Mozilla による avaScript Foundations プロフェッショナル認定

コンセプトのハイライト:

1. ループで for...of と for...in
を使用する
2. Set() と Array、Map() と Objects、および Set() と Map()

1. for...of ループと for...in ループの使用

ループはプログラミングの基本的な概念であり、コードのブロックを複数回実行できるようになります。 JavaScript では、for...of と for...in の 2 つのループがよく使用されますが、それらは異なる目的を果たします。違いを理解すると、より効率的で効果的なコードを作成するのに役立ちます。

1.1 for...of ループ

for...of ループは、配列、文​​字列、マップ、セットなどの反復可能なオブジェクトを反復処理するために使用されます。これにより、インデックスを気にすることなく、シーケンス内の各値に簡単にアクセスできます。

例)

let teams = ['Red Sox', 'Dodgers', 'Padres']; 

for (let team of teams) {
   console.log(team);
}

// Output: 
// Read Sox
// Dodgers
// Padres

この例では、for...of は、teams 配列内の各要素 (チーム) に直接アクセスし、それをコンソールに記録します。このループは、インデックスではなく値のみが必要な場合に最適です。

1-2. for...in ループ

一方、for...in ループは、オブジェクトのプロパティ (キー) を反復処理するために使用されます。これはオブジェクトでよく使用されますが、インデックスにアクセスするために配列でも使用できます。

例)

let Mariners = {place: 'Seattle', league: 'American', color: 'navy blue'}; 

for (let key in Mariners) {
   console.log(`${key}: ${Mariners[key]}`); 
}

// Output: 
// place: Seattle
// league: American
// color: navy blue

この例では、for...in は Mariners オブジェクトのキーを反復処理し、キーと対応する値の両方にアクセスできるようにします。 for...in は数値インデックスだけでなく、列挙可能なすべてのプロパティを反復処理するため、配列では慎重に使用する必要があることに注意することが重要です。

1-3.主な違い

• 目的:
  • for...of: 反復可能なオブジェクト (配列、文字列、セット、マップ) の値を反復処理します。
  • for...in: オブジェクトの列挙可能なプロパティ (キー) を反復します。
• 使用例:
  • 値に直接アクセスする必要がある場合は、for...of を使用します。
  • キーまたはプロパティ名にアクセスする必要がある場合は、for...in を使用します。

2. Set() と配列、Map() とオブジェクト、Set() と `Map() の違い

JavaScript はさまざまなデータ構造を提供しますが、それぞれに長所と短所があります。最も一般的に使用されるもののいくつかの違いを調べました:

2-1. Set() と配列の比較

• 独自性:
  • Set() は一意の値を保存します。つまり、重複は許可されません。
  • 配列では重複した値が許可されます。
• 注文:
  • Set() は挿入順序を繰り返します。
  • 配列でも挿入順序は維持されますが、重複によって操作方法が変わる可能性があります。

例)

`

let mySet = new Set([1, 2, 3, 3, 4]);
myArray = [1, 2, 3, 3, 4]; とします。

console.log(mySet) // 出力: Set { 1, 2, 3, 4 }
console.log(myArray) // 出力: [1, 2, 3, 3, 4]

`

この例では、Set() は重複 3 を自動的に削除しますが、配列は重複を保持します。 Set() は、一意の項目のコレクションが必要な場合に便利です。

2-2. Map() とオブジェクトの比較

• キーの種類:

  • Map(): キーは、オブジェクト、関数、プリミティブ型など、任意の型にすることができます。
  • オブジェクト: キーは通常、文字列または記号です。

• 注文:

  • Map() は挿入順序を維持します。
  • オブジェクト はキーの順序を保証しません。

• サイズ:

  • Map() には、キーと値のペアの数を与える size プロパティがあります。
  • オブジェクトは、キーを反復処理してサイズを手動で決定する必要があります。

例)

`
let myMap = new Map();
myMap.set('名前', 'ジョン');
myMap.set(42, '答え');
myMap.set({}, '空のオブジェクト');

let myObject = {
名前: 'ジョン'、
42: 「答え」、
{}: '空のオブジェクト'
};

console.log(myMap.size); // 出力: 3
console.log(Object.keys(myObject).length); // 出力: 2 (キー文字列変換のため)
`
この例では、Map() によりさまざまなキー タイプの使用が許可され、オブジェクト キーは文字列に変換されます。さらに、Map() はマップのサイズを簡単に提供しますが、オブジェクトの場合は手動でキーを数える必要があります。

2-3. Set() 대 Map()

• 목적:
  • Set()은 고유한 값의 모음입니다.
  • Map()은 키-값 쌍의 모음입니다.
• 사용 사례:
  • 고유 항목 목록을 저장해야 하는 경우 Set()을 사용하세요.
  • 값을 키와 연결해야 하는 경우 Map()을 사용하세요.

예)

`
mySet = new Set([1, 2 ,3]);
let myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(mySet.has(2)); // 출력: true
console.log(myMap.get('key1')); // 출력: '값'1
`
이 예에서 Set()은 값의 존재를 확인하는 데 사용되는 반면 Map()은 키와 연결된 값을 검색하는 데 사용됩니다.

以上が日 - Mozilla による avaScript Foundations プロフェッショナル認定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。