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. Image Processing and Computer Vision_Review：A survey of recent advances in visual feature detection（Author's Accepted Manuscript）——2014.08

    翻译 一项关于视觉特征检测的最新进展概述(作者已被接受的手稿) 和A survey of recent advances in visual feature detection——2014.08内容相 ...

  2. HTML插入地图

    方法/步骤 1.打开“百度地图生成器”的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在“1.定位中心点”中,切换城市,并 ...

  3. DB2 alter 新增/删除/修改列

    SQL语句 增加列.修改列.删除列 1 添加字段 语法 : alter table 表名称 add 字段名称 类型 demo: alter table tableName add columnName ...

  4. Delphi 方法的声明

  5. web开发：jquery之DOM

    一.文档结构 二.文档操作 三.文档操作案例 四.form表单 五.正则 六.form案例 一.文档结构 ```jsvar $sup = $('.sup');console.log($sup.chil ...

  6. 关于Java的Object.clone()方法与对象的深浅拷贝

    文章同步更新在个人博客:关于Java的Object.clone()方法与对象的深浅拷贝 引言 在某些场景中,我们需要获取到一个对象的拷贝用于某些处理.这时候就可以用到Java中的Object.clon ...

  7. js替换文本内容。实例

    <script language="javascript"> var r= "1\n2\n3\n"; //将字母\n替换成分号 alert(r.re ...

  8. HDU 6074 - Phone Call | 2017 Multi-University Training Contest 4

    看标程的代码这么短,看我的.... 难道是静态LCA模板太长了? /* HDU 6074 - Phone Call [ LCA,并查集 ] | 2017 Multi-University Traini ...

  9. i3wm脚本

    exec 执行命令 --no-startup-id 有些脚本或者程序不支持启动通知,不加命令,鼠标会长时间空转,60秒左右 exec_always 每次重启i3,使用该命令启动的程序都会重新执行一次, ...

  10. linux 下python进程查看及关闭

    查看进程 ps -ef |grep python 关闭进程 kill -9 26879 其中26879为进程号. linux下后台执行某个python脚本 nohup python -u xxx.py ...