Array.prototype.map()

This article is in need of a technical review.

Summary

Creates a new array with the results of calling a provided function on every element in this array.

Method of Array
Implemented in JavaScript 1.6
ECMAScript Edition ECMAScript 5th Edition

Syntax

array.map(callback[, thisArg])

Parameters

callback
Function that produces an element of the new Array from an element of the current one.
thisArg
Object to use as this when executing callback.

Description

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

callback is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.

If a thisArg parameter is provided to map, it will be used as the this for each invocation of the callback. If it is not provided, or is null, the global object associated with callback is used instead.

map does not mutate the array on which it is called.

The range of elements processed by map is set before the first invocation of callback. Elements which are appended to the array after the call to map begins will not be visited by callback. If existing elements of the array are changed, or deleted, their value as passed to callback will be the value at the time map visits them; elements that are deleted are not visited.

Compatibility

map is a recent addition to the ECMA-262 standard; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of map in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming Object, TypeError, and Array have their original values and that callback.call evaluates to the original value of Function.prototype.call.

// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.com/#x15.4.4.19
if (!Array.prototype.map) {
Array.prototype.map = function(callback, thisArg) { var T, A, k; if (this == null) {
throw new TypeError(" this is null or not defined");
} // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
var O = Object(this); // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
// 3. Let len be ToUint32(lenValue).
var len = O.length >>> 0; // 4. If IsCallable(callback) is false, throw a TypeError exception.
// See: http://es5.github.com/#x9.11
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
} // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
if (thisArg) {
T = thisArg;
} // 6. Let A be a new array created as if by the expression new Array(len) where Array is
// the standard built-in constructor with that name and len is the value of len.
A = new Array(len); // 7. Let k be 0
k = 0; // 8. Repeat, while k < len
while(k < len) { var kValue, mappedValue; // a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
if (k in O) { // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
kValue = O[ k ]; // ii. Let mappedValue be the result of calling the Call internal method of callback
// with T as the this value and argument list containing kValue, k, and O.
mappedValue = callback.call(T, kValue, k, O); // iii. Call the DefineOwnProperty internal method of A with arguments
// Pk, Property Descriptor {Value: mappedValue, : true, Enumerable: true, Configurable: true},
// and false. // In browsers that support Object.defineProperty, use the following:
// Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true }); // For best browser support, use the following:
A[ k ] = mappedValue;
}
// d. Increase k by 1.
k++;
} // 9. return A
return A;
};
}

Examples

Example: Pluralizing the words (strings) in an array

The following code creates an array of "plural" forms of nouns from an array of their singular forms.

function fuzzyPlural(single) {
var result = single.replace(/o/g, 'e');
if( single === 'kangaroo'){
result += 'se';
}
return result;
} var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural)); // ["feet", "geese", "meese", "kangareese"]

Example: Mapping an array of numbers to an array of square roots

The following code takes an array of numbers and creates a new array containing the square roots of the numbers in the first array.

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
/* roots is now [1, 2, 3], numbers is still [1, 4, 9] */

Example: using map generically

This example shows how to use map on a string to get an array of bytes in the ASCII encoding representing the character values:

var map = Array.prototype.map
var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

Tricky use case

(inspired by this blog post)

It is common to use the callback with one argument (the element being traversed). Some functions are also commonly used with one argument. These habits may lead to confusing behaviors.

// Consider:
["1", "2", "3"].map(parseInt);
// While one could expect [1, 2, 3]
// The actual result is [1, NaN, NaN] // parseInt is often used with one argument, but takes two. The second being the radix
// To the callback function, Array.prototype.map passes 3 arguments: the element, the index, the array
// The third argument is ignored by parseInt, but not the second one, hence the possible confusion.
// See the blog post for more details /*
function returnInt(element){
return parseInt(element,10);
} ["1", "2", "3"].map(returnInt);
// Actual result is an array of numbers (as expected)
*/

Browser compatibility

JavaScript Array.map的更多相关文章

  1. JavaScript Array -->map()、filter()、reduce()、forEach()函数的使用

    题目: 1.得到 3000 到 3500 之内工资的人. 2.增加一个年龄的字段,并且计算其年龄. 3.打印出每个人的所在城市 4.计算所有人的工资的总和. 测试数据: function getDat ...

  2. JavaScript Array map() 方法

    语法: array.map(function(currentValue,index,arr), thisValue) currentValue:必须.当前元素的值index:可选.当期元素的索引值ar ...

  3. JavaScript Array.map + parseInt

    map 生成新数组的函数,3个参数 1-currentValue, callback数组中正在处理的当前元素 2-index(可选): callback数组中正在处理的当前元素的索引 3-array( ...

  4. JavaScript 对象Array,Map,Set使用

    for(int i = 0 :i < 3 ;i++ ){ //[重点说三遍] 在说明每个对象的用法之前,首先说明 JavaScript 对象的使用一定要注意浏览器的兼容性问题!尤其是IE的版本! ...

  5. JavaScript Array 常用函数整理

    按字母顺序整理 索引 Array.prototype.concat() Array.prototype.filter() Array.prototype.indexOf() Array.prototy ...

  6. JavaScript Array 对象

    JavaScript Array 对象 Array 对象 Array 对象用于在变量中存储多个值: var cars = ["Saab", "Volvo", & ...

  7. [Javascript ] Array methods in depth - sort

    Sort can automatically arrange items in an array. In this lesson we look at the basics including how ...

  8. JavaScript之Map对象

    前言 工欲善其事,必先利其器.这是一款以前在前端项目中没有使用过的.有趣的对象,咱来看看如何使用~ 并非arrayObj.map(function) //arrayObj.map与arrayObj.f ...

  9. 如何实现JavaScript的Map和Filter函数?

    译者按: 鲁迅曾经说过,学习JavaScript最好方式莫过于敲代码了! 原文: Master Map & Filter, Javascript’s Most Powerful Array F ...

随机推荐

  1. /var/adm/wtmp文件太大该怎么办?

    /var/admin/wtmp文件记录所有用户的登陆信息,随着时间会增长到很大,/var/adm/wtmp文件太大该怎么办呢?先来看看/var/adm/wtmp文件的属性:testterm1:/#ls ...

  2. CentOS学习笔记(二):检查系统版本号及32位或64位系统

    1.检查系统版本号 lsb_release -a 2.检查32位或64位系统 file /bin/ls

  3. Linux centos 6.5 搭建 svn服务器

    实例:web1 1.安装subversion #yum install subversion #mkdir -p /oop/svn/ //创建svn目录 #chmod -R 777 /oop/svn ...

  4. LeetCode OJ:Unique Paths II(唯一路径II)

    Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...

  5. BEC translation exercise 4

    People have long known that nuts are part of a healthy diet.人们早就知道坚果是健康饮食的一部分.People, who you know w ...

  6. 通过 objc_setAssociatedObject alert 和 button关联 及传值

    原文地址 http://blog.csdn.net/lengshengren/article/details/16886915 //唯一静态变量key static const char associ ...

  7. C#进阶之路(五):Linq初识

    关于LINQ的文章,网上有很多,所以这篇文章我主要是总结下我自己的学习心得. 首先需要先了解的相关技术 1.隐式类型.匿名类型.对象初始化器 1)隐式类型,使用var关键字创建,C#编译器会根据用于初 ...

  8. python模型字段

    http://python.usyiyi.cn/translate/django_182/ref/models/fields.html#model-field-types

  9. ASP.NET MVC 缓存Outputcache (局部动态)

    首先说一下需求: 比如我需要对网站首页做缓存,于是在首页对于的Action上贴上了Outputcache,接着问题就来了,首页上的有部分数据是不能做缓存的,比如个人信息,不然,每个人登陆都是看到第一个 ...

  10. Azure VNet介绍

    Azure VNet的介绍 VNet是Azure云中逻辑隔离的虚拟网络.它包含两个含义: Azure的用户可以在VNet中创建自己的各种资源,感觉想自己的数据中心中一样; 在一个VNet中创建的资源和 ...