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 相关文章推荐
JSON无限折叠菜单编写实例
Dec 16 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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入门速成教程
2007/03/19 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
开启PHP的伪静态模式
2015/12/31 PHP
关于php中一些字符串总结
2016/05/05 PHP
关于php开启错误提示的总结
2019/09/24 PHP
js去除空格的12种实用方法
2013/11/08 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
师范生个人推荐信
2013/11/29 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
班级学习计划书
2014/04/27 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript