js map方法的使用

原型:   array.map(callback,[ thisObject]);

 callback的参数类似:
[].map(function(value, index, array) {
    // ...
});
三个参数为:当前正在遍历的元素, 元素索引, 原数组本身.

示例:
["1", "2", "3"].map(returnInt);// 返回[1,2,3]
function returnInt(element){
  return parseInt(element,10);
}
 

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]
*/

以上摘自网络,由此可以写出一个小Demo,比如格式化日期字符串:

function formatTime() {

  var date=new Date();

  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()

  return [year, month, day].map(formatNumber).join(‘/‘) + ‘ ‘ + [hour, minute, second].map(formatNumber).join(‘:‘)
};

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : ‘0‘ + n
}

最终结果格式:"2017/05/19 00:37:20"

 
时间: 2024-10-12 03:58:00

js map方法的使用的相关文章

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); }) //

兼容低版本JS的Array.map方法

前几天去别的公司面试遇到个这样的问题,兼容IE7下的Array.map方法,一脸蒙蔽.后面回来查了下资料发现.Array.map方法是ECMA-262 标准中新添加的方法,在低版本的JS中是木有的. 看如下兼容性实现方式: 实现思路:1,先验证this对象,再将this用Object封装成obj. 2,获取封装后的obj的属性长度 3,验证是否有回调方法 4,根据obj的属性长度lengh生成新的数组,new Array(length). 5,遍历obj对象,获取mapKey,mapValue,

JS中find(), findIndex(), filter(), forEach(), some(), every(), map()方法

1. find()与findIndex() find()方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员.如果没有符合条件的成员,则返回undefined. [1, 2, 5, -1, 9].find((n) => n < 0)    //找出数组中第一个小于 0 的成员    // -1 find()方法的回调函数可以接受三个参数,依次为当前的值.当前的位置和原数组. findIndex()方

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,

JS中的forEach、$.each、map方法

forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 1 var array = [1, 2, 3, 4]; 2 for (var k = 0, length = array.length; k < length; k++) { 3 alert(array[k]); 4 } Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的f

js 数组 map方法

map这里的map不是“地图”的意思,而是指“映射”.[].map(); 基本用法跟forEach方法类似: array.map(callback,[ thisObject]); callback的参数也类似: [].map(function(value, index, array) { // ... }); map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组.下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arrayOfSquare

js自带的map方法

let numbers = [1, 5, 10, 15]; let roots = numbers.map(function(x) { return x * 2; }); map() 方法创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数. 试用小技巧 求数组中每个元素的平方根 var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); 参考https://developer.mozilla.org/zh-CN/docs/W

js中的filter方法和map方法

filter方法是对数据中的元素进行过滤,也就是说是不能修改原数组中的数据,只能读取原数组中的数据,callback需要返回布尔值 为true的时候,对应的元素留下来, 为false的时候,对应的元素过滤掉 filter方法的使用: 对应的结果: 如果我们尝试对原数组中的元素进行修改,会有什么效果了? 结果如下: 会发现数据不会发生改变的. 也就是说:filter方法是对原数组的元素进行过滤,返回到一个新的数组中去.不影响原始的数组. map方法的使用: 结果如下: 所以:map方法是可以原数组

js中数组的map()方法

map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值 map()方法按照原是数组顺序以此处理元素 注意:map()不会对空数组进行检测 :不会改变原始的数组 实例: var numbers = [65, 44, 12, 4]; function multiplyArrayElement(num) { return num * 10; } function myFunction() { document.getElementById("demo").innerHTM