家好，很高興又見面了，我是姜茶的編程筆記，我們一起學習前端相關領域技術，共同進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力

在 JavaScript 中，Array.prototype.map 是一個常用的方法，它對數組的每個元素調用提供的函數，并返回一個新數組，包含函數的返回值。為了更好地理解其內部機制，今天我們將從零開始，實現一個自定義的 map 方法，并詳細解析其實現步驟。

實現自定義 map 方法

首先，我們創建一個 myMap 方法，將其添加到 Array.prototype 上。這個方法接受兩個參數：一個回調函數 callback 和一個可選的 thisArg 參數。callback 函數將對數組的每個元素進行操作，thisArg 是執行回調函數時的 this 值。

Array.prototype.myMap = function(callback, thisArg) {
  // 將傳入的數組轉換為對象
  const O = Object(this);

  // 獲取數組的長度
  const len = O.length >>> 0;

  // 如果 callback 不是函數，則拋出 TypeError
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }

  // 創建一個新的數組，用于存儲映射結果
  const result = new Array(len);

  // 遍歷數組并應用回調函數
  for (let i = 0; i < len; i++) {
    // 只有當元素在數組中存在時才進行映射
    if (i in O) {
      // 調用回調函數，傳遞 thisArg 作為 this 值，并傳遞當前元素、索引、數組本身
      result[i] = callback.call(thisArg, O[i], i, O);
    }
  }

  return result;
};

讓我們逐步解析這個實現。

1. 將傳入的數組轉換為對象

我們首先將 this 轉換為一個對象，以便在方法中使用：

const O = Object(this);

2. 獲取數組的長度

使用 >>> 0 操作符將長度轉換為無符號整數，確保其為正整數：

const len = O.length >>> 0;

3. 檢查回調函數

如果 callback 不是函數，則拋出一個 TypeError：

if (typeof callback !== 'function') {
  throw new TypeError(callback + ' is not a function');
}

4. 創建結果數組

我們創建一個與原數組長度相同的新數組，用于存儲映射結果：

const result = new Array(len);

5. 遍歷數組并應用回調函數

使用 for 循環遍歷數組的每個索引。如果當前索引存在于數組中，則調用回調函數，并將結果存儲在 result 數組中：

for (let i = 0; i < len; i++) {
  if (i in O) {
    result[i] = callback.call(thisArg, O[i], i, O);
  }
}

6. 返回結果數組

最后，我們返回存儲映射結果的 result 數組：

return result;

示例使用

下面是一個示例，展示如何使用自定義的 myMap 方法：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.myMap(x => x * 2);

console.log(doubled); // 輸出 [2, 4, 6, 8, 10]

在這個示例中，我們將 numbers 數組中的每個元素都乘以 2，并將結果存儲在 doubled 數組中。結果輸出為 [2, 4, 6, 8, 10]，這與內置的 Array.prototype.map 方法的行為一致。

結論

通過實現自定義的 map 方法，我們深入理解了 JavaScript 中數組的操作方式。希望你可以更好地掌握 map 方法的內部機制，并提升你的 JavaScript 編程技巧。

最后

如果你有任何問題或建議，歡迎在評論區留言交流！祝你編程愉快！

bjects 和 maps 的比較：

　　Object的鍵只能是字符串或者 Symbols，但 Map 的鍵可以是任意值，包括函數、對象、基本類 型。

　　Map 中的鍵值是有序的，而添加到 Object 對象中的鍵則不是。因此，當對它進行遍歷時，Map 對象是按插入的順序返回鍵值。

　　可以通過 size 屬性直接獲取一個 Map 的鍵值對個數，而 Object 的鍵值對個數只能手動計算。

　　Map 可直接進行迭代，而 Object 的迭代需要先獲取它的鍵數組，然后再進行迭代。

　Map 在涉及頻繁增刪鍵值對的場景下會有些性能優勢。

Map 類型實例化語法：

new Map([iterable])
let map = new Map([['key1', 'value1'], ['key2', 'value2']]);

Map 類型實例屬性與方法：

Map.prototype.size                              // 元素數量
Map.prototype.clear()                           // 移除Map對象的所有鍵/值對 。
Map.prototype.delete(key)                       // 如果 Map 對象中存在該元素，則移除它并返回 true；否則如果該元素不存在則返回 false
Map.prototype.entries()                         // 返回一個新的 Iterator 對象，它按插入順序包含了Map對象中每個元素的[key, value] 數組。
Map.prototype.forEach(callbackFn[, thisArg])    // 按插入順序，為 Map對象里的每一鍵值對調用一次callbackFn函數。
Map.prototype.get(key)                          // 返回鍵對應的值，如果不存在，則返回undefined。
Map.prototype.has(key)                          // 返回一個布爾值，表示Map實例是否包含鍵對應的值。
Map.prototype.keys()                            // 返回一個新的 Iterator對象， 它按插入順序包含了Map對象中每個元素的鍵 。
Map.prototype.set(key, value)                   // 設置Map對象中鍵的值。返回該Map對象。
Map.prototype.values()                          // 返回一個新的Iterator對象，它按插入順序包含了Map對象中每個元素的值 。

Map 實例：

let myMap = new Map();
let keyObj = {},
    keyFunc = function () { },
    keyString = "a string";
 
    // 添加鍵
myMap.set(keyString, "和鍵'a string'關聯的值");
myMap.set(keyObj, "和鍵keyObj關聯的值");
myMap.set(keyFunc, "和鍵keyFunc關聯的值");
console.log(myMap.size);    // => 3
 
// 讀取值
myMap.get(keyString);       // "和鍵'a string'關聯的值"
myMap.get(keyObj);          // "和鍵keyObj關聯的值"
myMap.get(keyFunc);         // "和鍵keyFunc關聯的值"
myMap.get("a string");      // "和鍵'a string'關聯的值",因為keyString === 'a string'
myMap.get({});              // undefined, 因為keyObj !== {}
myMap.get(function () { })  // undefined, 因為keyFunc !== function () {}

Map 類型迭代，舉例：

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 將會輸出兩個log，一個是"0 = zero", 另一個是"1 = one"
for (let [key, value] of myMap) {
    console.log(key + " = " + value);
}
 
// 將會輸出兩個log， 一個是 "0" 另一個是 "1"
for (let key of myMap.keys()) {
    console.log(key);
}
 
// 將會輸出兩個log， 一個是 "zero" 另一個是 "one"
for (let value of myMap.values()) {
    console.log(value);
}
 
// 將會輸出兩個log, 一個是 "0 = zero" 另一個是 "1 = one"
for (let [key, value] of myMap.entries()) {
    console.log(key + " = " + value);
}
 
// 將會輸出兩個logs, 一個是 "0 = zero" 另一個是 "1 = one"
myMap.forEach(function (value, key) {
    console.log(key + " = " + value);
})

Map 類型與數組類型互轉，舉例：

var kvArray = [["key1", "value1"], ["key2", "value2"]];
// 使用常規的Map構造函數可以將一個二維鍵值對數組轉換成一個Map對象
var myMap = new Map(kvArray);
console.log(myMap.get("key1"));             // => value1
 
// 使用Array.from函數可以將一個Map對象轉換成一個二維鍵值對數組
console.log(Array.from(myMap));             // 輸出和kvArray相同的數組
 
// 在鍵或者值的迭代器上使用Array.from，進而得到只含有鍵或者值的數組
console.log(Array.from(myMap.keys()));      // 輸出 ["key1", "key2"]
console.log(Array.from(myMap.values()));    // 輸出 ["value1", "value2"]

Map 對象間可以合并，有重復鍵值時，后面的會覆蓋前面的；