家好，很高兴又见面了，我是姜茶的编程笔记，我们一起学习前端相关领域技术，共同进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力

在 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 对象间可以合并，有重复键值时，后面的会覆盖前面的；