JS数组索引检测中的数据类型问题详解


Posted in Javascript onJanuary 11, 2021

之前在写微信小程序项目时,里面有一个“城市选择”的功能,笔者用的是 <picker-view> 组件,这个组件比较特别,因为它的 value 属性规定是 数组 格式的。比如: value="[1]"

因为当时对JS变量类型转换的不了解,笔者在代码中写下了这样的几行判断:(这是严谨的)

let val_one=typeof this.data.pIndex=="number"?[this.daya.pIndex]:this.data.pIndex

(:项目中存取元素是动态的!

上面这是因为要使下标动态跟随用户选择,并反馈到wxml里的 value 属性上展示。

但是在这之前还需要做一层判断 —— 因为有的地区是省级市或者直辖市,而且要防止用户“骚操作”,比如一直上拉或者猛的拉出去,这时候再微信小程序中是会报错找不到对应数据的:

let length=placeArray[val_one].sub.length
if(val[0]>=length){
 val=[length-1]
}else if(val[0]<0){
 val=[0]
}

之后我再回过头优化这个项目代码时发现这里(强制使用时将数组转为数字,反馈时将数字转为数组)其实大可不必:

JS数组索引检测中的数据类型问题详解

JavaScript似乎对数据有自己“独特”的处理方式,但是目前笔者还没找到相关资料~~

如何判断一个值能不能作为数组下标(索引)

但是可以肯定的是:为整数属性键赋值是数组才有的特例,因为它们与非整数键的处理方式不同。要判断一个属性是否能作为数组的索引,笔者找到了ES6规范文档中的一段话:

当前仅当 ToString(ToUint32(P)) 等于P,并且 ToUint32(P) 不等于 2^32-1 时,字符串属性名称P才是一个数组索引。

这个操作用JS可以这样实现:

function toUint32(value){
	return Math.floor(Math.abs(Number(value))) % Math.pow(2,32);
}
function isArrayIndex(key){
	let numericKey=toUint32(key);
	return String(numericKey) == key && numericKey < (Math.pow(2,32)-1);
}

toUint32() 函数通过规范中描述的算法将给定的值转换为无符号32位整数;isArrayIndex() 函数中先将键转换为uint32结构,然后进行两次比较(toString()后等不等于原数并且是否小于 2^32-1

有了这个基础,我们就可以基于此去简单模仿一下 new Array() 的行为 —— 其中最重要的还是关于length的描述:

JS数组索引检测中的数据类型问题详解

function createArray(length=0){
	return new Proxy({ length },{
		set(trapTarget,key,value){
			let currentLength=Reflect.get(trapTarget,"length");
			if(isArrayIndex(key)){
				let numericKey=Number(key);
				if(numericKey >= currentLength){
					Reflect.set(trapTarget,"length",numericKey+1);
				}
			}else if(key === "length"){
				if(value < currentLength){
					for(let index=currentLength-1;index >= value;index--){
						Reflect.deleteProperty(trapTarget,index);
					}
				}
			}
			// 无论key是什么类型都要执行这段代码
			return Reflect.set(trapTarget,key,value);
		}
	});
}

实验一下:

JS数组索引检测中的数据类型问题详解

总结

到此这篇关于JS数组索引检测中的数据类型问题详解的文章就介绍到这了,更多相关JS数组索引检测的数据类型内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
利用window.name实现windowStorage代码分享
Jan 02 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
理解Javascript的call、apply
Dec 16 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 #Javascript
js删除对象中的某一个字段的方法实现
Jan 11 #Javascript
jQuery实现购物车全功能
Jan 11 #jQuery
jQuery实现手风琴特效
Jan 11 #jQuery
iview实现动态表单和自定义验证时间段重叠
Jan 10 #Javascript
JavaScript canvas实现文字时钟
Jan 10 #Javascript
JS代码实现页面切换效果
Jan 10 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
详谈PHP编码转换问题
2015/07/28 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
js实现随机点名
2021/01/19 Javascript
python 快速排序代码
2009/11/23 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
法律进企业活动方案
2014/03/04 职场文书
《分一分》教学反思
2014/04/13 职场文书
党员民主评议总结
2014/10/20 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
村官2015年度工作总结
2015/10/14 职场文书
新员工入职感言范文!
2019/07/04 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers