解决js array的key不为数字时获取长度的问题
最近写js时碰到了当数组key不为数字时,获取数组的长度为0 的情况。
1、问题场景
var arr = new Array();
arr[‘s1‘] = 1001;
console.log(arr.length);
通过chrome查看:

2、原因分析
js Array只支持数字索引,若指定的key为非数字索引,那么length为0.
另外,若key为数字索引,length的长度是根据key值得出的,比如一个数组a中key最大值为1000,value为1000,那么a的长度就是1001.只有a[1000] = 1000.从a[0]到a[999]的值为undefined
可以来验证一下:
var arr = new Array();
arr[1000] = 1001;
console.log(arr.length);

3、解决长度问题
出现问题的原因已经知道了,有的时候我们需要设置的key不是数字索引,而是非数字索引,那么如何获取长度呢。我们可以把Array看成是特殊的Object类型。有两种方式可以得到Object类型的长度:
第一种方法:通过 Object.keys(obj).length 获取。
可以验证下:
var obj = new Object();
obj[1001] = 1001;
obj[1002] = 1002;
console.log(obj.length);
console.log(Object.keys(obj).length);

该方法获取长度是会获取到原型的属性的,如果一个对象继承了另一个对象,或者在原型中设置了属性,要想获取对象的本身的属性时,这个方法是不靠谱的。
因此,第二个方法就是过滤到原型的属性:
调用:var length = getPropertyCount(obj);
由于任何一个Object对象都有方法 hasOwnProperty,当属性为原型定义的属性,hasOwnProperty返回true。
function getPropertyCount(o){
var n, count = 0;
for(n in o){
if(o.hasOwnProperty(n)){
count++;
}
}
return count;
}
问题到这里应该可以解决了,现在想要获取一个数组的实际指定的长度,一般来说,我们不会为Array的原型添加额外的属性,所以,我们可以通过采用上面的第一种方式解决。
可以验证下:

题外话:
判断一个属性是否是共享属性,可以通过hasOwnProperty 及in 联合判断。
hasOwnProperty:当对象存在属性且属性不是共享的,返回true
in:当对象中存在属性,返回true.
因此,如判断person中是否存在私有属性属性a,person.hasOwnPropety(a) && a in person 需返回true
解决js array的key不为数字时获取长度的问题的更多相关文章
- JSON的key值为数字时如何使用
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript(Standard ECMA-262 ...
- js控制 input框中输入数字时,累计求和
$('.cc input').bind('input propertychange', function(){ var total = 0; $("input").each(fun ...
- js input框限制输入为数字并限制长度
<input type="number" name="price" id="priceVal" placeholder="请 ...
- js解析php返回的json数据无法获取length的问题分析
1.问题出现的过程,js解析php json_encode 的数据,无法获取长度信息,提示undefined debug: 首先打印查看了php encode后的数据,返现最外层是一个 ...
- 一行代码解决JS数字大于2^53精度错误的问题
服务端使用长整型(Int64)的数字,在浏览器端使用JS的number类型接收时,当这个实际值超过 (2^53-1)时,JS变量的值和实际值就会出现不相等的问题.常见场景比如使用雪花算法生成Id. 在 ...
- js:Array对象常用方法介绍
前言 在js中,数组作为一个特殊的对象.是我们常用的数据格式.今天就来梳理一下常用的数组方法. 1.基础 几种基础的就简单介绍一下:创建数组 var arr1 = new Array(); //括号可 ...
- 【转】js 中导出excel 较长数字串会变为科学计数法
[转]js 中导出excel 较长数字串会变成科学计数法 在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串 ...
- Gson如何解析key值是数字的json数据
1.使用注解@SerializedName来解决这个问题 2.比如有如下json数据:(key值是数字"1112") { "1112": "抖音&qu ...
- js Array操作
JS中数组的操作 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长 ...
随机推荐
- SpringMVC的问题No mapping found for HTTP request with URI
做了一个屏蔽进数据库的操作: Applicaition.xml配置: <?xml version="1.0" encoding="UTF-8"?> ...
- javascript总结25:Array的5中迭代方法: every(), filter() , forEach() map() some()
1 Array常用的操作方法: 1 操作方法 - concat() //把参数拼接到当前数组 -slice() //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开 ...
- 团体程序设计天梯赛L1-022 奇偶分家 2017-03-22 17:48 81人阅读 评论(0) 收藏
L1-022. 奇偶分家 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定N个正整数,请统计奇数和偶数各有多少个? 输入格式 ...
- 如何在github上上传readme文件
首先打开记事本写好文字 然后保存为readme.md文件 打开github网页,登录自己的账号,选择右上角new repository 填写信息,勾选选项如下 创建好之后,选择upload files ...
- ajax 解析
1.通过适当的Ajax应用达到更好的用户体验; 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二 ...
- 解决Struts2拦截器的对于参数传递无效问题
今天做项目时,使用拦截器对用户权限检查.拦截器本身没有问题,可是实现权限拦截,但是传递的参数全部都无效了.搞了很久,由于对拦截器的内部机制不是特别熟悉,所以重新研读了一下Struts2的拦截器.找到了 ...
- RobotFramework中查询数据库相关
先要安装:robotframework-databaselibrary,并导入RIDE 封装“连接数据库”关键字,内容如下: 断开数据库:Disconnect From Database,没有参数 一 ...
- Asp.Net Core下的两种路由配置方式
与Asp.Net Mvc创建区域的时候会自动为你创建区域路由方式不同的是,Asp.Net Core下需要自己手动做一些配置,但更灵活了. 我们先创建一个区域,如下图 然后我们启动访问/Manage/H ...
- EasyFastCMS系列教学课程——1、三层框架的搭建
在本系列教程中,我们以一个大型CMS系统的完整开发流程为例,和大家一起探讨net开发的经验和教训.在本程序中,我们采用了流行的三层/N层框架+仓储模式的架构模式.项目分层示意图: 各层的主要用 ...
- Flex + Bison: Scanning from memory buffer
Found from StackOverflow: ========================================================================== ...