位置: 编程技术 - 正文

Javascript中Array.prototype.map()详解

编辑:rootadmin

推荐整理分享Javascript中Array.prototype.map()详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

在我们日常开发中,操作和转换数组是一件很常见的操作,下面我们来看一个实例:

从上例可以看出,所有的操作重复率都比较高,如何来优化呢,幸运的是Ecmascript 5给我们提供了一个map方法,我们可以利用它来优化上例:

从上例看以看出,我们使用map替换掉了for循环部分,从而只需要关心每个元素自身的实现逻辑。关于map方法详情请戳这里。

1.map基本定义:array.map(callback[, thisArg]);

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。

如果 thisArg 参数有值,则每次 callback 函数被调用的时候,this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined,则 this 指向全局对象 。

Javascript中Array.prototype.map()详解

map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)。

当一个数组运行 map 方法时,数组的长度在调用第一次 callback 方法之前就已经确定。在 map 方法整个运行过程中,不管 callback 函数中的操作给原数组是添加还是删除了元素。map 方法都不会知道,如果数组元素增加,则新增加的元素不会被 map 遍历到,如果数组元素减少,则 map 方法还会认为原数组的长度没变,从而导致数组访问越界。如果数组中的元素被改变或删除,则他们被传入 callback 的值是 map 方法遍历到他们那一刻时的值。

2.map实例:

上例演示了在一个String上使用map方法获取字符串中每个字符所对应的 ASCII 码组成的数组。请注意看打印的console.log(arr)打印的结果。

也许你会有疑问,为什么不是[1,2,3]呢?我们知道parseInt方法可接收两个参数,第一个参数为需要转换的值,第二个参数为进制数,不了解的可以戳这里。当我们使用map方法的时候,callback函数接收三个参数,而parseInt最多只能接收两个参数,以至于第三个参数被直接舍弃,与此同时,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN。看下面的输出结果:

后面两个很容易理解,但是前两个为什么返回1呢?为了解释这个问题,我们看看官方的描述:If radix is undefined or 0 (or absent), JavaScript assumes the following:a) If the input string begins with “0x” or “0X”, radix is (hexadecimal) and the remainder of the string is parsed.b) If the input string begins with “0″, radix is eight (octal) or (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that (decimal) is used, but not all browsers support this yet. For this reason always specify a radix when using parseInt.c) If the input string begins with any other value, the radix is (decimal).在第三点中当string为其他值时,进制默认为。

那么我们如何修改才能使上例正常输出呢?看下例:

3.map方法的兼容性:map方法在IE8及以下浏览器不支持,要想兼容老版本的浏览器,可以:

a) Don't use map.b) Use something like es5-shim to make older IE's support map.c) Use the _.map method in Underscore or Lodash for an equivalent utility function.

标签: Javascript中Array.prototype.map()详解

本文链接地址:https://www.jiuchutong.com/biancheng/385645.html 转载请保留说明!

上一篇:javascript数组详解(javascript数组操作方法)

下一篇:Javascript 构造函数详解(javascript构造函数继承)

  • 小规模纳税人结转
  • 应交所得税的计算公式
  • 车间停止生产时间怎么计算
  • 材料采购合同需要注意什么
  • 固定资产40%部分能抵即征即退项目吗
  • 社会团体财政票据管理制度
  • 房地产开发企业的土地使用权计入哪里
  • 管理费用多计提了怎么冲
  • 营改增后预存话费可以报销吗?
  • 零售商品收入会计分录
  • 客户可以把现金存入对公户吗
  • 按计划成本发出原材料怎么算
  • 租个人房子开发票税率是多少
  • 办公室租赁合同需要交那些税?
  • 金税盘与税控盘及报税盘怎么区分
  • 税收六项减免
  • 快递费可以抵扣进项税额吗
  • 应交税费的期初余额是借还是贷
  • 商品赠送的内账怎么做账
  • 体育用品怎么才能买到
  • 协会会费计入什么会计科目二级
  • 增值税发票已认证抵扣还可以进项税额转出吗
  • 即征即退和先征后退适用范围
  • Win10 20H2 KB5001391补丁包更新内容汇总
  • 电子承兑到期怎样接收
  • 计提长期待摊费用会计分录怎么写
  • shwicon.exe - shwicon是什么进程 有什么用
  • ubuntu npm安装
  • 芒通,法国 (© Flavio Foglietta/Getty Images)
  • 将时间序列转化为图像
  • php 取字符串 前几位
  • vue.js.
  • css定位属性的运用
  • php使用mysql
  • 财务费用的增加记在哪一方
  • 预付装修款账务处理
  • 事业收入如何确认
  • python提供的3个基本数字类型
  • 认缴制下怎样变更法人
  • 帝国cms如何调用网络
  • wordpress删除修订版本
  • 待抵扣进项税额什么意思
  • 公户网银丢了
  • 接受捐赠计入
  • 不征税收入怎么做会计分录
  • 税控盘买了怎么用
  • 豆制品属于农副产品吗为什么
  • 公司向个人借款怎么做账
  • 计提销售费用什么意思
  • 单位补扣社保算漏交吗
  • 有限公司股东撤资退股
  • 毁损的原材料怎么处理
  • 给员工发工资发多少合适?
  • 个人账户打流水需要本人吗
  • 银行承兑汇票托收凭证
  • 去年未做账的发票怎么查
  • 其他商业项目
  • sql语句学习
  • MySQL中的max()函数使用教程
  • mysql5.7最新版
  • services.exe修改注册表
  • win7旗舰系统
  • centos查看当前yum源
  • reg.exe是什么东西?
  • ubuntu系统怎么开机
  • SwiftBTN.exe - SwiftBTN是什么进程 有啥作用
  • win 7快速启动
  • vue条形码
  • 关闭默认共享和共享文件夹
  • android音频播放器
  • js窗口关闭触发事件
  • 百度定位服务平台
  • 面向对象的基础知识
  • 常用的javascript对象
  • 百望税控盘电子发票发送邮箱
  • 企业所得税率2023年
  • 海口社保一个月多少钱
  • 海口市地方税务局是什么级别
  • 税务培训主题
  • 广东省地方税务局公告2017年第6号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设