JS数组入门教程：轻松掌握数组操作与应用

本文详细介绍了JS数组的基本概念，包括数组的创建、初始化、常用操作和方法，如push、pop、shift、unshift、slice、splice等，并涵盖了数组的遍历、排序、查找以及深拷贝和浅拷贝等技巧，帮助读者全面掌握JS数组的使用。

数组的基本概念

数组（Array）是一种数据结构，它允许你存储多个值，并且可以使用索引来访问这些值。JavaScript中的数组是一个非常灵活的数据结构，它可以包含不同类型的数据，包括数字、字符串、对象等。数组中的每个元素都是通过一个唯一的索引来标识的，索引从0开始。

创建JS数组的方法

在JavaScript中，创建数组主要有两种方法：使用数组字面量和使用Array构造函数。

使用数组字面量

数组字面量是创建数组最简单和最常用的方法，它使用方括号[]来定义数组。

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

使用Array构造函数

除了数组字面量，还可以使用Array构造函数来创建数组。构造函数有两种常用的语法：一种是传入元素的个数，另一种是传入具体的元素。

let arr1 = new Array(5); // 创建一个长度为5的数组，但元素默认为undefined
let arr2 = new Array(1, 2, 3, 4, 5); // 创建一个包含5个元素的数组

数组的初始化

初始化数组是指在创建数组时赋予初始值。可以使用数组字面量直接初始化，也可以使用Array构造函数。

// 使用数组字面量初始化
let arr1 = [1, 2, 3, 4, 5];

// 使用Array构造函数初始化
let arr2 = new Array(1, 2, 3, 4, 5);

访问数组元素

访问数组元素是通过索引实现的，索引是从0开始的。例如，要访问数组中的第一个元素，可以使用索引0。

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

修改数组元素

修改数组元素也是通过索引实现。例如，要将数组中的第一个元素修改为10。

let arr = [1, 2, 3, 4, 5];
arr[0] = 10;
console.log(arr[0]); // 输出: 10

// 修改数组中的其他元素
arr[2] = 10; // 修改索引为2的元素
console.log(arr); // 输出: [10, 2, 10, 4, 5]

删除和添加元素

删除元素

JavaScript提供了几种删除数组元素的方法，包括delete关键字和splice方法。

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

// 使用delete关键字删除元素
delete arr[2];
console.log(arr); // 输出: [1, 2, <1 empty item>, 4, 5]

// 使用splice方法删除元素
arr.splice(1, 1); // 从索引1开始删除1个元素
console.log(arr); // 输出: [1, 3, 4, 5]

添加元素

JavaScript提供了push、unshift、splice方法来添加元素。

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

// 使用push方法在数组末尾添加元素
arr.push(6);
console.log(arr); // 输出: [1, 2, 3, 4, 5, 6]

// 使用unshift方法在数组开头添加元素
arr.unshift(0);
console.log(arr); // 输出: [0, 1, 2, 3, 4, 5, 6]

// 使用splice方法在指定位置添加元素
arr.splice(2, 0, 'a', 'b');
console.log(arr); // 输出: [0, 1, 'a', 'b', 2, 3, 4, 5, 6]

push() 和 pop() 方法

• push方法用于在数组末尾添加一个或多个元素，返回数组的新长度。
• pop方法用于删除数组末尾的元素，返回删除的元素值。

let arr = [1, 2, 3];

arr.push(4); // 在数组末尾添加元素4
console.log(arr); // 输出: [1, 2, 3, 4]

let lastElement = arr.pop(); // 删除数组末尾的元素，返回4
console.log(lastElement); // 输出: 4
console.log(arr); // 输出: [1, 2, 3]

shift() 和 unshift() 方法

• shift方法用于删除数组的第一个元素，返回删除的元素值。
• unshift方法用于在数组开头添加一个或多个元素，返回数组的新长度。

let arr = [1, 2, 3];

let firstElement = arr.shift(); // 删除数组的第一个元素，返回1
console.log(firstElement); // 输出: 1
console.log(arr); // 输出: [2, 3]

arr.unshift(0); // 在数组开头添加元素0
console.log(arr); // 输出: [0, 2, 3]

slice() 和 splice() 方法

• slice方法用于提取数组的一部分，并返回复制的数组，不修改原数组。
• splice方法用于删除数组的一部分，并可以插入新的元素，修改原数组。

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

let part = arr.slice(1, 3); // 从索引1开始到索引3结束，返回新数组[2, 3]
console.log(part); // 输出: [2, 3]
console.log(arr); // 输出: [1, 2, 3, 4, 5]

arr.splice(2, 1); // 删除从索引2开始的1个元素
console.log(arr); // 输出: [1, 2, 4, 5]

for循环遍历数组基础

使用for循环遍历数组时，可以通过数组的length属性来获取数组的长度，然后通过索引来访问每个元素。

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

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

使用for...of循环遍历数组

for...of循环是一种更简洁的遍历数组的方法，它可以逐个遍历数组中的每个元素，而不需要索引。

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

for (let element of arr) {
    console.log(element);
}

数组排序方法

JavaScript提供了sort方法对数组进行排序，默认情况下，sort方法会按照字符的Unicode编码进行排序。可以传递一个比较函数来自定义排序规则。

let arr = [5, 3, 9, 1, 7];

arr.sort(); // 字符串排序
console.log(arr); // 输出: [1, 3, 5, 7, 9]

arr.sort((a, b) => a - b); // 数字排序
console.log(arr); // 输出: [1, 3, 5, 7, 9]

数组查找方法

查找数组中的特定元素通常使用find或includes方法。

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

let found = arr.find(item => item === 3); // 查找特定元素
console.log(found); // 输出: 3

let isInArray = arr.includes(6); // 检查元素是否存在
console.log(isInArray); // 输出: false

数组的深拷贝与浅拷贝

浅拷贝只是复制了数组的一个副本，并没有复制数组中的元素。对于嵌套数组或者对象类型的元素，浅拷贝会导致复制出来的数组仍然引用原始对象。

let arr1 = [1, 2, 3];
let arr2 = arr1; // 浅拷贝
arr2[0] = 10;
console.log(arr1); // 输出: [10, 2, 3]

let arr3 = arr1.slice(); // 浅拷贝
arr3[0] = 10;
console.log(arr1); // 输出: [10, 2, 3]

let arr4 = [...arr1]; // 浅拷贝
arr4[0] = 10;
console.log(arr1); // 输出: [10, 2, 3]

let arr5 = JSON.parse(JSON.stringify(arr1)); // 深拷贝
arr5[0] = 10;
console.log(arr1); // 输出: [10, 2, 3]
console.log(arr5); // 输出: [10, 2, 3]

数组去重方法

数组去重可以通过循环和Set数据结构来实现。

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

// 使用Set去重
let unique = [...new Set(arr)];
console.log(unique); // 输出: [1, 2, 3, 4, 5]

// 使用循环去重
let unique2 = [];
let map = new Map();
for (let item of arr) {
    if (!map.has(item)) {
        unique2.push(item);
        map.set(item, true);
    }
}
console.log(unique2); // 输出: [1, 2, 3, 4, 5]

数组扁平化方法

数组扁平化是指将嵌套的数组展开成一个一维数组。可以使用递归或循环的方法来实现。

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

// 使用递归扁平化
function flatten(arr) {
    let flat = [];
    for (let item of arr) {
        if (Array.isArray(item)) {
            flat = flat.concat(flatten(item));
        } else {
            flat.push(item);
        }
    }
    return flat;
}

console.log(flatten(arr)); // 输出: [1, 2, 3, 4, 5, 6]

// 使用循环扁平化
function flatten2(arr) {
    let flat = [];
    while (arr.some(Array.isArray)) {
        arr = [].concat(...arr);
    }
    return arr;
}

console.log(flatten2(arr)); // 输出: [1, 2, 3, 4, 5, 6]