JS中的map()方法
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]
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()方法的更多相关文章
- jQuery与JS中的map()方法使用
1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
- js中的Map对象的简单示例
es6提供一个对象Map, 其功能类似于java中的Map, 下面是java中的Map和js中的Map的简单对比: js中的Map.set()相当于java中的Map.put(), js中的Map.s ...
- 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 ...
- js中的tostring()方法
http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- JS中通过call方法实现继承
原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...
- JavaScript -- 时光流逝（二）：js中数组的方法
JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...
- js实现的map方法
/** * * 描述:js实现的map方法 * @returns {Map} */ function Map(){ var struct = function(key, value) { this.k ...
- ASP.NET#使用母版时，如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题
当使用母版,要使用js中的getElementById()方法取得某个内容页的元素时,所选取的id并不是母版中内容页的id,而是在设计内容页时设定的id例子:母版页: ...... <head ...
随机推荐
- Django单表查询及其方法
单表查询 前期准备 首先新建一个test的python文件,然后再manage.py中导入main语句及其下面的复制到新文件中 并导入django 写上django.setup() 就可以导入对应的m ...
- pip安装tesserocr时报错
在Xubuntu上的python2虚拟环境中, 使用pip安装tesserocr时报错error: command 'x86_64-linux-gnu-gcc' failed with exit st ...
- layui多图上传实现删除功能
在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-up ...
- Tomcat下配置JNDI的三种方式
最近在整理项目上的配置文件,正好看到了数据源配置,想着配置方式有多种,便趁热打铁,记录下常规的Tomcat配置数据源的方式 1.单个工程配置 找到Tomcat下的server.xml文件,在Conte ...
- linux 没有界面内容显示不全解决办法
1.管道 管道简单理解就是,使用管道意味着第一个命令的输出会作为第二个命令的输入,第二个命令的输出又会作为第三个命令的输入,依此类推.利用Linux所提供的管道符“|”将两个命令隔开,管道符左边命令的 ...
- ftp定时下载指定目录或文件脚本
#! /bin/bash rpm -qa lftp &>/dev/null || yum install -y lftp lftp 160.106.0.34 << EOF c ...
- [].slice.call(arguments,1) 个人理解
var arr = []; [] == arr; 假设 var arr = [1,2,3,4,5]; 那么 arr.slice(1,2) == [2]; 通过 slice.call 才能使用call显 ...
- 使用WebSocket实现简单的在线聊天室
前言:我自已在网上找好了好多 WebSocket 制作 在线聊天室的案列,发现大佬们写得太高深了 我这种新手看不懂,所以就自已尝试写了一个在线简易聊天室 (我只用了js 可以用jq ) 话不多说,直接 ...
- 2、docker安装：内核要求、docker三要素、安装、helloworld、底层原理
1.前提说明 1.CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 2.前提条件:内 ...
- pe头
1.dos头 结构: struct _IMAGE_DOS_HEADER { WORD e_magic; WORD e_cblp; WORD e_cp; WORD e_c ...