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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
使用svg实现动态时钟效果
Jul 17 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
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
详解在Python中处理异常的教程
2015/05/24 Python
Python中的id()函数指的什么
2017/10/17 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python3处理含有中文的url方法
2018/05/10 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Django models.py应用实现过程详解
2019/07/29 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
2014年党支部学习材料
2014/05/19 职场文书
银行培训心得体会范文
2016/01/09 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
delete in子查询不走索引问题分析
2022/07/07 MySQL