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 .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
js实现简单的点名器随机色实例代码
Sep 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 array的学习笔记
2012/05/10 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
深入理解redux之compose的具体应用
2020/01/12 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
Python实现截屏的函数
2015/07/26 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python3 map函数和filter函数详解
2019/08/26 Python
python生成器推导式用法简单示例
2019/10/08 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
python标准库OS模块详解
2020/03/10 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
销售行政专员职责
2014/01/03 职场文书
教师研修随笔感言
2014/01/23 职场文书
公司费用报销管理制度
2015/08/04 职场文书
基于python实现银行管理系统
2021/04/20 Python
小程序实现筛子抽奖
2021/05/26 Javascript
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server