日 - Mozilla 的 avaScript 基礎專業認證

概念亮點：

1. 使用 for...of 和 for...in 循環
2. Set()與陣列、Map()與物件以及Set() 和Map()

1. 使用 for...of 和 for...in 循環

循環是程式設計中的一個基本概念，允許多次執行一段程式碼。在 JavaScript 中，for...of 和 for...in 是兩個常用的循環，但它們有不同的用途。了解這些差異可以幫助您編寫更有效率、更有效的程式碼。

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陣列中的每個元素（team）並將其記錄到控制台。當您只需要值而不需要索引時，此循環是理想的選擇。

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，而 Array 保留它。當您需要唯一項目的集合時，Set() 非常有用。

2-2. Map() 與 Object

• 關鍵類型：
  Map()：鍵可以是任何類型，包括物件、函數和原始類型。
  • 物件：鍵通常是字串或符號。
• 訂單：
  • Map() 維護插入順序。
  • 物件不保證鍵的順序。
• 尺寸：
  • Map() 有一個 size 屬性，它給出鍵值對的數量。
  • 物件需要透過迭代鍵來手動決定大小。

例如）

`

讓 myMap = new Map();
myMap.set('姓名', '約翰');
myMap.set(42, '答案');
myMap.set({}, '空物件');

讓 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]);
令 myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(mySet.has(2)); // 輸出：true
console.log(myMap.get('key1')); // 輸出：'值'1
`
在此範例中，Set() 用於檢查值是否存在，而 Map() 用於檢索與鍵關聯的值。

以上是日 - Mozilla 的 avaScript 基礎專業認證的詳細內容。更多資訊請關注PHP中文網其他相關文章！