js array.map()学习笔记

JavaScript map方法  

2012-08-28 15:25:14|  分类： JavaScript|字号 订阅

 

 

map 方法 (JavaScript)

 

对数组的每个元素调用定义的回调函数并返回包含结果的数组。

对数组用指定的方法。

 

 

array1.map(callbackfn[, thisArg]) 

参数

---

 

参数	定义
array1	必需。 一个数组对象。
callbackfn	必需。 一个接受最多三个参数的函数。 对于数组中的每个元素，map 方法都会调用 callbackfn 函数一次。
thisArg	可选。 可在 callbackfn 函数中为其引用 this 关键字的对象。 如果省略 thisArg，则 undefined 将用作 this 值。

返回值

---

其中的每个元素均为关联的原始数组元素的回调函数返回值的新数组。

异常

---

如果 callbackfn 参数不是函数对象，则将引发 TypeError 异常。

备注

---

对于数组中的每个元素，map 方法都会调用 callbackfn 函数一次（采用升序索引顺序）。 不为数组中缺少的元素调用该回调函数。

除了数组对象之外，map 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数语法

回调函数的语法如下所示：

function callbackfn(value, index, array1)

可使用最多三个参数来声明回调函数。

下表列出了回调函数参数。

 

回调参数	定义
value	数组元素的值。
index	数组元素的数字索引。
array1	包含该元素的数组对象。

修改数组对象

数组对象可由回调函数修改。

下表描述了在 map 方法启动后修改数组对象所获得的结果。

 

示例

---

下面的示例阐释了 map 方法的用法。

JavaScript

 

// Define the callback function. function AreaOfCircle(radius) {     var area = Math.PI * (radius * radius);     return area.toFixed(0); }  // Create an array. var radii = [10, 20, 30];  // Get the areas from the radii. var areas = radii.map(AreaOfCircle);  document.write(areas);  // Output: // 314,1257,2827 

下面的示例阐释 thisArg 参数的用法，该参数指定对其引用 this 关键字的对象。

JavaScript

 

// Define an object that contains a divisor property and // a remainder function. var obj = {     divisor: 10,     remainder: function (value) {         return value % this.divisor;     } }  // Create an array. var numbers = [6, 12, 25, 30];  // Get the remainders. // The obj argument specifies the this value in the callback function. var result = numbers.map(obj.remainder, obj); document.write(result);  // Output: // 6,2,5,0 

在下面的示例中，内置 JavaScript 方法用作回调函数。

JavaScript

 

// Apply Math.sqrt(value) to each element in an array. var numbers = [9, 16]; var result = numbers.map(Math.sqrt);  document.write(result); // Output: 3,4 

map 方法可应用于字符串。 下面的示例阐释了这一点。

JavaScript

 

// Define the callback function. function threeChars(value, index, str) {     // Create a string that contains the previous, current,     // and next character.     return str.substring(index - 1, index + 2); }  // Create a string. var word = "Thursday";  // Apply the map method to the string. // Each array element in the result contains a string that // has the previous, current, and next character. // The commented out statement shows an alternative syntax. var result = [].map.call(word, threeChars); // var result = Array.prototype.map.call(word, threeChars);  document.write(result);  // Output: // Th,Thu,hur,urs,rsd,sda,day,ay