极乐门资源网 Design By www.ioogu.com

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

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

let val_one=typeof this.data.pIndex=="number""htmlcode">
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数组索引问题,js获取数组符合索引

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

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

暂无JS数组索引检测中的数据类型问题详解的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。