JavaScript 数组详解

数组是值的有序集合。每个数组里的值叫做数组元素，而每个数组元素都有与之对应的数字下标，也称之为索引。JavaScript是弱类型的语言，数组中的元素可以是任意类型的元素，比如数组中可以包含其它数组或对象。下面举个栗子：

var arr = [1, 'string', true, {x:1}, [1,2,3], null, undefined];
//获取数组元素
arr[0]; // 1
arr[1]; // 'string'
arr[2]; // true
arr[3]; // {x:1}
arr[3].x; // 1
arr[4][1]; // 2
arr[5]; // null
arr[6]; // undefined

比较特别的：

var arr = [1,,2];
arr   // 1,undefined,2
var arr = [,,,]
arr   // undefined × 3

数组默认最大长度为 2³² -1，超出这个长度将会报错：

var arr = new Array(4294967295);
arr.length    // 4294967295
var arr = new Array(4294967296); //Invalid array length

数组如果以构造函数方式创建，里面的参数可以为数字，也可以为数组：

var arr = new Array(5);  //undefined × 5 
//或者以数组形式加入
var arr = new Array(1,2,true,'string');
arr    //[1, 2, true, "string"]

数组元素写入和删除：

var arr = [1,2,3];
arr.length  // 3
arr[3] = 4;    //向数组添加一个元素
arr    //[1,2,3,4]
delete arr[3];   //true
arr[3]    //undefined
//push，unshift方法添加元素
var arr = [];
arr.push(1);
arr    // [1]
arr.push(2,3);
arr    //[1,2,3]
arr[arr.length] = 4;    //相当于push方法往数组的最后添加元素
arr.unshift(0);   //往数组的最前面添加元素0
arr    //[0,1,2,3,4]
delete arr[1];
arr    //[0, undefined, 2, 3, 4]
arr.length    //5    元素已经被删除，数组的长度还是保持不变
1 in arr;   //false  元素1已经不存在
arr.length -= 1; //4
arr    //[0, undefined, 2, 3]     元素4已经被移除
arr.length;    //4      长度也相应的减少
//pop，shift方法移除元素
arr.pop();    //3    显示被删除的元素3
arr    //[0, undefined, 2]    数组的最后一个元素被删除
arr.shift();   //0    显示被删除的元素0
arr     //数组的第一个元素被删除
 

假如我们往数组对象的原型上添加一个元素，那么这个元素会在for  in 循环里出现，再这里说点题外话，for in是用来循环带有字符串key的对象的方法，不推荐用for in 来循环数组，不过在ES6中我们可以使用for of来循环数组，它的功能和for in相似，但是它很好的弥补了for in的缺陷：

var arr = [1,2,3];
Array.prototype.name = 'animal';
for (var i in arr){
     console.log(arr[i]);    //1,2,3,'animal'
}
//可以使用hasOwnProperty方法来检测该属性是否存在当前数组来弥补
for (var i in arr){
    if (arr.hasOwnProperty(i)) {
        console.log(arr[i]);    //1,2,3
     }
}
//也可以使用for of
for (var value of arr){
     console.log(value);    //1,2,3
}

下面来讲讲数组的方法，数组包含了许多自带的方法，如sort,join,concat,slice等等，一起来看下它们的功能：

var arr = [1,2,33];
//数组检索   indexOf(从左向右)  lastIndexOf(从右向左)
var arr = [1,2,3,4,3,2,5];
arr.indexOf(3);  //2   第一个参数为要查找的元素，并返回该元素的索引值
arr.indexOf(10);   //-1   如果没有该元素则返回 -1
arr.indexOf(3,2);   //4   第二个参数规定在何处开始查找
arr.indexOf(2,-3);   //5   也可以为负数，-3 表示末尾往左第三个位置
//将数组转化为字符串
arr.join();    // "1,2,33"
arr.join('-');    // "1-2-33"
arr.join('');    // "1233"
//将数组逆序排列
arr.reverse();    //[33, 2, 1]
arr    //[33, 2, 1]    原数组也被修改
//数组排序
var arr = ["c","b","d","a"];
arr.sort();    //["a","b","c","d"]
var arr = [1,33,6,20];
arr.sort();    //[1, 20, 33, 6]
//如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。所以上面的数字并没有按照我们所想要的按数字大小排序。如果想按数字大小排序，就要用sort方法里加参数。 注意：sort方法也会改变原数组而不会重新生成一个新副本。
arr.sort(function(a,b){
    return a - b;   //[1, 6, 20, 33]
})
//sort方法将比较两个数字的大小，函数提供两个参数。若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。若 a 大于 b ，则返回一个大于 0 的值。如果 a 等于 b ，则返回0。
//当数组里面包含对象，比如存储每个学生的分数并按成绩由高到低排序
var arr = [{name:'张三', score:67},{name:'李四', score:98},{name:'王五', score:75}];
arr.sort(function(a,b){
     return b.score - a.score;
})
arr.forEach(function(val){
     console.log(val.score);    //98,75,67
})
//数组合并
var arr = [1,2,3];
arr.concat(4,5);    //[1,2,3,4,5]
arr    //[1,2,3]     原数组未被修改
arr.concat([11,12],13);  //[1, 2, 3, 11, 12, 13]  还是一维数组
arr.concat([[11,12],13]);   //[1, 2, 3, [11, 12], 13]  变成二维数组了
//返回选定的元素
var arr = [1,2,3,4,5];
arr.slice(2,4);    //[3,4]
arr    //[1,2,3,4,5]   原数组不会被修改
arr.slice(1,-1);    //[2, 3, 4]  
//slice方法第一个参数为数组的下标，表示从哪里开始选取，第二个参数可选，表示从哪里结束选取，不填则一直选取到数组末尾。-1表示数组末尾的第一个元素。
//splice方法表示 数组删除/拼接元素，然后返回被删除的项目
var arr = [1,2,3,4,5];
arr.splice(3);    //[4,5]    // 3 表示从数组的何处开始删除并返回被删除的元素
arr    //[1, 2, 3]
var arr = [1,2,3,4,5];
arr.splice(3,1);    //[4]  第二个参数表示要删除元素个数
var arr = [1,2,3,4,5];
arr.splice(2,2,'a',8);    //[3,4]   返回被删除的元素，并向数组添加新的元素
arr   //[1, 2, "a", 8, 5]
//forEach数组遍历
var arr = [1,2,3];
arr.forEach(function(value, index, o){
    console.log(value+','+index+','+(o===arr));
})
//输出结果  三个参数分别为数组元素，元素的索引，数组本身
//1,0,true
//2,1,true
//3,2,true
//map数组映射
var arr = [1,2,3];
arr.map(function(x){
    return x * 10;    //[10, 20, 30]   每个数组元素会乘以10
})
arr     //[1,2,3]   原数组不会改变
//filter数组过滤
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.filter(function(x, index){
     return x <3 || x >=8;    //[1, 2, 8, 9, 10]  过滤筛选出你需要的元素
})
arr     //[1,2,3,4,5,6,7,8,9,10]   原数组不会改变
//every,some数组判断
var arr = [1,2,3,4,5];
arr.every(function(x){
    return x < 10;    //true    数组中所有元素都必须满足条件
})
arr.every(function(x){
    return x < 2;    //false    数组中只要有一个元素不满足条件
})
arr.some(function(x){
    return x < 2;    //true    数组中只要有一个元素满足条件
})
arr.some(function(x){
    return x > 10;    //false    数组中所有元素都不满足条件
})
arr     //[1,2,3,4,5]   原数组不会改变
//reduce数组的两个值(从左到右)应用
var arr = [1,2,3,4,5];
arr.reduce(function(x,y){
    return x + y;    //15
})
arr.reduce(function(x,y){
    return x + y;    //20   后面一个参数表示从该值开始相加
},5)
arr     //[1,2,3,4,5]   原数组不会改变

最后，边看边动手练习才能更好的理解每个方法。