JS数组 全解析（创建数组的方法、稀疏数组、检测数组、数组元素的增删、常用的数组方法）

JS数组 简介

• 数组对象的作用是：使用单独的变量名来存储一系列的值。

• 在JS中，数组也是一种对象

• JS中的数组是弱类型的，一个数组中可以包含不同类型的元素，甚至是其他对象或数组。

• 简单的 Array 对象参考手册：http://www.w3school.com.cn/js/js_obj_array.asp

• 完整的 Array 对象参考手册：http://www.w3school.com.cn/jsref/jsref_obj_array.asp

创建数组的方法

字面量

var arr = [    '白小明',    [1, 2, 3],    {        name : 'bxm',        age : 20    },    null];console.log(arr[0]);console.log(arr[1][1]);console.log(arr[2].age);console.log(arr[3]);

new Array （注意：new可以省略）

var arr1 = new Array(); // 如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。var arr2 = new Array(100); // 当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。var arr3 = new Array(true, null, 2, 'hi'); // 当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

多维数组

// 二维数组，99乘法表var arr = []for (var i = 1; i <= 9; i++) {    arr[i] = [];    for (var j = 1; j <= i; j++) {        arr[i][j] = j + '×' + i + '=' + i*j;        document.write(arr[i][j] + ' ');    }    document.write('<br>');}

稀疏数组

稀疏数组表示索引是不连续的的数组。

var arr = new Array();arr[3] = 100;console.log(3 in arr); // trueconsole.log(2 in arr); // falseconsole.log(arr.length); // 4console.log(arr[2]); // undefinedconsole.log(arr[3]); // 100console.log(arr[4]); // undefined

数组元素的增删

入栈（入队） push()

var arr = new Array(true, null, 2, 'hi');arr3.push("elem"); // 在数组尾部添加一个元素

出栈 pop()

var arr = new Array(true, null, 2, 'hi');arr.pop()

出队 shift()

var arr = new Array(true, null, 2, 'hi');arr.shift(); // 移除数组头部的元素

unshift()

var arr = new Array(true, null, 2, 'hi');arr.unshift('haha'); // 在数组头部添加一个元素

delete

var arr = new Array(true, null, 100, 'hi');delete arr[2]; // 长度不变，删除的位置变为 undefined// 注意：// 与 arr[2] = undefined; 不等价// 前者 console.log(100 in arr); 返回false// 后者 console.log(100 in arr); 返回true

arr[arr.length]

var arr = new Array(true, null, 2, 'hi');arr[arr.length] = 'hello'; // arr[arr.length] 总是指向数组最后一个元素的下一个，所以可以通过这种方式赋值。相当于 arr.push('hello')

arr.length -=1;

var arr = new Array(true, null, 2, 'hi');arr.length -= 1; // 删除最后一个元素

检测数组

instanceof

var arr = new Array(true, null, 2, 'hi');console.log(arr instanceof Array);

更好的方法：Array.isArray()

var arr = new Array(true, null, 2, 'hi');console.log(Array.isArray(arr));

常用的数组方法

join()：将数组转化为字符串，通过指定的分隔符进行分隔

var arr = [5, 2 ,3];console.log(arr.join());console.log(arr.join('-'));

toString()：把数组转换为字符串，用逗号分隔，并返回结果。

返回值与没有参数的 join() 方法返回的字符串相同。

var arr = [1, 2 ,3, 4, 5];console.log(arr.toString()); // 1,2,3,4,5

concat()：数组合并

注意：该方法不会改变原数组

var arr = [5, 2 ,3];console.log(arr.concat([100, 6]));console.log(arr.concat([100, 6, [1, 2]]));

slice(start, end)：返回数组的片段

注意：该方不会改变原数组

var arr = [5, 2 ,3, 15, 666];console.log(arr.slice(1)); // [2, 3, 15, 666]，如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。console.log(arr.slice(1,3)); // [2 ,3]console.log(arr.slice(2,-1)); // [3, 15]，-1表示最后一个元素，-2表示倒数第二个元素

splice(index, howMany)：删除数组的片段

注意：该方法会改变原数组

var arr1 = [5, 2 ,3, 15, 666];console.log(arr1.splice(2)); // [3, 15, 666]console.log(arr1); // [5, 2]var arr2 = [5, 2 ,3, 15, 666];console.log(arr2.splice(3, 1)); // [15]console.log(arr2); // [5, 2 ,3, 666]var arr3 = [5, 2 ,3, 15, 666];console.log(arr3.splice(3, 1, '白', '小明')); // [15]console.log(arr3); // [5, 2 ,3, 白, 小明, 666]

重排序方法

升序：sort()

var arr = new Array(4, 2, 3, 15);console.log(arr.sort()); // ASCII 升序// [15, 2, 3, 4]

降序：reverse()

var arr = new Array(4, 2, 3, 5);console.log(arr.reverse()); // ASCII 降序// [4, 3, 2, 15]

注意：使用sort() 和 reverse() 方法之后，原数组被修改

sort() 和 reverse() 方法会调用每个数组元素的toString()方法，转化为字符串再比较（）。

var arr = new Array(4, 2, 3, 15);function sortCompare(value1, value2) {    return value1 -value2;    // if (value1 < value2) {    //  return -1;    // } else if (value1 > value2) {    //  return 1;    // } else {    //  return 0;    // }}function reverseCompare(value1, value2) {    return value2 -value1;    // if (value1 < value2) {    //  return 1;    // } else if (value1 > value2) {    //  return -1;    // } else {    //  return 0;    // }}console.log(arr.sort(sortCompare)); // 升序console.log(arr.reverse(reverseCompare)); // 降序

数组迭代方法

注意：下面这些方法都不会改变原数组

forEach：让数组中的每一个元素做一件事

var arr = [5, 2 ,3, 15, 666];arr.forEach(function(element, index){    console.log(element + 10); // 15, 12, 13, 25, 676});console.log(arr); // [5, 2, 3, 15, 666]

map：让数组通过某种运算产生一个新数组

var arr = [5, 2 ,3, 15, 666];var arrMap = arr.map(function(index, elem) {    return index + 10;});console.log(arrMap); // [15, 12, 13, 25, 676]console.log(arr); // [5, 2, 3, 15, 666]

filter：筛选出数组中符合条件的元素，组成新的数组

var arr = [5, 2 ,3, 15, 666];var newArr = arr.filter(function(item, index) {    return item > 3;});console.log(newArr); // [5, 15, 666]console.log(arr); // [5, 2, 3, 15, 666]

reduce：让数组的前项和后项做某种运算，并累计最终值

var arr = [1, 2 ,3, 4, 5];var newArr = arr.reduce(function (prev, next) {    return prev + next;});console.log(newArr); // 15    (1+2+3+4+5)console.log(arr); // [1, 2 ,3, 4, 5]

every：检测数组中的每一项是否符合条件

var arr = [1, 2 ,3, 4, 5];var newArr = arr.every(function (item, index) {    return item > 3;});console.log(newArr); // false，全部满足才为true

some：检测数组中是否有某项符合条件

var arr = [1, 2 ,3, 4, 5];var newArr = arr.some(function (item, index) {    return item > 3;});console.log(newArr); // true，全不满足才为false