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判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
一段多浏览器的"复制到剪贴板"javascript代码
2007/03/27 Javascript
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Vue实现验证码功能
2019/12/03 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python 读写文件的操作代码
2018/09/20 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
戴尔美国官网:Dell
2016/08/31 全球购物
2014年大学生就业规划书
2014/04/04 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
python 实现的截屏工具
2021/05/08 Python
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript