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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 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中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
js数组的操作详解
2013/03/27 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
Python作用域用法实例详解
2016/03/15 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python中pip的安装与使用教程
2018/08/10 Python
python实现连续图文识别
2018/12/18 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
张丽莉观后感
2015/06/16 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
怎么用Python识别手势数字
2021/06/07 Python
vue实现滑动解锁功能
2022/03/03 Vue.js
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android