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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
jQuery参数列表集合
Apr 06 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
javascript实现评分功能
Jun 24 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
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
2006/10/09 PHP
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php浏览历史记录的方法
2015/03/10 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vue中如何使用ztree
2018/02/06 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
python中类的一些方法分析
2014/09/25 Python
python 生成器协程运算实例
2017/09/04 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
我未来的职业规划范文
2014/01/11 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
三万活动总结
2014/04/28 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
培根随笔读书笔记
2015/07/01 职场文书
开学典礼校长致辞
2015/07/29 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
MySQL创建管理子分区
2022/04/13 MySQL