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弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
javascript实现yield的方法
Nov 06 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
js制作支付倒计时页面
Oct 21 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
JS正则表达式验证密码强度
Mar 18 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的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php获得url参数中具有&的值的方法
2014/03/05 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
学习ExtJS Column布局
2009/10/08 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
python实现定时提取实时日志程序
2018/06/22 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
请假条怎么写
2014/04/10 职场文书
二年级学生评语大全
2014/04/23 职场文书
大学生就业自荐书
2014/06/16 职场文书
投标授权委托书范文
2014/08/02 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android