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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
PHP Class&Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
让python json encode datetime类型
2010/12/28 Python
基于python实现微信模板消息
2015/12/21 Python
详解python中的文件与目录操作
2017/07/11 Python
Python退火算法在高次方程的应用
2018/07/26 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
人事助理自荐信
2014/02/02 职场文书
个人安全生产承诺书
2014/05/22 职场文书
放弃继承权公证书
2015/01/23 职场文书
超市员工管理制度
2015/08/06 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android