浅谈Javascript数组索引


Posted in Javascript onJuly 29, 2015

从题目说起,之所以是不完全,是因为有些东西比如数组的方法怎么用这个我都不打算讲,因为那个看一下都会,下面讲的都是我觉得重要的,只关于数组对象本身。另外,由于我的Javascript实战经验不多,所以可能有些东西没涉及到,有些内容说的有误,请发现问题的同学不吝指教。

首先,Javascript(下称js)的数组定义,这不是重点,简单说下,下面两句都是创建一个空的数组:

var arr = [];
  var arr2 = new Array(); // 不写new也可以。

在创建之后,你就可以随时往数组里添加元素。数组的大小是不固定的,可以像a[0] = 1这样随意添加。

然后到重点了,关于往数组里添加元素这件事。首先,你要知道数组是一个对象,而对象是一个键值对的集合(类似于java里面的map,python里面的dict,c#里面的Dictionary),对象可以有属性,对象的函数叫方法,对象的属性或方法可以使用方括号或点号的方式访问,其中使用方括号引用要加引号,点号的使用只有在属性名称是一个合法的变量名称的时候才可以使用,也就是属性不包含任何空格连字符并且不以数字开头时才可以,看个例子:

var person = {};
  person.age = 22;
  person.sayhi = function(){console.log('hi');};

  person.age; // 22
  person['age']; // 22

  person.sayhi(); // hi
  person['sayhi'](); // hi

嗯,这就是对象,好像也没什么特别的(除了用方括号取值外),不过对象说些就够了,后面开始说数组。

对于上面的这些,数组全可以做到,也就是说,下面这段代码也可以正常运行(只有第一行跟上面的不一样):

var person = [];
  person.age = 22;
  person.sayhi = function(){console.log('hi');};

  person.age; // 22
  person['age']; // 22

  person.sayhi(); // hi
  person['sayhi'](); // hi

因为数组就是对象,这里不要把方括号的字符串索引和通常讲的数字索引弄混了,还没开始说(马上说)数字索引呢。

和普通的对象不同,数组对象的元素有数字索引,或者说特殊的键(前面说了对象是键值对),这和我们在其他语言比如java、c#等语言中的见到的数组是一样的。在js中,这个键有一些特殊的要求,它可以是数字,也可以是能转换成数字的字符串,而合理的数字,需要是范围在0到4294967295(2^32-1)的整数(事实上,这个索引在词法分析的时候都是当做字符串的,js把这个字符串转换成32位的整数,然后再把32位的整数转换成字符串跟原字符串比较,如果相同的话,则说明这个索引值是合法的数字,否则就是一个普通的字符串键)。简单举个例子:

a = [1, 3, 5, 7];
  console.log(a[0]); // 1
  console.log(a['0']); // 1

  a['2'] = 12;
  console.log(a[2]); // 12

上面的代码都是可以在浏览器里运行的,注释是输出值。这和我们在其他语言中见到的数组好像没啥区别。这个a['2'] = 12;因为'2'被转换成整数再转换成字符串还是'2',所以跟a[2]一样。不过其他语言里,我们使用数组都是定义一个固定大小数组的对不对?这里好像不是哈,而且这里还说了数组的索引范围。所以,为什么?简单点回答就是这里的数组是对象,是js中的对象。这一点和其他语言(python等函数式的除外)不同,具体哪里不同,我没深入研究,也说不太清楚,我理解的是,c/java等语言定义数组的时候,是在内存中划分了一块固定大小的区域,有一个指针存储着这块区域的首地址。而js中好像不是这样的,就像前面说的一样,数组是对象,键值对结构,所以我觉得js中的数组都是用hash的方式存储元素的,元素之间的内存不一定是连续的。不过我现在没找到查看js变量内存地址的方法,所以没法确定这件事。不过这不是本文要讲的重点。

我们把重点放到索引上,前面说了索引的范围,不过有同学可能试了,就是a[-1] = 2;或是a[4294967296] = 10;这种语句也没有问题。对的,这并不是错误,这是正常的语句,当然不会有问题。但是问题是前面不是说了索引必须是0到4294967295的整数么?对,是的,这也没错。那疑问出在哪里呢?

先贴两张firefox控制台的截图:

浅谈Javascript数组索引
浅谈Javascript数组索引

你有没有发现什么问题呢?当我们使用正常的索引添加元素,在打印数组的时候,添加的元素会被打印出来,而使用非正常的“索引”添加元素时,打印的数组里面却没有添加的元素,但是你看右侧的Array对象,所有添加的元素却一个不少。再看一张图,这次多添加几个元素,再给数组添加一个属性(注意看右侧Array对象的元素索引):

浅谈Javascript数组索引

不知道你有没有发现。在右侧,上面几个是数字索引,打印数组的时候能被打印的,而下面几个是属性,打印数组不会打印属性!也就是说,a[-2] = 2;这种语句,这个-2是属性的键,而不是特殊的数字索引的键,-2在被强制转换成正整数的时候,被认为是一个字符串,所以这个-2和4294967296和'name'一样,都是数组的一个属性的键!所以前面说的负索引或是超出范围的索引(应该说是属性的键)都是合法的,它们都是普通的字符串键。

这里一个问题,就是既然说-2这种键是普通的属性键,那有人可能会说为什么使用a.-2或是a.'-2'访问-2这个键的值会报错,而a[-2]就不会报错?对呀,为什么?前面在讲对象的时候,有一句加粗的话:对象的属性或方法可以使用方括号或点号的方式访问,其中使用方括号引用要加引号,点号的使用只有在属性名称是一个合法的变量名称的时候才可以使用,也就是属性不包含任何空格连字符并且不以数字开头时才可以。所以,-2这种键的属性,是不能用点号的方式访问的!

另外还有一个小问题,就是方括号,当我们想访问数组的name属性的时候,需要这样:a['name'],也就是name被引号包起来了,而-2是和name一样的属性的键,为何-2可以不用(也可以用)引号包起来?其实,方括号内的所有字符会被当成一个表达式,单纯的一个数字-2,是个合法的表达式,但name如果没有被定义成变量名,name就不是合法的表达式,同样x^b&c这种也不是合法的,因为它会被当成变量x、b、c组成的某种表达式,但是x、b、c是不是变量还不确定,而且里面的符号不一定是被js所支持的,所以a[name]的问题出在name上,而不是[]上。如果还不好理解,你可以把name想象成x+y,在x、y没有被定义成变量的时候,x+y这个表达式肯定有问题对不对?那a[x+y]也会有问题对不对?而a['x+y']就没有问题,因为'x+y'是个字符串。

后面补充一点,js中,变量名字是可以由数字、字母、下划线任意组合的,其中数字不能放在开始位置。而对象的属性键的命名要宽松一些,合法的可以不用引号,不合法的用引号包起来就可以。

好了,说的差不多了,总结一下:文章首先简单介绍了下对象,然后说了数组也是对象,最后解释了下一些疑问,然后总结。

写这篇文章的原因是我昨天在微博里看了一条js的教程,对数组的讲解产生了一个疑问,然后评论的字数超出了140,所以我就查资料单独写出来了。目的是让自己弄明白,也愿能帮助到学js的同学。数组范围和索引转换那里是参考的《Speaking Javascript》,其他地方都是自己的理解和看法。

最后,感谢观看,因为是分两次写的,可能语句有些乱,有的地方不乱但是上下文也完整,有的上下文完整但是废话太多,总之,就这样吧。下篇见。

Javascript 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
javascript 常见功能汇总
Jun 11 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
JavaScript中使用Async实现异步控制
Aug 15 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
vue+element实现打印页面功能
May 20 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 #Javascript
JavaScript中几种排序算法的简单实现
Jul 29 #Javascript
详解JavaScript中数组的相关知识
Jul 29 #Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 #Javascript
js实现登陆遮罩效果的方法
Jul 28 #Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 #Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 #Javascript
You might like
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Tensorflow 多线程设置方式
2020/02/06 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
护理个人求职信范文
2014/01/08 职场文书
推广普通话标语
2014/06/27 职场文书
求职自荐信怎么写
2015/03/04 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA