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 相关文章推荐
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
vue中监听返回键问题
Aug 28 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 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
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
实例浅析js的this
2016/12/11 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
js 作用域和变量详解
2017/02/16 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python实现画图工具
2020/08/27 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
公司离职证明范本
2014/01/13 职场文书
大四自我鉴定
2014/02/08 职场文书
感恩之星事迹材料
2014/05/03 职场文书
廉政承诺书
2015/01/19 职场文书
行政助理岗位职责
2015/02/10 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
护理专业自荐信范文
2015/03/06 职场文书
四风之害观后感
2015/06/09 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Python数据结构之队列详解
2022/03/21 Python