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 ...
随机推荐
- oracle to_Char fm 函数
近期在使用oracle to_char函数处理浮点数时发现有坑,这里做个小结: 网上可以找到关于to_char中使用fm9990.0099中的相关解释: 0表示:如果参数(double或者float类 ...
- mysql中varchar可以存多少汉字
汉字长度与编码有关 MySql 5.0 以上的版本: 1.一个汉字占多少长度与编码有关: UTF-8:一个汉字 = 3个字节,英文是一个字节 GBK: 一个汉字 = 2个字节,英文是一个字节 2.va ...
- VS---《在VS2010中 使用C++创建和使用DLL》（002）
VS---<在VS2010中 使用C++创建和使用DLL>(002) 前面初认识了创建和调用DLL,在VS工程下可以通过在 同一工程.不同工程 下创建和调用DLL.现在,同一工程下创建和调 ...
- Ubuntu系统---安装Caffe (+OpenCV+Python+CPU-only)
安装配置Ubuntu14.04+Caffe (+OpenCV+Python+CPU-only) 记录 [作者:Wu Ping.时间:20180428.] 本人已经安装很多次的Caffe了:从开始的初探 ...
- 【记忆化搜索/数位DP】zznu2175（长度为n的含有ACM的字符串）
随机字符串 题目描述 起名字什么的最麻烦,我们来生成一些随机字符串吧 生成的字符串当然是有要求的: .长度不能超过n .字符串中仅包含大写字母 .生成的字符串必须包含字符串“ACM” ok,是不是很简 ...
- CSS基础学习 20.CSS媒体查询
- VMware虚拟机CentOS与宿主机共享目录
正常情况下,在虚拟机CentOS中安装了vmware-tools后,配置完成共享目录,会自动在/mnt/hgfs下面出现共享目录. 如果该目录为空,并且通过命令:vmware-hgfsclient 的 ...
- Load store action in vulkan & ogles 的解决方案
metal的带宽之前的blog有讲 这篇主要是vulkan 和ogles的解决方案 https://www.khronos.org/registry/vulkan/specs/1.1-extensio ...
- filebeat configure
docker run -d --rm -v ./filebeat.yml:/usr/share/filebeat/filebeat.yml -v /var/log:/var/log docker.e ...
- Java8-Stream-No.13
import java.security.SecureRandom; import java.util.Arrays; import java.util.stream.IntStream; publi ...