JS中的map()方法

摘要:
map定义和方法map()方法返回一个新数组,数组中的元素是原始数组元素调用函数处理的后值。map()方法按照原始数组元素的顺序处理元素。注意:映射不会检测空数组。映射不会更改原始数组arr映射(函数(currentValue,index,arr),thisValue)参数描述函数(currentValue,index,arr)必须为,函数和数组中的每个元素都将

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>

JS中的map()方法第1张

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()方法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇zookeeper和duboo 没用UEFI和BIOS双启动U盘的制作下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

node-glob学习

node的glob模块允许你使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件. 这个glob工具基于javascript.它使用了 minimatch 库来进行匹配 用法: 首先下载glob包:  npm install glob 调用格式: var glob = require("glob") // optio...

Round() 四舍五入 js银行家算法

首先问一下round(0.825,2) 返回的结果,大家猜一猜, 首先SQL server 返回的是 0.83 js的返回结果 是0.83,code 如下:   var b = 0.825;         alert(Math.round(b * 100) / 100); 其实js中可以 直接用toFixed函数的,   var b = 0.825;...

Java ArrayList【笔记】

Java ArrayList【笔记】 ArrayList ArrayList基本结构 ArrayList 整体架构比较简单,就是一个数组结构 源码中的基本概念 index 表示数组的下标,从 0 开始计数 elementData 表示数组本身 DEFAULT_CAPACITY 表示数组的初始大小,默认是 10 size 表示当前数组的大小,类型 int,...

Java集合之ConcurrentHashMap解析

上一篇介绍了HashMap的数据结构:数组+单链表(jdk 1.8,当链表长度达到8后,链表将会被转换为红黑树结构)。日常开发中我们经常使用,随着业务规模、场景的不断复杂发展,多线程开发越来越多的进入到我们日常开发中,那么问题就来了,HashMap是线程安全的吗?答案是否定的,保证HashMap的线程安全需要我们开发中自行维护。那么有没有线程安全的集合框架...

解决PHP json_encode() 编码字符中包含<>时,转化为\u003E\u003C

一、PHP json_encode里面经常用到的 JSON_UNESCAPED_UNICODE和JSON_UNESCAPED_SLASHES php格式化json的函数 json_encode($value,$options) 其中有2个比较常用到的参数 JSON_UNESCAPED_UNICODE(中文不转为unicode ,对应的数字 256) J...

JS日历控件集合----附效果图、源代码

http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html  在进行开发的过程中,经常需要输入时间,特别是在进行查询、统计的时候,时间限定更为重要。       尽管ASP.NET也集成了日历控件,但是其集成的代码量很大,你可以做一个测试,当你在页面使用一个日历控件时,在发布之后查看该页面的源代码...