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 风格的HTML文本转义
Jul 01 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
了不起的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
ThinkPHP中Session用法详解
2014/11/29 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
ES6 十大特性简介
2020/12/09 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Python和php通信乱码问题解决方法
2014/04/15 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python 内置函数complex详解
2016/10/23 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python 实现线程之间的通信示例
2020/02/14 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
介绍Ibatis的核心类
2013/11/18 面试题
函授大专自我鉴定
2013/11/01 职场文书
元旦活动感言
2014/03/08 职场文书
商务日语专业自荐信
2014/04/17 职场文书
单位绩效考核方案
2014/05/11 职场文书
酒店管理求职信
2014/06/09 职场文书
平面设计专业求职信
2014/08/09 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
工作检讨书怎么写
2015/01/23 职场文书
golang正则之命名分组方式
2021/04/25 Golang
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript