当前位置: 首页 > 编程笔记 >

js 自带的 map() 方法全面了解

秋阳荣
2023-03-14
本文向大家介绍js 自带的 map() 方法全面了解,包括了js 自带的 map() 方法全面了解的使用技巧和注意事项,需要的朋友参考一下

1. 方法概述

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

2. 例子

2.1 在字符串中使用map

在一个 String  上使用 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]

2.2 易犯错误

通常情况下,map 方法中的 callback 函数只需要接受一个参数(很多时候,自定义的函数形参只有一个),就是正在被遍历的数组元素本身。

但这并不意味着 map 只给 callback 传了一个参数(会传递3个参数)。这个思维惯性可能会让我们犯一个很容易犯的错误。

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

/*
//应该使用如下的用户函数returnInt

function returnInt(element){
 return parseInt(element,10);
}

["1", "2", "3"].map(returnInt);
// 返回[1,2,3]
*/

参考 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

以上这篇js 自带的 map() 方法全面了解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍js 自带的sort() 方法全面了解,包括了js 自带的sort() 方法全面了解的使用技巧和注意事项,需要的朋友参考一下 1. 方法概述 Array的sort()方法默认把所有元素先转换为String再根据Unicode排序, sort()会改变原数组,并返回改变(排序)后的数组 。 2. 例子 2.1   如果没有提供自定义的方法, 数组元素会被转换成字符串,并返回字符串在Un

  • 本文向大家介绍全面了解js中的script标签,包括了全面了解js中的script标签的使用技巧和注意事项,需要的朋友参考一下 在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址"></script>),浏览器在渲染页面的时候,当读取到script元素时,浏览器不会以HTML或XHTML的方式处理其内容,浏览

  • 本文向大家介绍全面了解servlet中cookie的使用方法,包括了全面了解servlet中cookie的使用方法的使用技巧和注意事项,需要的朋友参考一下 ---恢复内容开始--- Cookie是存储在客户端计算机上的文本文件,并保留了它们的各种信息跟踪的目的。 Java Servlet透明支持HTTP Cookie。 涉及标识返回用户有三个步骤: • 服务器脚本发送到浏览器的一组cookie。对

  • 本文向大家介绍JS模拟的Map类实现方法,包括了JS模拟的Map类实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS模拟的Map类。分享给大家供大家参考,具体如下: 根据java中map的属性,实现key----value保存 1、使用数组方式存储数据,(使用闭包) 2、使用JSON方式存储数据(使用原型方式拓展方法) 更多关于JavaScript相关内容感兴趣的读者可查看本站专

  • 本文向大家介绍JS中的forEach、$.each、map方法推荐,包括了JS中的forEach、$.each、map方法推荐的使用技巧和注意事项,需要的朋友参考一下 forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环。例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 Array在ES5新增的方法中,参数都是functi

  • 本文向大家介绍基于MyBatis XML配置方法(全面了解),包括了基于MyBatis XML配置方法(全面了解)的使用技巧和注意事项,需要的朋友参考一下 MyBatis 的配置文件包含了影响 MyBatis 行为甚深的设置(settings)和属性(properties)信息。 文档的顶层结构如下: configuration 配置 properties 属性 settings 设置 typeA