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 相关文章推荐
javascript jQuery插件练习
Dec 24 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
angular实现form验证实例代码
Jan 17 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python生成式的send()方法(详解)
2017/05/08 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python爬虫基础之urllib的使用
2020/12/31 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
德尔福集团DELPHI的笔试题
2012/02/22 面试题
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
节能减排倡议书
2014/04/15 职场文书
中学生演讲稿
2014/04/26 职场文书
会计专业求职信
2014/08/10 职场文书
租车协议书范本2014
2014/11/17 职场文书
钢琴师观后感
2015/06/12 职场文书
安全责任协议书范本
2016/03/23 职场文书
python缺失值的解决方法总结
2021/06/09 Python