数组map方法的应用场景及经典面试题

简介: 数组map方法的应用场景及经典面试题

数组map方法的应用场景及经典面试题


map最大的作用:从一个数组得到一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

上句是核心。

换言之,平时只要有从数组中得到一个新数组的时候,就可以联想下map

大部分情况下,map里的函数传入一个参数就够用。

以下是应用场景,可以的话,先自己实现下

求数组中每个元素的平方

function pow(x) {
  return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// [1, 4, 9, 16, 25, 36, 49, 64, 81]
var results = arr.map(pow);

把数组中每个元素变成字符串

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// ['1', '2', '3', '4', '5', '6', '7', '8', '9']
var results2 = arr.map(String);

重新格式化数组中的对象

就是数组的每项都是对象,然后进行操作。或者对对象的某个值进行改变。

var kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 }
];
// [{1: 10}, {2: 20}, {3: 30}]
var reformattedArray = kvArray.map(function(obj) {
  var rObj = {};
  rObj[obj.key] = obj.value;
  return rObj;
});

map用在离散数组的时候

map遍历的时候,如果当前值是undefined,则直接返回undefined。

// [2,4,,,8]
[1,2,,,4].map(item=>item*2)

字符串也可使用map,生成新的数组

如获取字符串中每个字符所对应的 ASCII 码组成的数组

var map = Array.prototype.map;
var a = map.call("Hello World", function(x) {
  return x.charCodeAt(0);
});
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

类数组也可使用map,生成新的数组

比如得到所有选中选项的值,并将其打印:

var ele = document.querySelectorAll("select option:checked");
var values = Array.prototype.map.call(ele, function(obj) {
  return obj.value;
});

map易错的地方 -- 面试常碰到

<!-- res的值 -->
var res = ["1", "2", "3"].map(parseInt);

如果不小心的话,可能会说成 [1,2,3]

考点:map的callback不止一个参数,总共三个参数,cur、index、curIndex。

parseInt可以接受两个参数,所以上面会[1, NaN, NaN],因为第二个参数index被传进去了。改进方法

["1", "2", "3"].map( item => parseInt(item));

``

手写实现map方法

这里官方的更权威,这里只是简单实现大概逻辑

Array.prototype.map = function(fn) {
  let res = [];
  // this指当前的数组
  let curArr = this;
  for (let i = 0; i < curArr.length; i++) {
    let value = curArr[i];
    if (typeof value !== "undefined") {
     let mappedValue = fn(value, i, curArr);
     res[i] = mappedValue;
    }
  }
  return res;
};

引用

此文基本根据文档总结来的,可以细看原文档

mdn 的 map

目录
相关文章
|
4月前
|
消息中间件 测试技术 数据库
吊打面试官!应用间交互如何设计?
【10月更文挑战第18天】设计应用间交互需从明确需求、选择合适方式、设计协议与数据格式、考虑安全性和权限管理、进行性能优化和测试五个方面入手。明确功能和用户需求,选择接口调用、消息队列、数据库共享或文件交换等方式,确保交互高效、安全、可靠。展示这些能力将在面试中脱颖而出。
|
12天前
|
Java 程序员 调度
Java 高级面试技巧:yield() 与 sleep() 方法的使用场景和区别
本文详细解析了 Java 中 `Thread` 类的 `yield()` 和 `sleep()` 方法,解释了它们的作用、区别及为什么是静态方法。`yield()` 让当前线程释放 CPU 时间片,给其他同等优先级线程运行机会,但不保证暂停;`sleep()` 则让线程进入休眠状态,指定时间后继续执行。两者都是静态方法,因为它们影响线程调度机制而非单一线程行为。这些知识点在面试中常被提及,掌握它们有助于更好地应对多线程编程问题。
43 9
|
18天前
|
安全 Java 程序员
Java面试必问!run() 和 start() 方法到底有啥区别?
在多线程编程中,run和 start方法常常让开发者感到困惑。为什么调用 start 才能启动线程,而直接调用 run只是普通方法调用?这篇文章将通过一个简单的例子,详细解析这两者的区别,帮助你在面试中脱颖而出,理解多线程背后的机制和原理。
47 12
|
3月前
|
存储
`map()`方法在什么场景下会比 `forEach()`方法更高效?
综上所述,当需要对数组元素进行复杂的转换并生成新数组、进行链式调用和函数式编程、处理元素之间存在明确映射关系的情况以及与其他数组方法结合使用时,`map()`方法比`forEach()`方法更高效,能够使代码更加简洁、清晰和易于维护。
79 32
|
3月前
|
架构师 数据库
大厂面试高频:数据库乐观锁的实现原理、以及应用场景
数据库乐观锁是必知必会的技术栈,也是大厂面试高频,十分重要,本文解析数据库乐观锁。关注【mikechen的互联网架构】,10年+BAT架构经验分享。
大厂面试高频:数据库乐观锁的实现原理、以及应用场景
|
2月前
|
缓存 安全 Java
【JavaEE】——单例模式引起的多线程安全问题:“饿汉/懒汉”模式,及解决思路和方法(面试高频)
单例模式下,“饿汉模式”,“懒汉模式”,单例模式下引起的线程安全问题,解锁思路和解决方法
|
5月前
|
索引
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
|
3月前
|
存储 Java 程序员
Java基础的灵魂——Object类方法详解(社招面试不踩坑)
本文介绍了Java中`Object`类的几个重要方法,包括`toString`、`equals`、`hashCode`、`finalize`、`clone`、`getClass`、`notify`和`wait`。这些方法是面试中的常考点,掌握它们有助于理解Java对象的行为和实现多线程编程。作者通过具体示例和应用场景,详细解析了每个方法的作用和重写技巧,帮助读者更好地应对面试和技术开发。
156 4
|
4月前
|
存储 Java API
详细解析HashMap、TreeMap、LinkedHashMap等实现类,帮助您更好地理解和应用Java Map。
【10月更文挑战第19天】深入剖析Java Map:不仅是高效存储键值对的数据结构,更是展现设计艺术的典范。本文从基本概念、设计艺术和使用技巧三个方面,详细解析HashMap、TreeMap、LinkedHashMap等实现类,帮助您更好地理解和应用Java Map。
89 3
|
5月前
|
数据处理 Python
Pandas中的map函数应用
Pandas中的map函数应用
30 2