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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/QQ80583600/article/details/70243090

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); // true
console.log(2 in arr); // false

console.log(arr.length); // 4
console.log(arr[2]); // undefined
console.log(arr[3]); // 100
console.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