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 高级语法介绍
Jun 15 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 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根据身份证号码计算年龄的实例代码
2014/01/18 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python实现控制台打印的方法
2019/01/12 Python
python binascii 进制转换实例
2019/06/12 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
护士专业推荐信
2013/11/02 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
超市国庆节促销方案
2014/02/20 职场文书
大学新生军训感言
2014/02/25 职场文书
新年晚会开场白
2015/05/29 职场文书
房屋产权证明书
2015/06/19 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
《藏戏》教学反思
2016/02/23 职场文书
创业计划书之校园超市
2019/09/12 职场文书