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. review15

    不同区域的星期格式 不同国家的星期的简称或全称有很大的不同.如果想用特定地区的星期格式来表示日期中的星期,可以用format的重载方法: format(Locale locale, 格式化模式,日期列 ...

  2. PyCharm 的初始设置2 - 打开、新建项目

    03. 新建/打开一个 Python 项目 3.1 项目简介 开发 项目 就是开发一个 专门解决一个复杂业务功能的软件 通常每 一个项目 就具有一个 独立专属的目录,用于保存 所有和项目相关的文件 – ...

  3. HDU 1052 贪心+dp

    http://acm.hdu.edu.cn/showproblem.php?pid=1052 Tian Ji -- The Horse Racing Time Limit: 2000/1000 MS ...

  4. 完全分布式安装hadoop集群

    0.安装jdk 1.配置hosts文件 2.建立hadoop运行账号 3.配置ssh免密码登录 4.在namenode上配置hadoop 4.1.修改hadoop-env.sh文件 4.2.修改yar ...

  5. fatal: Could not read from remote repository.

    fatal: Could not read from remote repository. Please make sure you have the correct access rightsand ...

  6. WebView的简单使用

    activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  7. PHP封装返回Ajax字符串和JSON数组

    <?php class DBDA { public $host="localhost"; public $uid = "root"; public $pw ...

  8. Ubuntu 安装arm-linux-gcc编译器

    /********************************************************************************** * Ubuntu 安装arm-l ...

  9. 1151 LCA in a Binary Tree(30 分)

    The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U ...

  10. Dungeon Master (BFS与DFS的应用)

    个人心得:一开始用DFS弄了半天一直输出不了结果,后面发现并没有进行判断:好不容易能够得出答案,结果超时了,才发现原来要用BFS: 对于DFS: 从一个点开始模拟能走的所有步骤,注意边界条件,走到不能 ...