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 的Document属性和方法集合
Jan 25 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
JavaScript中string对象
2015/06/12 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python 字符串池化的前提
2020/07/03 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
大学在校生求职信范文
2013/11/21 职场文书
医院合作协议书
2014/08/19 职场文书
大学生简短的自我评价
2014/09/12 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
一年级小学生评语大全
2014/12/25 职场文书
Redis性能监控的实现
2021/07/09 Redis
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers