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 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
JS实现横向轮播图(中级版)
Jan 18 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获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
python plotly画柱状图代码实例
2019/12/13 Python
python进行参数传递的方法
2020/05/12 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
linux系统都有哪些运行级别
2012/04/15 面试题
四个太阳教学反思
2014/02/01 职场文书
门前三包责任书
2014/04/15 职场文书
任命书格式
2014/06/05 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
公司周年庆典标语
2014/10/07 职场文书
律师授权委托书范本
2014/10/07 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
SpringBoot生成License的实现示例
2021/06/16 Java/Android
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL