JavaScript 笔记（五）：数组

JavaScript 笔记（五）：数组

数组是引用类型（对象类型），用于存储一组数据，示例如下：

let arr = new Array(3);
console.log(arr);   // [undefined, undefined, undefined]

arr[0] = 0;
arr[1] = 1;
arr[2] = 2;
console.log(arr);   // [0, 1, 2]

console.log(arr[0]);    // 0
console.log(arr[1]);    // 1
console.log(arr[2]);    // 2
console.log(arr[3]);    // undefined

arr[3] = "reyn";
console.log(arr); // [0, 1, 2, "reyn"]

在 JavaScript 中，如果数组对应的索引中没有存储数据，那么默认存储的为 undefined；如果越界访问数组（使用不存在的索引），并不会报错，而是返回 undefined；当数组容量不够时，数组会自动扩容；数组可以存储不同的数据类型（包括数组）；数组分配的存储空间不一定是连续的，下面是一些创建数组的其它方式：

let arr1 = new Array(3);
let arr2 = new Array();
let arr3 = new Array(0, null, true, "reyn");
let arr4 = [];
let arr5 = [0, null, false, "morales"];

遍历数组

示例如下：

let arr = [0, null, false, "morales"];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

for (let i in arr) {
    console.log(arr[i]);
}

使用数组的 length 属性可以获取数组的长度

解构赋值

示例如下：

let arr = [1, 3, 5];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c);

let [a, b, c] = arr;
console.log(a, b, c);

let [a, b, c] = [1, 3, [5, 7]];
console.log(a); // 1
console.log(b); // 3
console.log(c); // [5, 7]

let [a, b, [c, d]] = [1, 3, [5, 7]];
console.log(a, b, c, d); // 1 3 5 7

let [a, b, c] = [1];
console.log(a); // 1
console.log(b); // undefined
console.log(c); // undefined

let [a = 1, b = 3, c = 5] = [0];
console.log(a); // 0
console.log(b); // 3
console.log(c); // 5

在数组的解构赋值中，赋值运算符左侧与右侧的格式必须完全相同，才能够完全解构，另外，赋值运算符左侧变量的个数可以与右侧的数组元素个数不同，如果左侧变量个数小于右侧数组元素个数，那么多余的数组元素个数将被抛弃，如果左侧变量个数大于右侧数组元素个数，那么没有相应数组元素的变量将被赋值为 undefined，此外，还可以为赋值运算符左侧的变量设置缺省值，如果变量没有被赋值，那么它的值将为缺省值，而不是 undefined，如果变量被赋值，那么变量的值即为相应的数组元素的值；在 ES6 中，可以使用扩展运算符打包数组中的剩余元素，值得注意的是，扩展运算符必须写在最后一个变量之前，示例如下：

let [a, ...b] = [1, 3, 5];
console.log(a); // 1
console.log(b); // [3, 5]

常用方法

1. splice

将数组从 startIndex 开始，将 replaceCount 个元素替换为 …newElements

splice(startIndex, replaceCount, ...newElements)

示例如下：

let arr = [1, 3, 5];
arr.splice(1, 2, 10, 100);
console.log(arr);   // [1, 10, 100]

如果未提供 …newElements，则表示删除数组从 startIndex 开始的 replaceCount 个元素，示例如下：

let arr = [1, 3, 5, 7];
arr.splice(1, 2);
console.log(arr);   // [1, 7]

2. push

在数组末尾添加一个或若干个 element

arrayLength push(element, element, ..., element)

示例如下：

let arr = [1, 3, 5];
let arrLength = arr.push(7, 9);
console.log(arrLength); // 5
console.log(arr);   // [1, 3, 5, 7, 9]

3. unshift

在数组开始添加一个或若干个 element

arrayLength unshift(element, element, ..., element)

示例如下：

let arr = [5, 7, 9];
let arrLength = arr.unshift(3, 1);
console.log(arrLength); // 5
console.log(arr);   // [1, 3, 5, 7, 9]

4. pop

删除数组末尾的一个元素

deletedElement pop()

示例如下：

let arr = [1, 3, 5];
let delElement = arr.pop();
console.log(delElement);    // 5
console.log(arr);   // [1, 3]

5. shift

删除数组开始的一个元素

deletedElement shift()

示例如下：

let arr = [1, 3, 5];
let delElement = arr.shift();
console.log(delElement);    // 1
console.log(arr);   // [3, 5]

6. toString

将数组转换为字符串

string toString()

示例如下：

let arr = [1, 2, 3, 4, 5];
let str = arr.toString();
console.log(str);
console.log(typeof str);

7. join

将数组以指定的 delimiter 分隔为字符串，如果没有传入参数，那么结果与 toString 方法相同

string join(delimiter)

示例如下：

let arr = [1, 2, 3];
let str = arr.join('+');
console.log(str);   // 1+2+3

8. concat

将调用此方法的数组拷贝一份，然后将 array 拼接到拷贝数组的末尾，返回此拷贝数组（即不会修改原来的数组）

array concat(array)

示例如下：

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3);  // [1, 3, 5, 2, 4, 6]

值得注意的是，不可以使用 + 运算符拼接数组，因为它会将两个数组先转换为字符串，然后以字符串的方式拼接，示例如下：

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr3 = arr1 + arr2;
console.log(arr3);  // 1,3,52,4,6
console.log(typeof arr3);   // string

在 ES6 中，还可以使用如下方法拼接两个数组，示例如下：

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr3 = [...arr1, ...arr2];

// 扩展运算符如果在赋值运算符左侧，表示将剩余的数据打包成一个新的数组
// 扩展运算符如果在赋值运算符右侧，表示将数组的数据解包至运算符所在位置

9. reverse

将数组的内容翻转

let arr = [1, 2, 3, 4, 5];
let res = arr.reverse();
console.log(arr);   // [5, 4, 3, 2, 1]
console.log(res);   // [5, 4, 3, 2, 1]

值得注意的是，reverse 方法会修改原来的数组

10. slice

截取数组中 [startIndex, endIndex) 范围内的元素为一个数组，返回此数组

array slice(startIndex, endIndex)

示例如下：

let arr = [1, 2, 3, 4, 5];
let res = arr.slice(1, 3);
console.log(arr);   // [1, 2, 3, 4, 5]
console.log(res);   // [2, 3]

11. indexOf

在数组中，从指定的 startIndex 开始向后查找 searchElement 的位置，如果存在返回 index，否则返回 -1

index indexOf(searchElement, startIndex)

示例如下：

let arr = [1, 2, 3, 4, 5, 3];
let res = arr.indexOf(3);
console.log(res);   // 2
res = arr.indexOf(6);
console.log(res);   // -1
res = arr.indexOf(3, 3);
console.log(res);   // 5

12. lastIndexOf

在数组中，从指定的 startIndex 开始向前查找 searchElement 的位置，如果存在返回 index，否则返回 -1

index lastIndexOf(searchElement, startIndex)

示例如下：

let arr = [1, 2, 3, 4, 5, 3];
let res = arr.lastIndexOf(3);
console.log(res);   // 5
res = arr.lastIndexOf(6);
console.log(res);   // -1
res = arr.lastIndexOf(3, 3);
console.log(res);   // 2

13. includes

在数组中，查找 searchElement 是否存在，如果存在则返回 true，否则返回 false

bool includes(searchElement)

示例如下：

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2));   // true
console.log(arr.includes(6));   // false

14. fill

将数组中的所有元素都填充为 element

fill(element)

示例如下：

let arr = [true, null, undefined];
arr.fill(0);
console.log(arr);   // [0, 0, 0]

补充内容

1. 清空数组

let arr = ['a', 'b', 'c'];
arr = [];
arr.length = 0;
arr.splice(0, arr.length);

2. split

将字符串以指定的 delimiter 分割为若干个子字符串，组织为一个数组返回

array split(delimiter)

示例如下：

let input = prompt("请输入 4 个整数");  // 2,4,6,8
let inputArray = input.split(',');
console.log(inputArray);    // ["2","4","6","8"]

二维数组

示例如下：

let arr = [[1, 3, 5], [2, 4, 6]];

console.log(arr[0]);    // [1, 3, 5]
console.log(arr[1]);    // [2, 4, 6]

console.log(arr[0][0]); // 1
console.log(arr[1][1]); // 4

for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
        console.log(arr[i][j]);
    }
    console.log("\n");
}

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