javascript object array方法使用详解


Posted in Javascript onDecember 03, 2012

Array.prototype.push
push向数组尾部添加一项并更新length ,返回数组长度。
如果Object使用push会怎样?
看下面代码, obj好像数组一样工作了。length会自动更新。

var push = Array.prototype.push; 
var obj = {}; 
push.call(obj, "hello"); // 返回值 1 
// obj {"0":"hello", length:0} 
push.call(obj, "world"); // 返回值 2 
// obj {"0":"hello", "1":"world",length:2}

Array.prototype.length Array.prototype.splice
把length和splice 给Object
看下面代码:obj这货居然变成数组了?其实不然这可能是调试工具的一些输出检查问题。
我们用 instanceof 测试 obj instanceof Array //false
var obj = { length:0, splice:Array.prototype.splice};console.log( obj ); // 打印:[]

继续看下面的代码
obj.push(0)//返回obj.length
1obj.push(1)//返回obj.length
2obj.splice(0, 1);//删除第一项 返回删除项
[0]obj.length // 1 splice删除一项的时候同样更新 length属性
这样obj的表现几乎和array一样了。不出意外slice,pop,shift,unshift什么的都可以正常工作在object中。
不过如果直接设置length,在数组中会删除大于length的下表的项, 但里的obj并不不会更新。

应用在哪?
jQuery对象表现像一个array,其实他是一个对象。这种对象如何new出来呢?
实际jQuery把Array的方法借给Object,从而达到这个jQuery对象的效果,jQuery对象内部也直接使用push等Array的方法。
看看jQuery的部分源码 (注意加粗)

// Start with an empty selector 
selector: "", 
// The current version of jQuery being used 
jquery: "1.7.1", 
// The default length of a jQuery object is 0 
length: 0, 
...... 
// For internal use only. 
// Behaves like an Array's method, not like a jQuery method. 
push: push, 
sort: [].sort, 
splice: [].splice

如果你要把Object玩成Array,那么可能潜在的问题length属性不会和“数组”项总和对应起来。
所以直接使用length设置长度不会得到支持。

看下面jquery代码,虽然length更新了,jquery的对象并没更新。(当然这并不是jquery的问题)
var jq = $('div') //假设我们在页面获取了40个
divjq.length // 40
jq.length = 0;jq// ? jq中仍然存放了40个dom对象 length属性不会和“数组”项总和对应起来。
Object使用array的方法还能正常工作,实在有些意想不到,可能实际应用远不止这些。

Javascript 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 #Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 #Javascript
js+JQuery返回顶部功能如何实现
Dec 03 #Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
script标签属性type与language使用选择
Dec 02 #Javascript
You might like
基于php伪静态的实现详细介绍
2013/04/28 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
初中班主任寄语
2014/04/04 职场文书
个人自荐材料
2014/05/23 职场文书
呐喊读书笔记
2015/06/30 职场文书
创业计划书之农家乐
2019/10/09 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python