js中访问自定义数组问题
问题:js中定义的数组遍历完成,最后会有一段乱码,如下:
上面的数据正常显示,但是最后会有一段乱码。
原因:用for-in遍历数组的时候最后会多遍历一次,最后的一次在数组中不存在,所以造成了上面的问题。
简单 for 循环
下面先来看看大家最常见的一种写法:
var arr = [1, 2, 3];for(var i = 0; i < arr.length; i++) { console.log(arr[i]);}
当数组长度在循环过程中不会改变时,我们应将数组长度用变量存储起来,这样会获得更好的效率,下面是改进的写法:
var arr = [1, 2, 3];for(var i = 0, len = arr.length; i < len; i++) { console.log(arr[i]);}
for-in
通常情况下,我们可以用 for-in 来遍历一遍数组的内容,代码如下:
var arr = [1, 2, 3];var index;for(index in arr) { console.log("arr[" + index + "] = " + arr[index]);}
一般情况下,运行结果如下:
arr[0] = 1arr[1] = 2arr[2] = 3
但这么做往往会出现问题。
for-in 的真相
for-in 循环遍历的是对象的属性,而不是数组的索引。因此, for-in 遍历的对象便不局限于数组,还可以遍历对象。例子如下:
var person = { fname: "san", lname: "zhang", age: 99};var info;for(info in person) { console.log("person[" + info + "] = " + person[info]);}
结果如下:
person[fname] = sanperson[lname] = zhangperson[age] = 99
需要注意的是, for-in 遍历属性的顺序并不确定,即输出的结果顺序与属性在对象中的顺序无关,也与属性的字母顺序无关,与其他任何顺序也无关。
现在,我们再回过头来看看用 for-in 来循环数组的例子,我们修改一下前面遍历数组的例子:
var arr = [1, 2, 3];arr.name = "Hello world";var index;for(index in arr) { console.log("arr[" + index + "] = " + arr[index]);}
运行结果是:
arr[0] = 1arr[1] = 2arr[2] = 3arr[name] = Hello world
我们看到 for-in 循环访问了我们新增的 “name” 属性,因为 for-in 遍历了对象的所有属性,而不仅仅是“索引”。同时需要注意的是,此处输出的索引值,即 “0″、 “1″、 “2″不是 Number 类型的,而是 String 类型的,因为其就是作为属性输出,而不是索引。那是不是说不在我们的 Array 对象中添加新的属性,我们就可以只输出数组中的内容了呢?答案是否定的。因为 for-in 不仅仅遍历 array 自身的属性,其还遍历 array 原型链上的所有可枚举的属性。下面我们看个例子:
Array.prototype.fatherName = "Father";var arr = [1, 2, 3];arr.name = "Hello world";var index;for(index in arr) { console.log("arr[" + index + "] = " + arr[index]);}
运行结果是:
arr[0] = 1arr[1] = 2arr[2] = 3arr[name] = Hello worldarr[fatherName] = Father
写到这里,我们可以发现 for-in 并不适合用来遍历 Array 中的元素,其更适合遍历对象中的属性,这也是其被创造出来的初衷。却有一种情况例外,就是稀疏数组。考虑下面的例子:
var key;var arr = [];arr[0] = "a";arr[100] = "b";arr[10000] = "c";for(key in arr) { if(arr.hasOwnProperty(key) && /0$|[1-9]\d$/.test(key) && key <= 4294967294 ) { console.log(arr[key]); }}
for-in 只会遍历存在的实体,上面的例子中, for-in 遍历了3次(遍历属性分别为”0″、 “100″、 “10000″的元素,普通 for 循环则会遍历 10001 次)。所以,只要处理得当, for-in 在遍历 Array 中元素也能发挥巨大作用。
为了避免重复劳动,我们可以包装一下上面的代码:
function arrayHasOwnIndex(array, prop) { return array.hasOwnProperty(prop) && /0$|[1-9]\d$/.test(prop) && prop <= 4294967294; // 2^32 - 2}
使用示例如下:
for (var key in arr) { if (arrayHasOwnIndex(arr, key)) { console.log(arr[key]); }}
查询结果如上,简单的说就是for-in中的输出是属性类型,不仅仅是索引。他们的索引值不是我们想象的number类型,而是看到的string类型。
for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来,所以这可能会导致代码中出现上述的问题。
解决办法:
如果不是该对象自身直接创建的属性(也就是该属//性是原型中的属性),则跳过显示
if(!array.hasOwnProperty(i)){
continue;
}