Javascript数组中push方法用法分析


Posted in Javascript onOctober 31, 2016

本文实例讲述了Javascript数组中push方法用法。分享给大家供大家参考,具体如下:

看下面代码:

var o = {
  1:'a'
  ,2:'b'
  ,length:2
  ,push:Array.prototype.push
};
o.push('c');

Q:o现在内部的值是什么样子?

我的第一反应是排斥,为什么要研究不合理情况下【解释引擎】的行为?但是这种推论有时候又很吸引人,于是我回来的时候仔细思考了下,发现其实很简单。

对于push这个方法,我条件反射地想到的就是栈,【数据结构的经典栈】中压栈和弹栈操作依据的都是栈顶指针,栈顶指针始终指向栈顶,意味着它会因为压弹栈而自动增减。在javascript中的数组中这个指针就是length。所以在上面的代码中,o.push('c')就是o.2 = 'c'(当然o.2不能直接访问,这只是伪代码),所以代码执行完o中数据如下:

{
  1:'a'
  ,2:'c'
  ,length:3 //push操作=>length+1
  ,push:Array.prototype.push
}

补充说明:

JavaScript中,万物皆对象,而javascript的对象与强类型的对象有一些不同的地方,可以理解成就是一组键值对的集合。其array类型也不例外,它的下标访问就是键访问(不过它的键都是自然数),在上面的例子中赋值给a的对象字面量实际模拟了一个数组(一个下标从1开始的数组)——当然只有部分数组的特性,比如真实的数组在进行键访问的时候,会根据length进行越界检查。

只要知道push的位置依据的是length就可以了,下面种种看似奇怪的现象都好理解:

//1.length不存在,引擎置为0
var o = {
  '1':'a'
  ,'2':'b'
  ,push:Array.prototype.push
};
o.push('c');//c {0:'c',1:'a',2:'b',...}
//2.length为负值,这是个有趣的问题,涉及到原码反码和补码【1】
var o = {
  '1':'a'
  ,'2':'b'
  ,length:-1
  ,push:Array.prototype.push
};
o.push('c');//c {1:'a',2:'b',4294967295:'c',length:4294967296,...}
//3.length为字符或对象
var o = {
  1:'a'
  ,2:'b'
  ,length:'A'
  ,push:Array.prototype.push
};
o.push('c');//c {0:'c',1:'a',2:'b',length:1,...}我还以为js解释器会把A转换成ASCII码来给length赋值呢,终于看到了javascript的自由还是有节操的

计算机中数值都是以补码方式存储的,为了方便运算,-1的补码与4294967295补码一样,根据length的语义,此处是无符号数

[-1]补 = 1111 1111 1111 1111 1111 1111 1111 1111 =  [4294967295]补  = 1111 1111 1111 1111 1111 1111 1111 1111

所以这样我们接差对2中的o压入一个对象,key取的是4294967296,但是数组的最大长度限制为4294967296,也就是说下标只能取到4294967295,只会取到32位——对于4294967296 = 1 0000 0000 0000 0000 0000 0000 0000 0000 取后32位,就变成了0,所以此次push的位置是0。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
JavaScript中的await/async的作用和用法
Oct 31 #Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 #Javascript
微信小程序 开发工具快捷键整理
Oct 31 #Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 #Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 #Javascript
jQuery绑定事件的四种方式介绍
Oct 31 #Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 #Javascript
You might like
destoon官方标签大全
2014/06/20 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php实现微信公众号无限群发
2015/10/11 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python设计模式之中介模式简单示例
2018/01/09 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
项目合作意向书范本
2014/04/01 职场文书
一年级学生评语大全
2014/04/21 职场文书
保密工作承诺书
2014/08/29 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
施工现场安全管理制度
2015/08/05 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
Python中super().__init__()测试以及理解
2021/12/06 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers