谈谈JavaScript数组使用注意事项及踩过的坑，排序问题，for in遍历问题等

JavaScript中数组的使用还是比较广发的，尤其与服务器交互的时候，返回结果多半有数组集合，本文探讨JavaScript中数组使用的一些注意事项及踩过的坑汇总。

1、认识数组

JavaScript中数组本质上是对象Object，那么数组0, 1, 2索引位置可以理解为对象的属性，看下述代码。

var a = [10,11,12];
a.name = "array-a";
for(var i in a) {console.log("i + 1", i + 1);
}
console.log(a,a.name,a.length)
// 输出结果
// i + 1 01
// i + 1 11
// i + 1 21
// i + 1 name1
// Array(3) [ 10, 11, 12 ] array-a 3

数组a可以理解为a = {‘0’:10,‘1’:11,‘2’:12,‘name’:‘array-a’,length等其它数组特有属性和方法}

2、数组类型判断问题

数组类型用typeof运算符返回的是object，因此不能用typeof运算符来判断数组类型，请大家使用instanceof或Object.prototype.toString或Array.isArray，参考代码：

function arrType(arr) {console.log("typeof: ", typeof arr);    //objectconsole.log("instanceof Array: ", arr instanceof Array);  //trueconsole.log("arguments instanceof Array: ", arguments instanceof Array);    //类数组, falseconsole.log("object.prototype.toString: ", Object.prototype.toString.call(arr));  //[object Array]
}
var a = [10,11,12];
arrType(a);

Array.isArray是ES5的数组方法，部分浏览器存在兼容性问题，需要大家取舍。

3、数组可变长度(length)问题

length代表数组中元素个数，数组额外附加属性（如：a.name 不影响length）。length可写，可以通过修改length来改变数组的长度。看代码：

 var a = [10,11,12];a[1000] = 1010;a.name = "array-a";var count = 0;for(var i in a) {count++;}console.log("for in loop count: ", count)        //5console.log("a legnth: ", a.length);           //1001//改变length，length后面的元素会被删除a.length = 2var count = 0;for(var i in a) {count++;} console.log("for in loop count: ", count)     //3console.log("a legnth: ", a.length);           //2

代码说明：
1）a = [10,11,12], 可理解为对象{‘0’:10, ‘1’:11, ‘2’:12}, length = 3
2）a.name = “array-a”, {‘0’:10, ‘1’:11, ‘2’:12, name:‘array-a’}, length = 3
3）a[1000] = 1010, {‘0’:10, ‘1’:11, ‘2’:12, ‘1000’: 1010, name:‘array-a’}, length = 1001，count = 5
4）a.length = 2, {‘0’:10, ‘1’:11, name:‘array-a’}, length = 2，count = 3

4、数组遍历的坑

通常数组遍历有3个方法：
1）for(var i in arr)
2）for(var i = 0, l = arr.length; i<l; i++)
3）arr.forEach，ES5中数组方法，存在浏览器兼容性，本文不讨论
看个案例：

var a = [10,11,12];
a[1000] = 1010;
a.name = "array-a";
for(var i in a) {console.log(i+1, '=>', a[i]);
}
// out-put
// 01 => 10
// 11 => 11
// 21 => 12
// 10001 => 1010
// name1 => array-afor(var i = 0, l = a.length; i<l; i++) {if(a[i] !== undefined)console.log(i+1, '=>', a[i]);
}
// out-put
// 1 => 10
// 2 => 11
// 3 => 12
// 1001 => 1010

代码说明：
1）for in循环，循环了5次，i变量为字符串，所以输出01=>10，而且遍历出了不想要的元素name
2）length遍历，循环了1001次，忽略name元素，较for in循环多了很多次空循环

注意事项：
推荐使用for(var i = 0, l = a.length; i<l; i++)遍历，除代码量稍大，稀疏数组存在空循环问题外，其它没毛病。

5、排序注意事项

JavaScript中数组默认按ascii码先后顺序排序并且影响原数组，因此当数组中元素按数值等其它类型排序的话需要特殊处理，看个案例：

var a = "MMMMJDJDEERERERURUEUROIKKMNJYYTIIIPPKKIUYYYADA".split("");
console.log(a.sort())
var b = ["2","1","3","4","8","10","5","5","6","7","3","9"];
console.log(b.sort());
// 升序，v1-0做了个隐形数据类型转换，字符串转数字
b.sort(function(v1,v2){return v1 - 0 > v2 - 0 ? 1 : -1;
});
console.log(b);
// 降序
b.sort(function(v1,v2){return v1 - 0 < v2 - 0 ? 1 : -1;
});
console.log(b);
//output
//A,A,D,D,D,E,E,E,E,E,I,I,I,I,I,J,J,J,K,K,K,K,M,M,M,M,M,N,O,P,P,R,R,R,R,R,T,U,U,U,U,Y,Y,Y,Y,Y
//1,10,2,3,3,4,5,5,6,7,8,9
//1,2,3,3,4,5,5,6,7,8,9,10
//10,9,8,7,6,5,5,4,3,3,2,1

代码说明：
1）默认按ascii码先后顺序排序，数组b默认排序10在2前面；
2）修改默认排序行为，需要自定义排序规则函数fn(v1,v2)，返回 >0 =0 <0 3个值
3）v1-0做了个隐形数据类型转换，字符串转数字，具体参考 “谈谈JavaScript的算数运算、二进制浮点数舍入误差及比较、类型转换和变量声明提前问题 ”

排序规则函数说明: fn(a,b)，切记返回大于零、等于零或小于零3个值

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。