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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
一个可复用的vue分页组件
May 15 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
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 数组元素快速去重
2017/05/05 PHP
php工具型代码之印章抠图
2018/07/18 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
TCP/IP的分层模型
2013/10/27 面试题
开朗女孩的自我评价
2014/02/10 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
学习党代会心得体会
2014/09/05 职场文书
践行三严三实心得体会
2014/10/13 职场文书
同学聚会邀请函
2015/01/30 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
Fluentd搭建日志收集服务
2022/09/23 Servers