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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
Vue如何实现验证码输入交互
Dec 07 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
详解python while 函数及while和for的区别
2018/09/07 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python实现双人五子棋(终端版)
2020/12/30 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
升职自荐信范文
2013/10/05 职场文书
毕业生的自我鉴定
2013/10/29 职场文书
机电一体化毕业生求职信
2013/11/02 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
安卓程序员求职信
2014/02/28 职场文书
年终奖发放方案
2014/06/02 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
雷锋观后感
2015/06/10 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
Python保存并浏览用户的历史记录
2022/04/29 Python