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格式数据的添加,删除及排序方法
Jan 21 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php处理带有中文URL的方法
2016/07/11 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
Vuex简单入门
2017/04/19 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
Vue header组件开发详解
2018/01/26 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
js实现3D旋转相册
2020/08/02 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
跟老齐学Python之数据类型总结
2014/09/24 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python中new方法的详解
2019/01/15 Python
python生成大写32位uuid代码
2020/03/03 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
会计自我鉴定范文
2013/10/06 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
小学语文教学反思
2014/02/10 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS