概述
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. CSS3选择器 ::selection选择器

    “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本).浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示: 从上图中可以看出,用鼠标 ...

  2. CentOS安装Git服务器 Centos 6.5 + Git 1.7.1.0 + gitosis

    1.安装扩展 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel 2.下载git ...

  3. pandas学习(一)

    pandas.DataFrame.sort_index 用法 sort_index(axis=0, level=None, ascending=True, inplace=False, kind='q ...

  4. tensorflow2.0 squeeze出错

    用tf.keras写了自定义层,但在调用自定义层的时候总是报错,找了好久才发现问题所在,所以记下此问题. 问题代码 u=tf.squeeze(tf.expand_dims(tf.expand_dims ...

  5. CodeForces - 587E[线段树+线性基+差分] ->(线段树维护区间合并线性基)

    题意:给你一个数组,有两种操作,一种区间xor一个值,一个是查询区间xor的结果的种类数 做法一:对于一个给定的区间,我们可以通过求解线性基的方式求出结果的种类数,而现在只不过将其放在线树上维护区间线 ...

  6. css3爆炸轮播效果

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...

  7. node中console自定义样式

    最近公司的项目一直使用gulpfile打包,项目会有三种项目打包(生产环境)和监听(开发环境)两种过程,同时需要清除文件夹,希望打包时增加提示以便区分,暂时分为上述三种提示打包.监听.清除. 先上co ...

  8. Keras 层layers总结

    https://blog.csdn.net/u010159842/article/details/78983841

  9. Linux_自制系统服务启动脚本

    目录 目录 前言 Case语句 Apache 启动脚本 Postfix service 启停脚本 前言 在Linux的某些系统服务中,需要自己定制启动服务的脚本.通常会使用Cash语句来实现. Cas ...

  10. Delphi 快速读取TXT 指定行的数据

    http://blog.csdn.net/MichaelJScofield/article/details/41869785 Delphi 快速读取TXT 指定行的数据 分类:Delphi个人挫品 ( ...