概述
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()函数的更多相关文章

  1. 由实现JavaScript中的Map想到的

    项目中要用到JavaScript中的Map数据类型,它不像JDK那样有自带的,怎么办?搜了找到一个不错的(http://darkmasky.iteye.com/blog/454749).用这个可以满足 ...

  2. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

  3. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  4. 理解和使用 JavaScript 中的回调函数

    理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报  分类: JavaScript(4)    目录( ...

  5. JavaScript中变量和函数声明的提升

    现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...

  6. perl编程中的map函数示例

    转自:http://www.jbxue.com/article/14854.html 发布:脚本学堂/Perl  编辑:JB01   2013-12-20 10:20:01  [大 中 小] 本文介绍 ...

  7. javascript中使用md5函数

    javascript中使用md5函数 这对于js来讲本来是没有的,现在可以自己定义一个md5的函数,达到加密效果. var hexcase = 0; function hex_md5(a) { if ...

  8. Python中的map()函数和reduce()函数的用法

    Python中的map()函数和reduce()函数的用法 这篇文章主要介绍了Python中的map()函数和reduce()函数的用法,代码基于Python2.x版本,需要的朋友可以参考下   Py ...

  9. 在 JavaScript 中使用构造器函数模拟类

    今天,我们要讲的是在 JavaScript 中使用构造器函数(construcor function)模拟类. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统 ...

随机推荐

  1. 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧!

    状态管理的现状 很多前端开发者认为,Vuex和Redux是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的.但是通常Redux是用于解决工程性问题的,用于分离业务与视图,让结构更 ...

  2. js undefined三目运算

    js ajax传值中 "id":$('#id').val(), 如果#id不存在,使用$('#id').val()||‘’,可避免向后台传入undefined

  3. 给mongodb设置密码

    内容来自:https://segmentfault.com/a/1190000011554055 mongodb安装后是无需密码 Mongodb安装后自身是没有密码的,用户连接只需填写id地址,端口号 ...

  4. [BZOJ] 最长距离

    问题描述 windy 有一块矩形土地,被分为 NM 块 11 的小格子. 有的格子含有障碍物.如果从格子 A 可以走到格子 B,那么两个格子的距离就为两个格子中心的欧几里德距离.如果从格子 A 不可以 ...

  5. ht-4 hashmap特性

    一.hashmap底层原理: hashmap调用默认构造方法会产生一个默认底层是长度为16的Entry数组,首先调用key的hasCode()方法来得到一个整数, int hash = hash(ke ...

  6. 搭建 Nuget.Server

    公司项目容器化的需要, 小编研究将net framework项目升级成net standard 2.0,但是在打包上传nupkg 后,vs 的 nuget 插件不能识别依赖项,显示 Unsupport ...

  7. Solr索引数据

    一般来说,索引是系统地排列文档或(其他实体).索引使用户能够在文档中快速地查找信息. 索引集合,解析和存储文档. 索引是为了在查找所需文档时提高搜索查询的速度和性能. 在Apache Solr中的索引 ...

  8. Intellij IDEA中如何给main方法赋args

    Intellij IDEA中如何给main方法赋args 程序: package com.otherExample; /** * Created by 谭雪娇 on 2017/3/29. */publ ...

  9. [CSP-S模拟测试]:石头剪刀布(rps)(概率DP)

    题目传送门(内部题9) 输入格式 第一行一个整数$n$.接下来$n$行每行$3$个非负整数$r_i,p_i,s_i$. 输出格式 一行一个实数表示答案.当你的答案与标准答案的绝对或相对误差不超过${1 ...

  10. 如何把vue.js项目部署到服务器上

    如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...