jquery中map函数与each函数的区别实例介绍


Posted in Javascript onJune 23, 2014

​jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的。

​其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组。而map方法会返回一个新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。

​例如:

var items = [1,2,3,4]; 
$.each(items, function() { 
alert('this is ' + this); 
}); 
var newItems = $.map(items, function(i) { 
return i + 1; 
}); 
// newItems is [2,3,4,5]

​使用each时,改变的还是原来的items数组,而使用map时,不改变items,只是新建一个新的数组。

​例如:

var items = [0,1,2,3,4,5,6,7,8,9]; 
var itemsLessThanEqualFive = $.map(items, function(i) { 
// removes all items > 5 
if (i > 5) 
return null; 
return i; 
}); 
// itemsLessThanEqualFive = [0,1,2,3,4,5]

当需要对数组进行删除时也是如此,所以删除时错误使用each或map后果还是蛮严重的。

Javascript 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 #Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 #Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 #Javascript
yepnope.js使用详解及示例分享
Jun 23 #Javascript
js的延迟执行问题分析
Jun 23 #Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 #Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 #Javascript
You might like
做一个有下拉功能的留言版
2006/10/09 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
动态添加js事件实现代码
2009/03/12 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
Javascript中replace()小结
2015/09/30 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
详解React中setState回调函数
2018/06/14 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
深入浅析Python字符编码
2015/11/12 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python实现网页自动签到功能
2019/01/21 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
财务科科长岗位职责
2014/03/10 职场文书
班长竞选演讲稿
2014/04/24 职场文书
2014年人事科工作总结
2014/11/19 职场文书