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 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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中的流(streams)浅析
2015/07/02 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
React 实现拖拽功能的示例代码
2019/01/06 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
浅谈python之新式类
2018/08/12 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python后端接收前端回传的文件方法
2019/01/02 Python
用Python解决x的n次方问题
2019/02/08 Python
python多线程并发实例及其优化
2019/06/27 Python
通过实例解析Python return运行原理
2020/03/04 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
Julep官网:美容产品和指甲油
2017/02/25 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
医生自荐信
2013/10/11 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
初中家长寄语
2014/04/02 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
银行员工考核评语
2014/12/31 职场文书
python pyhs2 的安装操作
2021/04/07 Python
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android