JS中数组Array方法

原创 2016年08月31日 16:25:48

概述

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

语法

array.map(callback[, thisArg])

参数

callback
原数组中的元素经过该方法后返回一个新的元素。

currentValue
callback的第一个参数,数组中当前被传递的元素。

index
callback的第二个参数,数组中当前被传递的元素的索引。

array
callback的第三个参数,调用map方法的数组。

thisArg
执行callback函数时this指向的对象。

描述

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。

如果 thisArg 参数有值,则每次 callback 函数被调用的时候,this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined,则 this 指向全局对象 。

map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)。

用法

用法一:

["1", "2", "3"].map(parseInt); 
/**
* 你可能觉的会是[1, 2, 3]
* 但实际的结果是 [1, NaN, NaN]
* 使用parseInt时,只需要传递一个参数.而parseInt可以有两个参数.第二个参数是进制数.
* map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
* 第三个参数parseInt会忽视, 但第二个参数不会.
* 也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.
* 即:第一个参数正常使用,第二个当做进制数,第三个以及之后的会被忽视
*/

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

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

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

用法二:

/**
* 将data,data2两个数组组合成json的格式
*/

var data = ["a","b","c","d","e","f","g","h","i","j"];
var data2 =  [1,2,3,4,5,6,7,8,9,10];


//方法一:(一般项目中不会这么拼接)

var array1 = data.map(function(item){
    var name  = "'name'";
    return name+":'"+item+"',";
});
var array2 = data2.map(function(item){
    var value = "'value'";
    return value+":'"+item+"'";
});

var arr = new Array();

for(var i = 0;i<data.length;i++){
    arr[i] = "{"+array1[i]+array2[i]+"}";   
}
var a = '['+arr+']';
document.write(a);



//方法二:(建议使用这种)

var aaa = data.map(function(item,index){
    return {
        name : item,
        value : data2[index]
    }
});
document.write(JSON.stringify(aaa));

js中Array数组中的常用方法汇总

Array的push与unshift方法性能比较分析 从原理就可以知道,unshift的效率是较低的。原因是,它每添加一个元素,都要把现有元素往下移一个位置。unshift比push要慢差不多100...
  • ywl570717586
  • ywl570717586
  • 2017年04月06日 10:04
  • 1337

JS中的Array类型方法

JavaScript中的Array类型很灵活,和C语言不同,同一个Array每个位置可以存储不同的变量类型,而且数组长度可变。 声明数组的方法: var colors = new Array() ...
  • lovewingss
  • lovewingss
  • 2016年03月18日 22:04
  • 734

js Array 原生方法

比较有用的原生js数组方法
  • nbin2008
  • nbin2008
  • 2016年09月18日 22:14
  • 5169

JavaScript中数组map()方法

JavaScript 数组map()方法创建一个新的数组使用调用此数组中的每个元素上所提供的函数的结果。语法 ? 1 array.map(call...
  • u013063153
  • u013063153
  • 2016年09月03日 17:08
  • 1523

JavaScript Array 原型方法 大盘点

数组是一个超常用的数据结构,JavaScript的数组方法都有什么怎样的特性呢?是时候一探究竟了。JavaScript中数组是一个对象,默认的赋值是传了一个引用。针对结果是引用还是拷贝,对原数组的变更...
  • zccz14
  • zccz14
  • 2016年06月04日 13:12
  • 2664

JS中Array方法中常用方法五:Array.prototype.push()

Array.prototype.push()添加一个或多个元素到数组的末尾,并返回数组新的长度(length 属性值)。 语法:arr.push(element1, ..., elementN) ...
  • songlf521
  • songlf521
  • 2016年09月14日 20:14
  • 572

给Array本地对象增加一个原型方法

笔试题:请给Array本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个仅包含被删除的重复条目的新数组。 给Array添加一个原型方法 ...
  • zbhzbn
  • zbhzbn
  • 2015年08月18日 20:59
  • 2264

JS Array.filter()方法

今天学习了Array的filter方法,MDN上解释的是filter()方法中行参是一个回调函数.这个回调函数就是一个规则,返回一个布尔值.filter()方法会对数组中每一个元素使用这个回调函数.注...
  • qq_34481114
  • qq_34481114
  • 2017年03月13日 16:42
  • 3721

JS-inArray检查数组中是否存在某个值

我们经常会用到这个一样逻辑,判断一个字符串或者数字是否在数组内,很多程序语言都有这样一样专门的函数,比如PHP的in_array()。那么JS有木有呢,很遗憾,JS木有这样的函数,于是想到伟大的JQ是...
  • word_ppt
  • word_ppt
  • 2013年03月15日 13:52
  • 11594

JS数组对象Array增加 contains 方法

在JS中,有时候需要用到判断一个数组中是否包含某个值,这时候就可以给Array增加contains()方法了        扩展方法contains()方法:       Array.prototyp...
  • Thinkingcao
  • Thinkingcao
  • 2017年03月31日 13:54
  • 5917
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS中数组Array方法
举报原因:
原因补充:

(最多只允许输入30个字)