JavaScript中的map()函数
概述
Array.map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,同时不会改变原来的数组。
用法
Array.map(callback);
示例
//简单数组
const arr = [1, 3, 4, 5, 6, 7, 8, 10]; const cube = (num) => {
return num * num;
} const res = arr.map(cube);//[ 1, 9, 16, 25, 36, 49, 64, 100 ] // or const res = arr.map((num)=>{
return num * num;
})
//[ 1, 9, 16, 25, 36, 49, 64, 100 ] //对象数组和构造器
const OjbArray = [{
name: 'a',
age: 18,
isLikeEat: true,
isLikeSleep: true
}, {
name: 'b',
age: 19,
isLikeEat: true,
isLikeSleep: true
}, {
name: 'c',
age: 22,
isLikeEat: true,
isLikeSleep: true
}]; const Person = (target) => {
return {
name: target.name || 'default',
age: target.age || 18,
_eat: function() {
console.log(target.isLikeEat ? 'i like eat' : 'i dont like eat');
},
_sleep: function() {
console.log(target.isLikeSleep ? 'i like sleep' : 'i dont like sleep')
}
}
} let newPersons = OjbArray.map(Person);
console.log((newPerso// [ { name: 'a// age: 18, // _eat: [Function: _eat],
// _sleep: [Function: _sleep] },
// { name: 'b',
// age: 19,
// _eat: [Function: _eat],
// _sleep: [Function: _sleep] },
// { name: 'c',
// age: 22,
// _eat: [Function: _eat],
// _sleep: [Function: _sleep] } ]
注意 ⚠️
当和parseInt()函数配合使用 将字符转成数字的时候,可直接
['1', '2'].map(str => parseInt(str));
//or
['1', '2'].map(Number)
本质上是用元素作为函数参数去调用函数,所以无需加上参数
//这种写法是错误的
const arr = [1, 3, 4, 5, 6, 7, 8, 10]; const cube = (num) => {
return num * num;
} const res = arr.map(cube(num))
原文链接:https://blog.csdn.net/ruffaim/article/details/82260280
JavaScript中的map()函数的更多相关文章
- 由实现JavaScript中的Map想到的
项目中要用到JavaScript中的Map数据类型,它不像JDK那样有自带的,怎么办?搜了找到一个不错的(http://darkmasky.iteye.com/blog/454749).用这个可以满足 ...
- 借助JavaScript中的时间函数改变Html中Table边框的颜色
借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...
- 前端学习 第二弹: JavaScript中的一些函数与对象(1)
前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...
- 理解和使用 JavaScript 中的回调函数
理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报 分类: JavaScript(4) 目录( ...
- JavaScript中变量和函数声明的提升
现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...
- perl编程中的map函数示例
转自:http://www.jbxue.com/article/14854.html 发布:脚本学堂/Perl 编辑:JB01 2013-12-20 10:20:01 [大 中 小] 本文介绍 ...
- javascript中使用md5函数
javascript中使用md5函数 这对于js来讲本来是没有的,现在可以自己定义一个md5的函数,达到加密效果. var hexcase = 0; function hex_md5(a) { if ...
- Python中的map()函数和reduce()函数的用法
Python中的map()函数和reduce()函数的用法 这篇文章主要介绍了Python中的map()函数和reduce()函数的用法,代码基于Python2.x版本,需要的朋友可以参考下 Py ...
- 在 JavaScript 中使用构造器函数模拟类
今天,我们要讲的是在 JavaScript 中使用构造器函数(construcor function)模拟类. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统 ...
随机推荐
- sublime下载emmet
Emmet是一款Web前端开发工具Sublime非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度.只需按住Tab键即可把一个简写展开成HTML和CSS的代码 ...
- CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器
CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...
- css3-css3属性选择器
在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新 ...
- web编程jsp小tips
jsp文件头 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...
- Java数组重修,猜数小游戏改进和打印正三角形
数组重修,猜数小游戏 要求:从键盘输入一个数,判断数组是否包含此数,运用随机数 我们可能会这样写 import java.util.Random; import java.util.Scanner; ...
- 如何修改Pspice元件库中元件的模型参数?
比如下面是我取出的一个稳压管参数....* created using Parts release 7.1p on 11/03/98 * per Microsemi estimate: Trr(est ...
- Linux find过滤掉没有查看权限的文件
参考:https://blog.csdn.net/sinat_39416814/article/details/84993424 https://www.jianshu.com/p/2b056e1c0 ...
- mysql版本
$ mysql Welcome to the MariaDB monitor. Commands end with ; or \g. Your MySQL connection id is 4791 ...
- 科讯使用的:ckeditor编辑器.复制word图片.一直沾不上去.谁有好的解决办法呢
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- [CF959B]Mahmoud and Ehab and the message题解
超级大模拟 直接用map吧string对应到编号上来,然后在开个数组把每个编号对应到每个可以互相转化区块上来,预处理出区块的最小值,使用时直接取最小是即可 代码 #include <cstdio ...