JavaScript Array map() 方法
JavaScript基础 2022-05-13 16:28:04小码哥的IT人生shichen
JavaScript Array map() 方法
实例
返回原始数组中所有值的平方根的数组：
var numbers = [4, 9, 16, 25];
var x = numbers.map(Math.sqrt)
document.getElementById("demo").innerHTML = x;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>map() 方法使用为每个数组元素调用函数的结果创建新数组。</p>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25];
document.getElementById("demo").innerHTML = numbers.map(Math.sqrt);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 实例。
定义和用法
map() 方法使用为每个数组元素调用函数的结果创建新数组。
map() 方法按顺序为数组中的每个元素调用一次提供的函数。
注释：map() 对没有值的数组元素不执行函数。
注释：map() 不会改变原始数组。
浏览器支持
表格中的数字注明了完全支持该方法的首个浏览器版本。
所有浏览器都完全支持 map() 方法：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
语法
array.map(function(currentValue, index, arr), thisValue)
参数值
| 参数 | 描述 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| function(currentValue, index, arr) | 必需。为数组中的每个元素运行的函数。
函数参数：
|
||||||||
| thisValue |
可选。要传递给函数以用作其 "this" 值的值。 如果此参数为空，则值 "undefined" 将作为其 "this" 值传递。 |
技术细节
| 返回值： | 数组，包含为原始数组中的每个元素调用提供的函数的结果。 |
|---|---|
| JavaScript 版本： | ECMAScript 5 |
更多实例
示例代码：
将数组中的所有值乘以 10：
var numbers = [65, 44, 12, 4];
var newarray = numbers.map(myFunction)
function myFunction(num) {
return num * 10;
}
document.getElementById("demo").innerHTML = newarray;;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>将数组中的所有值乘以 10：</p>
<p id="demo"></p>
<script>
const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction);
document.getElementById("demo").innerHTML = newArr;
function myFunction(num) {
return num * 10;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
获取数组中每个人的全名：
var persons = [
{firstname : "Malcom", lastname: "Reynolds"},
{firstname : "Kaylee", lastname: "Frye"},
{firstname : "Jayne", lastname: "Cobb"}
];
function getFullName(item) {
var fullname = [item.firstname,item.lastname].join(" ");
return fullname;
}
function myFunction() {
document.getElementById("demo").innerHTML = persons.map(getFullName);
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>用旧数组中每个人的全名计算一个新数组：</p>
<p id="demo"></p>
<script>
const persons = [
{firstname : "Malcom", lastname: "Reynolds"},
{firstname : "Kaylee", lastname: "Frye"},
{firstname : "Jayne", lastname: "Cobb"}
];
document.getElementById("demo").innerHTML = persons.map(getFullName);
function getFullName(item) {
return [item.firstname,item.lastname].join(" ");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
