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 相关文章推荐
jQuery get和post 方法传值注意事项
Nov 03 Javascript
javascript 日期常用的方法
Nov 11 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
让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 VS ASP
2006/10/09 PHP
同时提取多条新闻中的文本一例
2006/10/09 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python性能优化技巧
2015/03/09 Python
python动态加载包的方法小结
2016/04/18 Python
python安装numpy&安装matplotlib& scipy的教程
2017/11/02 Python
详解django2中关于时间处理策略
2019/03/06 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
python3的pip路径在哪
2020/06/23 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
超市业务员岗位职责
2013/12/05 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
家长建议怎么写
2014/05/15 职场文书
离婚协议书标准格式
2014/10/04 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python