在JavaScript中操作数组之map()方法的使用


Posted in Javascript onJune 09, 2015

 JavaScript 数组map()方法创建一个新的数组使用调用此数组中的每个元素上所提供的函数的结果。
语法

array.map(callback[, thisObject]);

下面是参数的详细信息:

  •     callback : 从当前的元素函数产生新的数组的元素。
  •     thisObject : 对象作为该执行回调时使用

返回值:

返回创建数组
兼容性:

这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现。为了使它工作,你需要添加下面的脚本代码在顶部:

if (!Array.prototype.map)
{
 Array.prototype.map = function(fun /*, thisp*/)
 {
  var len = this.length;
  if (typeof fun != "function")
   throw new TypeError();

  var res = new Array(len);
  var thisp = arguments[1];
  for (var i = 0; i < len; i++)
  {
   if (i in this)
    res[i] = fun.call(thisp, this[i], i, this);
  }

  return res;
 };
}

例子:

<html>
<head>
<title>JavaScript Array map Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.map)
{
 Array.prototype.map = function(fun /*, thisp*/)
 {
  var len = this.length;
  if (typeof fun != "function")
   throw new TypeError();

  var res = new Array(len);
  var thisp = arguments[1];
  for (var i = 0; i < len; i++)
  {
   if (i in this)
    res[i] = fun.call(thisp, this[i], i, this);
  }

  return res;
 };
}

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);

document.write("roots is : " + roots ); 

</script>
</body>
</html>

这将产生以下结果:

roots is : 1,2,3
Javascript 相关文章推荐
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
js只执行1次的函数示例
Jul 20 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
JavaScript中join()方法的使用简介
Jun 09 #Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 #Javascript
Jquery实现遮罩层的方法
Jun 08 #Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 #Javascript
Js数组排序函数sort()介绍
Jun 08 #Javascript
元素绑定click点击事件方法
Jun 08 #Javascript
JavaScript获取URL汇总
Jun 08 #Javascript
You might like
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
简单介绍Python中的JSON使用
2015/04/28 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
delegate与普通函数的区别
2014/01/22 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
制定岗位职责的原则
2013/11/08 职场文书
运动会跳远广播稿
2014/02/04 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
关于迟到的检讨书
2015/05/06 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
python基础之//、/与%的区别详解
2022/06/10 Python