JavaScript (Array) map 方法
2015-10-21 16:41
621 查看
原文地址:https://technet.microsoft.com/zh-cn/library/ff679976
map 方法 (Array) (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 方法启动后的条件 | 元素是否传递给回调函数? |
---|---|
在数组的原始长度之外添加元素。 | 否。 |
添加元素以填充数组中缺少的元素。 | 是,如果该索引尚未传递给回调函数。 |
元素已更改。 | 是,如果该元素尚未传递给回调函数。 |
从数组中删除元素。 | 否,除非该元素已传递给回调函数。 |
下面的示例演示 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
在以下文档模式中受支持:Internet Explorer 9 标准模式、Internet Explorer 10 标准模式和 Internet Explorer 11 标准模式。此外,也在应用商店应用(Windows 8 和 Windows Phone 8.1)中受支持。请参阅版本信息。
在以下文档模式中不受支持:Quirks、Internet Explorer 6 标准模式、Internet Explorer 7 标准模式、Internet Explorer 8 标准模式。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Spark RDD API详解(一) Map和Reduce
- JavaScript演示排序算法
- Python中map()函数浅析
- javascript实现10进制转为N进制数
- Android使用Google Map浅谈
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法