JavaScript中的数组特性介绍


Posted in Javascript onDecember 30, 2014

与Java语言不同,JavaScript中的数组拥有三个特性:

 

1.无类型。数组的成员可以是任何类型,同一个数组也可以由很多不同类型的成员所组成。
2.长度可变。数组的长度是可以动态变化的,因此在JavaScript中不存在数组访问的越界问题。
3.不连续性。数组中成员的位置可以是连续的(0, 1, 2, 3…),也可以是不连续的。任何数组都有一个名为length的属性,在数组成员连续的情况下,length值与数组成员数目一致;当数组成员不连续时,length值要大于数组成员的数目。与连续的数组相比,不连续数组的读写性能要差一些。

 

实验:

var o = [42, "Sample Text", {x:88}];//JavaScript array is un-typed.

console.log(o);//[42, "Sample Text", Object {x=88}]

o[3] = 27;//JavaScript array is dynamic.

console.log(o);//[42, "Sample Text", Object {x=88}, 27]

o[5] = 99;//JavaScript array is sparse.

console.log(o);//[42, "Sample Text", Object {x=88}, 27, undefined, 99]

从上面的例子中可以看到,对于不连续的数组,当访问到缺失的那个成员时,JavaScript将返回undefined。如果数组连续,但是其中某个成员为undefined,那么访问数组的结果是一样的:

var a = [42, "Sample Text", {x:88}, 27, undefined, 99];

console.log(a);//[42, "Sample Text", Object {x=88}, 27, undefined, 99]

数组不连续、有成员缺失,跟数组连续、但有成员为undefined,这两种情况下访问数组内容所得到的结果是一样的。但在这两者之间还是存在一些细微的差别,主要表现在对数组key的访问上:

console.log(4 in o);//false

console.log(4 in a);//true

可以看到,这两种情况下虽然访问内容所得到的结果一致,但是其内部机制是完全不同的:在数组不连续的情况下,某个成员缺失,因此当访问该成员时,JavaScript返回了undefined;在数组连续的情况下,所有的成员都存在,只是某些成员的值比较特殊,为undefined而已。

从上面的例子中也可以看到,JavaScript中的数组究其本质只是以数字为key的对象而已,与普通的键值对对象没有任何差别。事实上,在对数组进行读取和写入操作时,JavaScript会试图将参数转换为正整数,如果转换成功则将进行数组操作(自动更新数组的length属性),如果失败则将参数转换成字符串后进行普通对象的读写操作。当然,在JavaScrpt解释器的实现中,针对数组的这种以数字作为key的特性作了很多性能优化,因此在实际使用过程中,如果对象的key都是数字,那么直接使用数组对象会得到更加高效的结果。

在对数组进行定义的过程中,JavaScript允许出现多余的逗号,也允许两个逗号间出现数组成员的缺失:

var x = [1,2,3,];//trailing comma will be omitted.

console.log(x.length);//3

         

var y = [1,,3];//member can be missed.

console.log(y);//[1, undefined, 3]

console.log(1 in y);//false

console.log(y.length);//3

对于数组的创建,JavaScript支持四种方法:

1.使用字面量(如上述几个例子中的中括号表达式)来直接创建数组对象。
2.使用Array()构造函数,不传入任何参数。在这种情况下,将创建一个空数组,其效果与[]等同。
3.使用Array()构造函数,传入一个正整数作为数组的长度。在这种情况下,JavaScript将预留相应的内存空间来存储这个数组。值得注意的是,此时数组的key都是没有被定义的,也即数组中没有任何成员。其效果与[,,,,]这样的写法等同
4.使用Array()构造函数,传入数组的成员。

实验:

var z = new Array(10);//pre-allocate memory, but no index is defined yet.

console.log(3 in z);//false
var m = new Array(42, 33, 99, "test", {k:99});

console.log(m);//[42, 33, 99, "test", Object {k=99}]

在ECMAScript 5标准中,可以用Array.isArray()来判断某个对象是否是数组:
Array.isArray([]);//true

Array.isArray({});//false
Javascript 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
ie focus bug 解决方法
Sep 03 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
JS功能代码集锦
May 04 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
angular4自定义组件详解
Sep 28 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 #Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 #Javascript
JavaScript中的数组操作介绍
Dec 30 #Javascript
jQuery中:first选择器用法实例
Dec 30 #Javascript
JavaScript中的类数组对象介绍
Dec 30 #Javascript
JavaScript中的方法调用详细介绍
Dec 30 #Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 #Javascript
You might like
php基础知识:类与对象(5) static
2006/12/13 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php中session与cookie的比较
2015/01/27 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
json 定义
2008/06/10 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
事件绑定之小测试  onclick && addEventListener
2011/07/31 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
Python日期的加减等操作的示例
2017/08/15 Python
python实现简单遗传算法
2018/03/19 Python
python如何实现异步调用函数执行
2019/07/08 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
Shell如何接收变量输入
2016/08/06 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
优秀党员事迹材料
2014/12/18 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
浅析JavaScript中的变量提升
2022/06/01 Javascript