Web 前端陈年烂题:['1', '2', '3'].map(parseInt) 结果是什么?

简介: 前端西瓜哥

大家好,我是前端西瓜哥,本文讲的是一道比较经典的前端面试题,本文将会深入分析此题,深挖知识点,让你完全掌握此题的解法。

这是道 Web 前端的陈年烂题,烂是烂,但我就是要说,高考也是年年有呢。此题考察的是对 JavaScript 方法的熟悉程度。

不直接给出答案,我们先看看思路。

Array.prototype.map

首先是 Array.prototype.map 方法,这是数组实例的方法。给 map 传入一个回调函数,map 就会遍历数组元素,将相关信息一起传入回调函数,并取这个回调函数的返回值作为新数组的对应索引的元素,并将这个新数组返回。

回调函数每次可以拿到的当前迭代的(1)数组元素(2)索引值(3)以及数组本身。

[1,2,3].map((value, index, array) => {
  return value * 2;
})
// 返回 [2, 4, 6]
复制代码

如果你是初学者,可能会对这个黑盒底层是怎么实现有些疑惑,我就顺手实现一下 Array.prototype.map 方法,以便读者加深理解。

Array.prototype.myMap = function(callbackfn) {
  const arr = this;
  const retArr = new Array(arr.length);
  for (let i = 0; i < arr.length; i++) {
    retArr[i] = callbackfn(arr[i], i, arr);
  }
  return retArr;
}
复制代码

parseInt

Array.prototype.map 方法其实还算简单,parseInt 则要复杂得多的多了。

parseInt 函数的作用是将一个字符串转换为数字。

parseInt(string [, radix]) 接受两个参数,第一个参数是我们需要转换的字符串。第二个参数是字符串的基数 radix,比如是 2 的话,就代表字符串是用二进制表达的。需要特别注意的是,第二个参数是可选的。

第二个参数如果省略,情况会变得复杂。如果字符串以 0x0X 开头,它就会当作十六进制,否则被当作十进制。

下面说一些例子:

parseInt('10', 2);
// => 2。(1 * 2 + 0 * 1)
parseInt('0xa');
// => 10。被当作十六进制,等价于 parseInt('a', 16)
parseInt('123');
// => 123。被当作十进制,最常见的用法,
复制代码

理论上基数 radix 应该为大于等于 2,小于等于 36 的数字,否则会被当作不合法,返回 NaN。但有一个值除外,那就是 0。

当 parseInt 的第二个参数 radix 为 0 时,parseInt 会当作第二个参数没有传,所以字符串会被当成十进制。

此外当字符串第一个非空格字符不能转换为数字时,也会返回 NaN。

回到本题

['1', '2', '3'].map(parseInt)的 parseInt 作为回调函数拿到了 map 提供的三个参数,得益于 JavaScript 是非常方便的弱类型语言,所以传参数量不匹配也不会报错的,只会把不用的参数抛弃掉,缺少的参数设置为 undefined。

这里 parsetInt 只用到两个参数,分别是 数组元素索引值。也就是:

parseInt('1', 0);
// 1    特殊情况,等价于parseInt('1')
parseInt('2', 1);
// NaN  没有一进制这种东西
parseInt('3', 2);
// NaN  没能找到合法字符,虽然 3 是数字,但它无法用来表达二进制,二进制只能为 0 和 1。
复制代码

所以返回结果为:[1, NaN, NaN]

相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
50 3
|
23天前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
14天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
27 6
|
22天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
34 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
46 2
|
1月前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
48 0
|
3月前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
3月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用