javascript稀疏数组(sparse array)和密集数组用法分析


Posted in Javascript onDecember 28, 2016

本文实例讲述了javascript稀疏数组(sparse array)和密集数组用法。分享给大家供大家参考,具体如下:

学习underscore.js数组相关API的时候,遇到了sparse array这个东西,以前没有接触过。

这里学习下什么是稀疏数组和密集数组。

什么是密集数组呢?在Java和C语言中,数组是一片连续的存储空间,有着固定的长度。加入数组其实位置是address,长度为n,那么占用的存储空间是address[0],address[1],address[2].......address[n-1]。即数组元素之间是紧密相连的,不存在空隙。如下的js代码创建的就是一个密集数组

var data = [3,1,6,9,2];

什么是稀疏数组呢?与密集数组相反,javascript并不强制要求数组元素是紧密相连的,即允许间隙的存在。如下的js代码是合法的:

var sparse = new Array();
sparse[0] = 0;
sparse[3] = 3;
alert(sparse[0]);//输出0
alert(sparse[1]);//输出undefined

1、创建稀疏数组

如下代码创建了一个固定长度的稀疏数组

var a = new Array(3);
a[2] = 1;
alert(a[0]);//undefined
alert(a[2]);//1

说白了js中建立稀疏数组很容易,只要你故意让数组元素之间存在间隙即可。如

var arr = [];
arr[0] = 0;
arr[200] = 200;

2、创建密集数组

可以看到js中的数组一般都是稀疏的,一般来说稀疏数组的遍历比较麻烦。

var dense = Array.apply(null, Array(3));

这行代码等同于var  dense = Array(undefined, undefined, undefined) ;呵呵是不是觉得很奇怪,这种方式跟稀疏数组没有什么差别。看代码:

//稀疏数组
var array = new Array(3);
array[2] = "name";
for(var a in array)
{
  console.log("index=" + a + ",value=" + array[a]);
}
// 密集数组
var dense = Array.apply(null, Array(3));
dense[2] = "name";
for(var a in dense)
{
  console.log("index=" + a + ",value=" + dense[a]);
}

用F12观察控制台输出结果是:

javascript稀疏数组(sparse array)和密集数组用法分析

可以看到确实是有差别的:稀疏数组只遍历了一次(因为只有一个元素),密集数组遍历了3次。

3、总结

JavaScript中的数组并不像我们在C或java等语言中遇到的常规数组,在js中数组并不是起始地址+长度构成的一片连续的地址空间。

javascript中数组其实就是个对象,只不过会自动管理一些"数字"属性和length属性罢了。

说的更直接一点,JavaScript中的数组根本没有索引,因为索引应该是数字,而JavaScript中数组的索引其实是字符串。

arr[1]其实就是arr["1"],给arr["1000"] = 1,arr.length也会自动变为1001。

这些表现的根本原因就是:JavaScript中的对象就是字符串到任意值的键值对。

虽然稀疏数组和密集数组差别不大,javascript也没有语法强制数组是稀疏的还是密集的,这不过是概念上的区分。

最佳实践是:就把js数组当成是java或C中的数组,由我们程序员来负责让js的数组元素是连续的。

var array = [1,2,3,4];

如:

var array = new Array();array[0]=0;array[1]=1;

这样创建的js数组,就符合我们熟悉的数组了。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
Angular模板表单校验方法详解
Aug 11 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 #Javascript
AngularJS实现网站换肤实例
Feb 19 #Javascript
详解js树形控件—zTree使用总结
Dec 28 #Javascript
js 轮播效果实例分享
Dec 28 #Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 #Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 #Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 #Javascript
You might like
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
python从入门到精通(DAY 3)
2015/12/20 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Python selenium的基本使用方法分析
2019/12/21 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
模具设计与制造专业推荐信
2014/02/16 职场文书
英文求职信写作小建议
2014/02/16 职场文书
体育教师求职信
2014/05/24 职场文书
婚内房产协议书范本
2014/10/02 职场文书
实习介绍信模板
2015/01/30 职场文书
思想工作总结范文
2015/08/12 职场文书
学习计划是什么
2019/04/30 职场文书