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表格翻页效果实现思路及代码
Aug 23 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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采集时被封ip的解决方法
2010/08/29 PHP
php中session使用示例
2014/03/29 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
Angular.js实现动态加载组件详解
2017/05/28 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Python实现二叉堆
2016/02/03 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
学生宿舍管理制度
2014/01/30 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
退学证明范本3篇
2014/10/29 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
辞职信如何写
2015/02/27 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS