JavaScript权威指南 - 数组
JavaScript数组是一种特殊类型的对象。
JavaScript数组元素可以为任意类型，最大容纳232-1个元素。
JavaScript数组是动态的，有新元素添加时，自动更新length属性。
JavaScript数组元素索引可以是不连续的，它们之间可以有空缺。
创建数组
调用构造函数Array()创建数组：
var a = new Array(); //空数组，等同于数组直接量[]
var b = new Array(5); //创建指定长度的数组
var c = new Array(1, 5, 9, 6); //指定一个或多个元素的非空数组
数组直接量表示法：
var a = []; //空数组
var b = [2, 3, 5, 7]; //常规元素
var c = [5, true, "a"]; //元素不同类型的数组
var d = [{ x: 2 }, { x: 3 }]; //包含对象元素的数组
以上是数组的几种常见类型，但下面两种也符合数组语法。
var e = [1, , 3]; //该数组有3个元素，中间的元素为undefined
var f = [1, 5, ]; //该数组有2个元素，结尾逗号后面没有元素
如果省略数组直接量中的某个元素值，省略的元素值为undefined；
数组直接量的语法中允许有可选结尾的逗号，故[1,5,]只有两个元素并非三个。
两种方法创建的数组无本质区别，但数组直接量表示法简单，实际使用中更为常见。
数组元素
读写数组元素最简单的方法就是通过索引。
var arr = ["one", "two"];
var res = arr[0]; //读第0的元素
arr[0] = "test"; //写第0的元素
数组本身就是对象，使用[]方括号访问数组元素就像方括号访问对象属性一样。数组的特别之处在于，当使用小于232的非负整数作为属性时数组会自动维护其length属性。当然，数组也可以有自定义属性，但不常见。如下：
var obj = [1, 2, 3];
obj["IsShow"] = false; //现在obj数组为 [1, 2, 3, IsShow: false]
稀疏数组
稀疏数组就是包含从0开始的不连续索引的数组。
var a = new Array(5); //数组没有元素，但a.length等于5
var b = [];
b[1000] = 1000; //添加一个索引为1000的元素，但b.length等于1001
通过delete操作符删除数组元素可产生稀疏数组。delete不会改变数组长度，高位置索引元素也不会下移填补删除索引位置的空白。
注意，省略数组不等同于稀疏数组，省略的元素在数组中是存在的，值为undefined。
数组长度
每个数组都有length属性，代表数组中元素的个数。针对非稀疏数组，其值比最大索引大1。
['a', 'b', 'c'].length; //最大索引为2，length为3
当设置length属性为一个小于当前数组长度的非负整数n时，当前数组中的那些索引大于或等于n的元素将被删除。
var a = [1, 2, 3, 4, 5]; //数组初始化5个元素
a.length = 3; //现在a为[1,2,3]
a.length = 0; //删除所有元素，a为[]
a.length = 5; //数组长度为5，但是没有元素
在ECMAScript 5中，可以用Object.defineProperty()让数组的length属性变成只读的。
var b = [1, 2, 3];
Object.defineProperty(b, "length", { writable: false }); //让length变成只读属性
b.length = 0; //更改无效
数组遍历
使用for循环遍历数组元素是最常见的方法。如下：
var obj = { height: 175, weight: 60 }; //初始化一个对象
var keys = Object.keys(obj); //获取对象obj属性名组成的数组
var values = []; //values用来保存对象obj属性值
for (var i = 0, len = keys.length; i < len; i++) {
var key = keys[i]; //获取当前索引的键值
values[i] = obj[key]; //在values数组中保存属性值
}
针对稀疏数组遍历时，注意过滤掉不满足条件的元素。
for (var i = 0; i < arr.length; i++) {
if (!arr[i]) continue; //跳过null,undefined和不存在的元素
if (arr[i] === undefined) continue; //跳过undefined和不存在的元素
if (!(i in arr)) continue; //跳过不存在的元素
//T0DO
}
多维数组
JavaScript不支持真正的多维数组，一般用数组的数组来近似。下面是一个具体的例子，使用二维数组作为一个9X9乘法表。
//创建一个多维数组
var table = new Array(10); //表格有10行
for (var i = 0; i < table.length; i++) {
table[i] = new Array(10); //每行有10列
}
//初始化数组
for (var row = 0; row < table.length; row++) {
for (var col = 0; col < table[row].length; col++) {
table[row][col] = row * col;
}
}
//使用多维数组来计算
var result = table[8][9]; //result = 72
数组方法
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的方法，下面介绍这些方法的基本用法。
join()
Array.join(separator)该方法可以将数组元素按照指定字符连接起来，返回最终生成的字符串。如果不指定字符separator，默认用逗号分隔。
var arr = [1, 2, 3];
arr.join(); //=>"1,2,3" 默认使用逗号作为元素连接符
arr.join(' '); //=>"1 2 3" 以空格作为连接符
arr.join('|'); //=>"1|2|3" 以‘|’作为连接符
reverse()
Array.reverse()该方法将数组中的的元素颠倒顺序，在原数组上进行操作。方法返回值为对原来数组的引用。
var arr = [1, 2, 3];
arr.reverse().join(); //=>"3,2,1" ,并且现在arr为[3,2,1]
sort()
Array.sort([compareFunction])该方法将数组中的元素排序并返回对原来数组的引用。不传递参数调用时，默认按照字母顺序排序。
var fruits = ['banana', 'cherry', 'apple'];
fruits.sort().join(); //=>apple,banana,cherry
当按照其他方式排序时，就要提供一个比较函数compareFunction。该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
- 若 a 等于 b，则返回 0。
- 若 a 大于 b，则返回一个大于 0 的值。
var s = [33, 666, 12, 5];
s.sort(); //字母顺序：12,33,5,666
s.sort(function (a, b) { //数字顺序：5,12,33,666
return a - b;
});
如果要排序的数组元素包含undefined，它们会被排到数组尾部。
concat()
Array.concat(arr1[,arr2,...])该方法用于连接两个或多个数组并返回一个新数组，不会改变现有数组本身。
var a = [1, 2];
a.concat(4, 5); //=>[1,2,4,5] 连接每一个参数值
a.concat([4, 5]); //=>[1,2,4,5] 连接一个数组
a.concat([4, 5], [6, 7]); //=>[1,2,4,5,6,7] 连接多个数组
slice()
Array.slice(start[,end])该方法用来从已有的数组返回选定的元素，返回一个新的数组。两个参数分别指定要选定元素的开始位置和结束位置。
start参数表示从什么位置开始取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。end是一个可选参数。规定从何处结束选取，但不包括该下标元素。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
var a = [1, 2, 3, 4, 5];
a.slice(0, 3); //返回[1,2,3]
a.slice(3); //返回[4,5]
a.slice(1, -1); //返回[2,3,4]
a.slice(-3, -2); //返回[3]
splice()
Array.splice(index,count[, item1[, item2[, ...]]])该方法用来向数组中添加或删除元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。返回被删除的元素。该方法会改变原始数组。
index参数代表要添加或删除元素的索引。count参数代表要从数组中删除的元素个数。如果省略，从index起点到数组结尾的元素全删除。item1,item2,...从第三个参数开始是可选参数。代表向数组添加的新元素。
var names = ["George", "Thomas"];
names.splice(1, 0, "John"); //在索引为1的地方插入一个新元素
names.splice(0, 1, "Tom"); //将第一个元素'George'替换成'Tom'
splice()与slice()方法，一个字母之差但是功能完全不同，注意区别使用。
push()和pop()
Array.push(element1,element2,...)该方法用来向数组的末尾添加一个或多个元素，并返回新的长度。
Array.pop()方法用来删除数组的最后一个元素，减小数组长度，返回删除的元素值。
组合push()和pop()能够让JavaScript数组实现先进后出的栈功能：push()入栈、pop()出栈。
var stack = []; //空栈
stack.push(1, 2); //stack：[1,2]
stack.pop(); //stack：[1]
stack.push(3); //stack：[1,3]
stack.pop(); //stack：[1]
stack.push([4, 5]); //stack：[1,[4, 5]]
stack.pop(); //stack：[1]
stack.pop(); //stack：[]
unshift()和shift()
Array.unshift(element1,element2,...)该方法可向数组的开头添加一个或更多元素，并返回新的长度。
Array.shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。如果数组为空，shift()不进行任何操作，返回undefined。
这两个方法行为非常类似于push()和pop()。不一样的是，这两个方法是在数组头部操作。
var arr = [3, 4];
arr.unshift(1,2); // arr：[1,2,3,4]
arr.shift(); // arr：[2,3,4]
toString()和toLocalString()
数组对象和普通对象一样拥有toString()方法。该方法会将数组元素转化为字符串，用逗号把生成的字符串连接起来，形成一个字符串。返回值与没有参数的join()方法返回的字符串相同。
[1, 2, 3].toString(); //"1,2,3"
["a", "b", "c"].toString(); //"a,b,c"
[1, [2, 'c']].toString(); //"1,2,c"
toLocalString()是toString()的本地化方法。
ECMAScript 5中定义了9个新的数组方法来遍历，映射，过滤，检测，简化和搜索数组。有了这些方法就不用利用for循环来遍历数组了。
forEach()
Array.forEach(callback[, thisArg])方法用来从头致尾遍历数组，为每个元素调用回调方法。对于稀疏数组，不存在的元素不调用回调方法。
callback参数就是在数组每一项上执行的函数，接收三个参数：数组元素、元素索引和数组本身。thisArg是可选参数，用来当作callback函数内this的值的对象。如果省略了thisArg参数,或者赋值为null或undefined，则this在非严格模式下将是全局对象，严格模式下为undefined。
下面看个综合例子：以数组元素为半径，计算所有圆的面积。
var numbers = [5, 6]; // Define an array.
var obj = {
showResults: function(value, index,array) {
var squared = this.calcSquare(value);
document.write("value: " + value);
document.write(" index: " + index);
document.write(" squared: " + squared);
document.write("<br />");
},
calcSquare: function(x) { return x * x }
};
numbers.forEach(function(value, index) { this.showResults(value, index) }, obj);
// Output:
// value: 5 index: 0 squared: 25
// value: 6 index: 1 squared: 36
注意：没有办法中止或者跳出forEach循环，除了抛出一个异常。它总是返回undefined，即没有返回值。
map()
Array.map(callback[, thisArg])方法和forEach()同样是用来遍历数组，为每个元素执行回调方法。该方法参数与forEach()方法参数一致，不再赘述。但是传给map()的函数应该有返回值。
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt); //求数组中每个元素的平方根
/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */
filter()
Array.filter(callback[, thisArg])方法用来过滤数组元素，将符合规则的元素组成一个新数组返回，不会改变原数组。callback参数就是用来测试数组中元素的方法，返回true表示通过测试。
var arr = [1, 2, 3, 4, 5];
var res = arr.filter(function (value, index, array) {
return value > 3; //过滤掉小于等于3的元素
});
alert(res.toString()); //=> 4,5
对其非稠密数组，压缩删除undefined和null元素，可以这样使用filter()：
arr.filter(function (value) { return value != undefined && value != null; });
every()和some()
Array.every(callback[, thisArg])该方法用来测试数组元素是否都通过了指定函数的测试。
Array.some(callback[, thisArg])该方法用来测试数组某些元素是否通过了指定函数的测试。
这两个方法就是数组的逻辑判断。它们对数组元素调用指定方法，返回true或false。
var arr = [1, 2, 3, 4, 5];
arr.every(function (value) { return value < 10; }); //=>true 所有元素值<10
arr.every(function (value) { return value % 2 == 0; }); //false 并非所有元素都为偶数
arr.some(function (value) { return value % 2 == 0; }); //=>true 数组元素包含偶数
arr.some(isNaN); //=>false 数组不包含非数值元素
注意：当every()和some()已确认该返回什么值的时候就会停止遍历数组。
reduce()和reduceRight()
Array.reduce(callback[, initialValue])该方法会针对数组中每个元素调用指定回调函数，将回调函数的返回值作为累积，然后以参数的形式传递到下个元素的回调方法中。
callback参数是数组元素要执行的回调函数。最多可接收4个参数：之前元素累积值、当前元素值、元素索引、数组本身。initialValue是可选参数，表示元素最开始调用回调函数传入的初始值。如果缺省该参数，它会使用数组第一个元素作为初始值，这样数组就会少迭代一次。
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (previous, current, index, array) {
return previous + current;
}, 5);
var max = arr.reduce(function (previous, current, index, array) {
return previous > current ? previous : current;
});
console.log(sum); //=>15 求和
console.log(max); //=>4 求最大值
利用reduce()可以轻松实现二维数组的扁平化：
var matrix = [ [1, 2], [3, 4], [5, 6] ];
var flatten = matrix.reduce(function (previous, current) {
return previous.concat(current);
});
console.log(flatten); //=> [1, 2, 3, 4, 5, 6]
Array.reduceRight(callback[, initialvalue])方法的用法与reduce()方法一致，唯一区别是该方法按元素索引降序处理元素。
indexOf()和lastIndexOf()
Array.indexOf(searchvalue[, fromIndex])方法用来搜索数组中给定值的元素，并返回该元素的索引，如果找不到指定的元素则返回-1。indexOf()从数组头至尾开始搜，Array.lastIndexOf(searchvalue[, fromIndex])则相反，从数组尾部为起点开始搜。
searchvalue参数代表要搜索的元素值。fromindex是可选参数，表示检索的起始位置。其值可以为字符串数值；填入字符自动忽略，默认为0。
var data = [2, 5, 7, 3, 5];
console.log(data.indexOf(5, "x")); //=> 1 "x"被忽略,用0代替
console.log(data.indexOf(5, "3")); //=> 4 从3号位开始搜索
大多数浏览器都支持以上方法。针对低版本IE6-IE8浏览器兼容性问题，可通过Array原型扩展实现以上方法。例如forEach方法：
if (!Array.prototype.forEach) {
Array.prototype.forEach = function (callback, thisArg) {
//TODO
};
}
数组类型
数组是具有特殊行为的对象。开发中可能会遇到这样的情况：给定一个未知对象，判断它是否为数组对象。ECMAScript 5版本中可以用Array.isArray()方法鉴别。
console.log(Array.isArray([])); //=> true
console.log(Array.isArray({})); //=> false
在ECMAScript 5版本以前没有Array.isArray()这个方法，typeof可解决大部分的数据类型判断但是在这却帮不上忙。
instanceof操作符可以检测，但有局限性，只能作用于单页面的情形。
console.log([] instanceof Array); //=> true
console.log({} instanceof Array); //=> false
当页面中存在子页面iframe时，在子页面中声明一个数组object，并将其赋值给父页面的一个变量，这时判断该变量：object instanceof Array会返回false。原因是数组是引用类型，在赋值过程中，传递的是引用地址。但是每个页面都有自己的一套全局对象，并且每个全局对象有自己的构造函数。object是子页面Array对象，传递到父页面，在父页面判断时却是以父页面的Array对象为标准。
ECMAScript 3版本中，检测对象是否为数组的isArray()可以这样写：
var isArray = Array.isArray() || function isArray(arg) {
return typeof arg === 'object' && //是否为对象
object.length === 'number' && //验证length属性
Object.prototype.toString.call(arg) === '[object Array]'; //判断基本类型*
}
根据数组的一些特性来判断，上面一段代码也正是ES5中Array.isArray()方法的实现形式。
类数组对象
通常把一个具有与数组相仿属性的常规对象叫做“类数组”对象，即具有length属性和对应非负正整数属性。类数组对象不能直接调用数组的方法，但可以数组的形式遍历。
//定义一个类数组对象
var obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
//当作数组遍历
for (var i = 0; i < obj.length; i++) {
console.log(obj[i]);
}
JavaScript函数体中Arguments对象是一个类数组对象。一些DOM方法也返回类数组对象，比如
document.getElementsByTagName()。
可以用下面的方法检查对象是否为类数组：
function isArrayLike(o) {
if (o && //判断o非null，undefined等
typeof o === 'object' && //o是对象
isFinite(o.length) && //o.length是有限数
o.length > 0 && //o.length是非负数
o.length < 4294967296 && //o.length小于2^32
o.length === Math.floor(o.length)) //o.length是整数
return true;
else
return false;
}
ES5版本中，所有Array数组方法都是通用的，类数组对象上同样适用。类数组对象没有继承至Array.prototype不能直接调用，但可以通过Function.call方法调用：
var obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
console.log(Array.prototype.join.call(obj, '|')); //=> a|b|c
var arr = Array.prototype.map.call(obj, function (value) {
return value.toUpperCase();
});
console.log(arr.join); //=> A,B,C 此时arr已是真正的数组
参考与扩展
本篇内容源自我对《JavaScript权威指南》第7章 数组 章节的阅读总结和代码实践。总结的比较粗糙，你也可通过原著或MDN更深入了解数组。
[1] David Flanagan，JavaScript权威指南(第6版)
[2] MDN，JavaScript 参考文档 - Array - JavaScript | MDN
