处理for-in用在数组上时候出现的诡异现象的问题

huangjinnan 发布于2019-08-20 19:06 / 2557人阅读

摘要：在第一次循环的时候的值为，此后依次为。所以就出现了上面的问题。此外，在下打印的时候可能与在中打印出现不同的结果。尤其是是这种牵扯到数组下标的尽量不要使用来处理，如果非要使用可以做如下处理以避免如上的问题。

问题复现

var arr = ["a", "b", "c"];
var sid = ["Go"];
for (var key in arr) {
    sid[key + 1] = arr[key];
}
console.log(sid)

很简单的问题，最后的输出结果却是：

[ "Go", , , , , , , , , , , "b", , , , , , , , , , "c" ]

问题分析

通过上面的输入结果我们可以发现这么几个问题：

sid里面多了很多空项，length明显的增多了

arr[0]的值在sid中没有出现

问题1：sid里面多了很多空项，length明显的增多了

略过痛苦的分析步骤直接来重点内容：
通过打印key + 1我们可以找到问题的关键。通过打印我们可以得到如下信息。
在第一次循环的时候key + 1的值为01，此后依次为：11,21。
通过这个我们可以判断: 这个key其实是一个String类型的。
所以上面的步骤相当于：

sid["01"] = arr[0];
sid["11"] = arr[1];
sid["21"] = arr[2];

究其原因，我只能在浅层面作出解释：
这可能是因为for-in一般是用于对象的（狭义的对象），而对象的属性是一个String类型，所以for-in的参数key被定义为一个String类型。这并没有考虑过数组的属性名（下标）不是String类型，而是一个Number类型的情况。所以就出现了上面的问题。此外在MDN的js语法关于for-in这块出现过这样的提示：

Note: for..in 不应该被用来迭代一个下标顺序很重要的 Array .

可能就包含这种情况吧。

问题2：arr[0]的值在sid中没有出现

arr[0]的值其实通过sid["01"]可以取到。
此外，在node下打印sid的时候可能与在console中打印出现不同的结果。

问题解决

对于数组的遍历，最好使用：forEach,map,some,filter,find等方法。尤其是是这种牵扯到数组下标的尽量不要使用for-in来处理，如果非要使用可以做如下处理：

var arr = ["a", "b", "c"];
var sid = ["Go"];
for (var key in arr) {
    sid[parseInt(key) + 1] = arr[key];
}
console.log(sid)

以避免如上的问题。

服务器托管云服务器加皮肤后的诡异问题 cdn的出现问题云主机可能出现的问题数组中未出现的数字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85155.html

javascript 代码规范

目录 1.为什要遵守代码规范 2.编写代码需遵守的几个原则 3.编码规范(Coding Conventions) 4.命名规范(Naming Conventions) 5.css基础class类 1.为什要遵守代码规范软件bug的修复是昂贵的，并且随着时间的推移，这些bug的成本也会增加，尤其当这些bug潜伏并慢慢出现在已经发布的软件中时。当你发现bug 的时候就立即修复它是最好的，此时你代...

cnsworder 2019-08-22 16:02 评论0 收藏0
深入理解JavaScript系列1:编写高质量JavaScript代码的基本要点

摘要：访问全局对象在浏览器中，全局对象可以通过属性在代码的任何位置访问除非你做了些比较出格的事情，像是声明了一个名为的局部变量。前言才华横溢的Stoyan Stefanov，在他写的由O’Reilly初版的新书《JavaScript Patterns》(JavaScript模式)中，我想要是为我们的读者贡献其摘要，那会是件很美妙的事情。具体一点就是编写高质量JavaScript的一些要素...

Enlightenment 2019-08-19 17:18 评论0 收藏0
js遍历之for forEach in of

摘要：语法参数当前遍历项。遍历的范围在第一次调用前就会确定。已删除的项不会被遍历到。的是由提出的，目的是作为遍历所有数据结构的统一方法。不仅可以遍历数组，还可以遍历结构，某些类似数组的对象如对象对象，对象，以及字符串。即使是最简单的循环，其中也深藏学问 ECMAScript5(es5)有三种for循环简单for for in forEach ECMAScript6(es6)新增 fo...

yeyan1996 2019-08-20 17:38 评论0 收藏0
Javascript中的的对象——原型模式(Prototype)

摘要：使用原型模式添加方法和属性在前面的章节中，已经学习过了如何定义一个构建新对象时使用的构造函数。向构造函数的中添加方法和属性是在对象被创建的时候为对象添加功能的另一种方式。让我们继续使用对象作为构造函数的原型属性。本文原文来源：《Object-Oriented JavaScript》By Stoyan Stefanov本文翻译来源：赤石俊哉原创翻译版权申明：如果您是原文的原作者并且...

岳光 2019-08-20 14:44 评论0 收藏0
从 V8 源码看 JS 数组排序的诡异问题

摘要：前几天一个朋友在微信里面问我一个关于数组排序的问题。对数组的进行排序，然后把排完序的数组进行处理。翻译成编程术语就是排序算法是不稳定排序。因此第二个排序算法会把移动到最后，然后对剩余的数据进行排序。前几天一个朋友在微信里面问我一个关于 JS 数组排序的问题。原始数组如下： var data = [ {value: 4}, {value: 2}, {value: un...

MkkHou 2019-08-21 11:53 评论0 收藏0