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 相关文章推荐
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 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获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
Python中模块与包有相同名字的处理方法
2017/05/05 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
用Python解决x的n次方问题
2019/02/08 Python
Django模板Templates使用方法详解
2019/07/19 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python -v 报错问题的解决方法
2020/09/15 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
大学考试作弊检讨书
2014/01/30 职场文书
企业环保标语
2014/06/10 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
教代会开幕词
2015/01/28 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL