当前位置:首页 > JavaScript

js map方法 实现

2026-03-15 20:14:41JavaScript

map方法的基本概念

JavaScript中的map方法是数组对象的一个高阶函数,用于对数组中的每个元素执行指定操作并返回一个新数组。原数组不会被修改。

语法结构

const newArray = array.map(function(currentValue, index, arr) {
  // 返回处理后的元素
}, thisValue);
  • currentValue: 当前处理的数组元素
  • index(可选): 当前元素的索引
  • arr(可选): 正在操作的数组
  • thisValue(可选): 执行回调时使用的this

基本使用示例

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

实现原理

map方法的Polyfill实现可以这样理解:

Array.prototype.myMap = function(callback, thisArg) {
  if (this == null) {
    throw new TypeError('Array.prototype.myMap called on null or undefined');
  }
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }

  const result = [];
  const array = Object(this);
  const len = array.length >>> 0;

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

常见应用场景

处理对象数组提取特定属性:

const users = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'}
];
const names = users.map(user => user.name);
// ['Alice', 'Bob']

转换数据格式:

const temperatures = [
  {city: 'Tokyo', temp: 22},
  {city: 'London', temp: 14}
];
const formatted = temperatures.map(({city, temp}) => 
  `${city}: ${temp}°C`
);
// ['Tokyo: 22°C', 'London: 14°C']

注意事项

map方法会跳过空位但不会跳过undefinednull值。回调函数必须包含return语句,否则新数组将充满undefined

js map方法 实现

const arr = [1, 2, , 4];
const mapped = arr.map(x => x * 2);
// [2, 4, empty, 8]

性能考虑

对于大型数组,map可能不是最高效的选择,因为它会创建新数组。如果不需要新数组,forEach可能是更好的选择。现代JavaScript引擎已对map进行了高度优化,在大多数情况下性能差异可以忽略。

标签: 方法js
分享给朋友:

相关文章

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

js实现求导

js实现求导

实现数值求导的方法 在JavaScript中实现求导通常采用数值方法,因为JavaScript不是符号计算语言。以下是常见的数值微分方法: 中心差分法 中心差分法提供较高精度的导数近似:…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

js实现路由

js实现路由

js实现路由的方法 在JavaScript中实现路由功能可以通过多种方式完成,以下是几种常见的方法: 使用原生JavaScript实现路由 通过监听window.onhashchange事件来实现基…

js计算器的实现

js计算器的实现

实现基础结构 HTML部分需要创建计算器的基本框架,包含显示区域和按钮。使用<div>容器包裹整个计算器,内部设置一个显示屏和多个按钮。 <div class="calculato…