js 数组 map方法

map
这里的map不是“地图”的意思,而是指“映射”。[].map(); 基本用法跟forEach方法类似:

array.map(callback,[ thisObject]);

callback的参数也类似:

[].map(function(value, index, array) {
    // ...
});

map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方:

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16

callback需要有return值,如果没有,就像下面这样:

var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function() {});

arrayOfSquares.forEach(console.log);

结果如下图,可以看到,数组所有项都被映射成了undefined

在实际使用的时候,我们可以利用map方法方便获得对象数组中的特定属性值们。例如下面这个例子(之后的兼容demo也是该例子):

var users = [
  {name: "张含韵", "email": "[email protected]"},
  {name: "江一燕",   "email": "[email protected]"},
  {name: "李小璐",  "email": "[email protected]"}
];

var emails = users.map(function (user) { return user.email; });

console.log(emails.join(", ")); // [email protected], [email protected], [email protected]

Array.prototype扩展可以让IE6-IE8浏览器也支持map方法:

if (typeof Array.prototype.map != "function") {
  Array.prototype.map = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {
         arr.push(fn.call(context, this[k], k, this));
      }
    }
    return arr;
  };
}
时间: 2024-07-30 13:52:04

js 数组 map方法的相关文章

JS 数组及其方法浅析

近来闲来无事,小码哥突发奇想,手一哆嗦,就把javascript中的数组及其方法小小总结了一下! 在JS里我们很抽象的理解万物皆对象,这大概也是,我们现在在写Js代码的时候,都善于用面向对象的方式写程序的根由吧....不多说,数组Array也是对象无疑了! 首先,我们肯定应该知道什么是数组?其又是如何定义的?都有哪些优点?这都是我们关心的,,, 数组定义:数组说白了就是数据的集合,在内存中,是一块连续内存的地址:JS中数组分为一维数组和多维数组. 定义方式: 1.直接量定义:var Arr=[e

数组map方法与如何使用ES5实现

数组map方法与如何使用ES5实现 JavaScript Array map() 方法 定义 map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值. map() 方法按照原始数组元素顺序依次处理元素. 注意: map() 不会检测数组是否为空. map() 不会改变原始数组,而是返回一个新数组. 语法 arr.map(function(curVal,idx,arr), thisVal) 参数 描述 curVal 必须,当前元素的值. Idx 可选,当前元素的索引值. ar

使用 reduce 实现数组 map 方法

//使用 reduce 实现数组 map 方法 const selfMap2 = function (fn, context){ let arr = Array.prototype.slice.call(this) // 这种实现方法和循环的实现方法有异曲同工之妙,利用reduce contact起数组中每一项 // 不过这种有个弊端,会跳过稀疏数组中为空的项 return arr.reduce((pre, cur, index) => { return [...pre, fn.call(con

JS 数组迭代方法

js中数组迭代方法有五种 some() , every(), filter(), forEach(),map(),传入这些方法的函数会接收三个参数(数组项的值,该项在数组中的位置,数组对象本身) var items = [9,67,34,25,56]; //如果items中的所有项都大于9返回true否则返回false 全部满足条件才行 var everyResult = items.every(function(item,index,array){ return (item>9); }); a

JS数组遍历方法集合

就让我们在逆战中成长吧,加油武汉,加油自己 1.for循环 使用零时变量将长度存起来,当数组较大时优化效果才会比较明显. var ar1=[2,4,6,8] for(var i=0;i<ar1.length;i++){ console.log(i) console.log(ar1[i]) } 2.foreach循环 遍历数组中每个数,没有返回值 使用break不能中断循环,使用return也不能返回到外层函数 var ar1=[2,4,6,8] ar1.foreach((item,index,a

js数组遍历方法总结

数组遍历方法 1.for循环 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显. for(j = 0,len=arr.length; j < len; j++) { } 2.foreach循环 遍历数组中的每一项,没有返回值,对原数组没有影响,不支持IE //1 没有返回值 arr.forEach((item,index,array)=>{ //执行代码 }) //参数:value数组中的当前项, index当前项的索引, array原始数组: //数组中有

js 数组去重方法总结

var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 'NaN', 0, 0, 'a', 'a', {}, {}]; /* * ES3 的方法 */ // 方法一 思路:新建空数组,利用双层for循环,逐一取出传入数组的项与新数组中的每一项做对比,如果没有相同的则将该项插入新数组中,如果对比项相同则跳出当前循环回到父

在js对象上绑定js数组原生方法

在js对象上绑定数组方法会给当前对象添加一个lenght:0属性 例: var o = {}; [].pop.call(o) console.log(o)//返回结果Object {length: 0}

js数组去重方法

这里提供了3种方法,都比较常见,可以一种一种往下看,越往下,性能越高. 第一种是比较常规的方法,思路如下: 1.构建一个新的数组,新的数组同其中一个一样,存放结果 2.for循环中每次从另一个数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 代码如下: var arr1 = [1,2,3,4,5,6]; var arr2 = [9,8,7,6,5,4]; var arr = unitArray( arr1,arr2 ); alert(arr); fu