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. 分布式任务队列 Celery —— Task对象

    转载至 JmilkFan_范桂飓:http://blog.csdn.net/jmilk  目录 目录 前文列表 前言 Task 的实例化 任务的名字 任务的绑定 任务的重试 任务的请求上下文 任务的继 ...

  2. 【异常】诡异的mysql错误，Pagehelper插件混乱导致吗

    1 详细的异常信息 Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in ...

  3. 查看tensorflow Pb模型所有层的名字

    代码如下: import tensorflow as tf def get_all_layernames(): """get all layers name"& ...

  4. Make It Connected CodeForces - 1095F (建图+最小生成树)

    Make It Connected CodeForces - 1095F You are given an undirected graph consisting of nn vertices. A ...

  5. Layui 内置方法 - layer.prompt_(输入层)

    prompt的参数也是向前补齐的.options不仅可支持传入基础参数,还可以传入prompt专用的属性.当然,也可以不传,yes携带value 表单值index 索引elem 表单元素. promp ...

  6. 冒泡排序Bubble_Sort

    基本原理:对于冒泡排序来说,基本思想是从第一个元素开始,数组中的数据依次和它后面相邻的数据进行比较,即1和2比较,2和3比较,a和a+1比较,直到倒数第二位和倒数第一位的比较,如果顺序不对就进行交换, ...

  7. 【换根dp】9.22小偷

    换根都不会了 题目大意 给定一棵$n$个点的树和树上一撮关键点,求到所有$m$个关键点距离的最大值$dis_{max}\le LIM$的点的个数. $n,m\le 30000,LIM\le 30000 ...

  8. MyBatis执行原理图

    作者:W&L 推荐: 陶邦仁的博客 (1)加载配置并初始化       触发条件:加载配置文件 配置来源于两个地方,一处是配置文件,一处是Java代码的注解,将SQL的配置信息加载成为一个个M ...

  9. 线段树（四）——两个标记（add和set）

    add无序,set有序.规定同时有两个标记时,表示先执行set再执行add. 1. 更新操作: int op,cl,cr,v; void update(int o, int L, int R) { , ...

  10. python json模块小技巧

    python的json模块通常用于与序列化数据,如 def get_user_info(user_id): res = {"user_id": 190013234,"ni ...