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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
微信小程序 select 下拉框组件功能
Sep 09 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
mysq GBKl乱码
2006/11/28 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
javascript实现轮显新闻标题链接
2007/08/13 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
python多重继承实例
2014/10/11 Python
Python计算程序运行时间的方法
2014/12/13 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
快速查询Python文档方法分享
2017/12/27 Python
Python socket实现简单聊天室
2018/04/01 Python
wxPython的安装与使用教程
2018/08/31 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
搞笑婚礼主持词
2014/03/13 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
社区两委对照检查材料
2014/08/23 职场文书
公司管理建议书
2015/09/14 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
Python中字符串对象语法分享
2022/02/24 Python