map定义和方法 map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。

map()方法按照原始数组元素顺序依次处理元素。

注意: map不会对空数组进行检测

map不会改变原始数组

arr.map(function(currentValue,index,arr),thisValue)

参数说明 function(currentValue,index,arr) 必须,函数,数组中的每个元素都会执行这个函数函数参数

函数参数 currentValue 必须 当前元素值

index 可选 当前元素的索引值

arr 可选 当前元素属于的数组对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>map方法</title>
</head>
<body>
<p>点击按钮将数组中的每个元素乘以输入框指定的值,并返回新数组</p>
<p>
最小年龄:
<input type="number" id="age" value="10" />
</p>
<button id="btn">点我</button>
<p id="data">新数组</p>
<script type="text/javascript">
var btn = document.getElementById("btn");
var data = document.getElementById("data");
var age = document.getElementById("age");
var numbers = [25,36,121,49];
function myFunction(num,index,arr){
console.log('arr',arr);
console.log('index',index);
console.log('num',num);
return num * age.value;
}
btn.onclick = function(){
data.innerHTML = numbers.map(myFunction);
}
</script>
</body>

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);

打印结果为:

Array [2,8,18,32]
var array1 = [1, 4, 9, 16];
const map1 = array1.map(x => {     if (x == 4) {         return x * 2;
    }
}); console.log(map1);

打印结果为:

Array [undefined, 8, undefined, undefined]
为什么会出现三个undefined呢?而不是我预期的[1,8,9,16]。
这样写只是增加了一个条件,即x的值为4时才乘以2,之所以会出现undefined,
是因为map()方法创建了一个新数组,但新数组并不是在遍历完array1后才被赋值的,而是每遍历一次就得到一个值。所以,下面这样修改后就正确了:
var array1 = [1, 4, 9, 16];
const map1 = array1.map(x => {
if (x == 4) {
return x * 2;
}
return x;
});

这里注意箭头函数有两种格式:
1.只包含一个表达式,这时花括号和return都省略了。
2.包含多条语句,这时花括号和return都不能省略。

大家可以参考:ES6标准新增了一种新的函数

 

JS中的map()方法的更多相关文章

  1. jQuery与JS中的map()方法使用

    1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...

  2. js中的Map对象的简单示例

    es6提供一个对象Map, 其功能类似于java中的Map, 下面是java中的Map和js中的Map的简单对比: js中的Map.set()相当于java中的Map.put(), js中的Map.s ...

  3. JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别

    JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别  :https://blog.csdn.net/hyupeng1006/a ...

  4. js中的tostring()方法

    http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...

  5. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  6. JS中通过call方法实现继承

    原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...

  7. JavaScript -- 时光流逝(二):js中数组的方法

    JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...

  8. js实现的map方法

    /** * * 描述:js实现的map方法 * @returns {Map} */ function Map(){ var struct = function(key, value) { this.k ...

  9. ASP.NET#使用母版时,如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题

    当使用母版,要使用js中的getElementById()方法取得某个内容页的元素时,所选取的id并不是母版中内容页的id,而是在设计内容页时设定的id例子:母版页: ...... <head ...

随机推荐

  1. ie11浏览器不显示vbs脚本

    最初接触学习vbs在浏览器上运行,老不显示vbscript脚本语言,所以找了很久,最后就用这个方法吧,比较简单有效 原因:新版IE不再支持 VBScript,就是因为微软已经放弃把VBScript作为 ...

  2. Google 停止推出 Chrome 79

    据 Google 方面表示,新版本的使用率达到了整个用户群的 50% 已经.不过值得注意的是,并非所有提供该更新的设备都已安装了该工具.初步数据显示,只有 10% 的人部署了新版本. 针对用户反馈,开 ...

  3. C# Winform TabControl 双击关闭TabPage

    在使用TabControl控件时,需要考虑自动创建的TabPage页实现——关闭功能 思路一:自定义TabControl控件,添加关闭按钮 思路二:TabControl控件TabPage显示ToolT ...

  4. SVN建立分支和合并代码

    1.SVN建立分支正确SVN服务器上会有两个目录:trunk和branches.trunk目录下面代码就是所谓的主版本,而branches文件夹主要是用来放置分支版本.分支版本是依赖于主版本的,因此建 ...

  5. golang restful api

    https://medium.com/@petrousov/how-to-build-a-restful-api-in-go-for-phonebook-app-d55f7234a10 ------- ...

  6. 用JavaScript更新CSS变量

    HTML <div class="mover"></div> CSS .mover { width: 50px; height: 50px; backgro ...

  7. 灵活部署django缓存,并使用

    使用django内置的redis=============>pip3 install django-redisCACHES = { 'default':{ 'BACKEND':'django_r ...

  8. ACM-ICPC 2018 焦作赛区网络预赛 K. Transport Ship(DP)

    题目链接:https://nanti.jisuanke.com/t/31720 题意:有n种飞船,每种飞船有(1 << c)- 1  艘,容量为 k[i] ,q 次询问,每次询问选若干艘飞 ...

  9. C# Transaction 事务处理 -依赖事务

    在DependentTransaction()方法中,实例化CommittableTransaction类,创建一个根事务,显示事务的信息.接着, tx.DependentClone()方法创建一个依 ...

  10. BZOJ 3630: [JLOI2014]镜面通道 (网络流 +计算几何)

    水能流过的地方光都能达到 呵呵.jpg 那就是裸的最小割(割开上边界和下边界)了- 判矩形和圆相交的时候就用圆心对矩形求一次点到矩形的最近距离(类似KD树的预估函数). CODE #include & ...