零基础快速入门前端JavaScript Array 常用方法详解与实战(可用于备赛蓝桥杯Web应用开发)

数组是 JavaScript 开发中最核心的数据结构之一，灵活运用数组方法能让代码更简洁高效。本文将结合一段实战代码，逐一讲解 12 个常用 Array 方法的用法、特性及注意事项，并通过表格汇总帮助你快速掌握。

一、代码实战与方法解析

先看这段包含 12 个数组方法的代码，我们逐行解析每个方法的作用：

// Array对象
var array1 = ["a", "s", "d", "f"];

// 1. push()：末尾添加元素
array1.push("ggx", "ggx1");

// 2. unshift()：开头添加元素
array1.unshift('ggx0');

// 3. pop()：删除末尾元素
array1.pop();

// 4. shift()：删除开头元素
array1.shift();

console.log(array1); // 输出：["a", "s", "d", "f", "ggx"]

// 5. reverse()：反转数组
var array2 = array1.reverse();
console.log(array2); // 输出：["ggx", "f", "d", "s", "a"]

// 6. sort()：数组排序
var arr = [1, 3, 2, 4, 6, 5];
console.log(arr.sort()); // 输出：[1, 2, 3, 4, 5, 6]

// 7. indexOf()：查找元素首次出现的索引
var index = array1.indexOf("a");
console.log(index); // 输出：4

// 8. lastIndexOf()：查找元素末次出现的索引
var index1 = array1.lastIndexOf("s");
console.log(index1); // 输出：3

// 9. forEach()：遍历数组
var person = { name: "ggxxxx", age: 18 }
array1.forEach(function (value, index) {
    console.log(value);    // 输出数组元素
    console.log(index);    // 输出元素索引
    console.log(this.name); // 输出："ggxxxx"（this指向person）
}, person)

// 10. splice()：增删改数组
array2.splice(0, 2, "CFK", "FUCK", "CXK");
console.log(array2); // 输出：["CFK", "FUCK", "CXK", "d", "s", "a"]

// 11. concat()：连接数组
console.log(arr.concat(array2)); // 输出：[1,2,3,4,5,6,"CFK","FUCK","CXK","d","s","a"]

// 12. slice()：截取数组
var array3 = array2.slice(0, 3);
console.log(array3); // 输出：["CFK", "FUCK", "CXK"]

二、12 个数组方法详细讲解

1. push ()：向数组末尾添加元素

• 作用 ：向数组末尾添加一个或多个元素，返回新数组的长度。

• 语法 ：array.push(item1, item2,..., itemX)

• 参数：要添加的元素（可多个）。

• 返回值：新数组的长度。

• 是否改变原数组：是。

示例：

var arr = ["a", "b"];
arr.push("c", "d"); // 返回 4，arr 变为 ["a", "b", "c", "d"]

2. unshift ()：向数组开头添加元素

• 作用 ：向数组开头添加一个或多个元素，返回新数组的长度。

• 语法 ：array.unshift(item1, item2,..., itemX)

• 参数：要添加的元素（可多个）。

• 返回值：新数组的长度。

• 是否改变原数组：是。

示例：

var arr = ["a", "b"];
arr.unshift("x", "y"); // 返回 4，arr 变为 ["x", "y", "a", "b"]

3. pop ()：删除数组末尾元素

• 作用 ：删除数组最后一个元素，返回被删除的元素。

• 语法 ：array.pop()

• 参数：无。

• 返回值：被删除的元素。

• 是否改变原数组：是。

示例：

var arr = ["a", "b", "c"];
arr.pop(); // 返回 "c"，arr 变为 ["a", "b"]

4. shift ()：删除数组开头元素

• 作用 ：删除数组第一个元素，返回被删除的元素。

• 语法 ：array.shift()

• 参数：无。

• 返回值：被删除的元素。

• 是否改变原数组：是。

示例：

var arr = ["a", "b", "c"];
arr.shift(); // 返回 "a"，arr 变为 ["b", "c"]

5. reverse ()：反转数组顺序

• 作用：反转数组中元素的顺序，返回反转后的数组。

• 语法 ：array.reverse()

• 参数：无。

• 返回值：反转后的数组（原数组也会改变）。

• 是否改变原数组：是。

示例：

var arr = [1, 2, 3];
arr.reverse(); // 返回 [3, 2, 1]，arr 也变为 [3, 2, 1]

6. sort ()：数组排序

• 作用 ：对数组元素进行排序，默认按字符串 Unicode 码点排序，返回排序后的数组。

• 语法 ：array.sort(compareFunction)

• 参数：

  • compareFunction（可选）：自定义排序函数，若不传则按 Unicode 码点排序。

• 返回值：排序后的数组（原数组也会改变）。

• 是否改变原数组：是。

注意 ：数字排序需传比较函数，否则会按字符串排序（如 [10, 2] 会变成 [10, 2]，因为 "10" < "2"）。

示例：

// 默认排序（字符串）
var arr1 = [10, 2, 5];
arr1.sort(); // 返回 [10, 2, 5]

// 数字升序排序
var arr2 = [10, 2, 5];
arr2.sort((a, b) => a - b); // 返回 [2, 5, 10]

// 数字降序排序
var arr3 = [10, 2, 5];
arr3.sort((a, b) => b - a); // 返回 [10, 5, 2]

7. indexOf ()：查找元素首次出现的索引

• 作用 ：查找元素在数组中第一次 出现的索引，若不存在则返回 -1。

• 语法 ：array.indexOf(item, start)

• 参数：

  • item：要查找的元素。

  • start（可选）：开始查找的索引（默认从 0 开始）。

• 返回值 ：元素首次出现的索引，不存在则返回 -1。

• 是否改变原数组：否。

示例：

var arr = ["a", "b", "c", "a"];
arr.indexOf("a"); // 返回 0
arr.indexOf("a", 1); // 从索引 1 开始找，返回 3
arr.indexOf("x"); // 返回 -1

8. lastIndexOf ()：查找元素末次出现的索引

• 作用 ：查找元素在数组中最后一次 出现的索引，若不存在则返回 -1。

• 语法 ：array.lastIndexOf(item, start)

• 参数：

  • item：要查找的元素。

  • start（可选）：开始查找的索引（默认从数组末尾开始）。

• 返回值 ：元素末次出现的索引，不存在则返回 -1。

• 是否改变原数组：否。

示例：

var arr = ["a", "b", "c", "a"];
arr.lastIndexOf("a"); // 返回 3
arr.lastIndexOf("a", 2); // 从索引 2 往前找，返回 0

9. forEach ()：遍历数组

• 作用 ：对数组的每个元素执行一次回调函数，无返回值。

• 语法 ：array.forEach(function(value, index, array), thisValue)

• 参数：

  • 回调函数：

    • value：当前元素。

    • index（可选）：当前元素的索引。

    • array（可选）：原数组。

  • thisValue（可选）：回调函数中 this 的指向。

• 返回值：无。

• 是否改变原数组：否（但回调函数可修改原数组）。

示例：

var arr = ["a", "b", "c"];
var obj = { name: "test" };

arr.forEach(function (value, index) {
    console.log(value, index); // 输出：a 0, b 1, c 2
    console.log(this.name);     // 输出：test（this指向obj）
}, obj);

10. splice ()：增删改数组（万能方法）

• 作用 ：向数组中添加、删除或替换元素，返回被删除元素组成的数组。

• 语法 ：array.splice(start, deleteCount, item1, item2,..., itemX)

• 参数：

  • start：开始操作的索引（必填）。

  • deleteCount：要删除的元素数量（必填，0 表示不删除）。

  • item1...：要添加的元素（可选）。

• 返回值：被删除元素组成的数组（若未删除则返回空数组）。

• 是否改变原数组：是。

示例：

var arr = ["a", "b", "c", "d"];

// 1. 删除：从索引 1 开始，删除 2 个
arr.splice(1, 2); // 返回 ["b", "c"]，arr 变为 ["a", "d"]

// 2. 添加：从索引 1 开始，删除 0 个，添加 "x", "y"
arr.splice(1, 0, "x", "y"); // 返回 []，arr 变为 ["a", "x", "y", "d"]

// 3. 替换：从索引 1 开始，删除 2 个，添加 "m", "n"
arr.splice(1, 2, "m", "n"); // 返回 ["x", "y"]，arr 变为 ["a", "m", "n", "d"]

11. concat ()：连接数组

• 作用 ：连接两个或多个数组，返回新数组（原数组不变）。

• 语法 ：array.concat(array1, array2,..., arrayX)

• 参数：要连接的数组（可多个）。

• 返回值：连接后的新数组。

• 是否改变原数组：否。

示例：

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

var newArr = arr1.concat(arr2, arr3); // 返回 [1,2,3,4,5,6]
// arr1、arr2、arr3 仍保持不变

12. slice ()：截取数组

• 作用 ：从数组中截取指定范围的元素，返回新数组（原数组不变）。

• 语法 ：array.slice(start, end)

• 参数：

  • start：开始截取的索引（必填，包含该索引元素）。

  • end（可选）：结束截取的索引（不包含该索引元素），若不传则截取到数组末尾。

• 返回值：截取后的新数组。

• 是否改变原数组：否。

示例：

var arr = ["a", "b", "c", "d", "e"];

arr.slice(1, 3); // 返回 ["b", "c"]（从索引 1 到 3，不包含 3）
arr.slice(2);    // 返回 ["c", "d", "e"]（从索引 2 到末尾）
arr.slice(-3);   // 返回 ["c", "d", "e"]（负数表示从末尾倒数，-3 即倒数第 3 个）

三、方法汇总表格

|---------------------|-------------|----------------------------------------|--------------------------------------------------------|----------------|---------|
| 方法名 | 作用 | 语法 | 参数说明 | 返回值 | 是否改变原数组 |
| push() | 末尾添加元素 | array.push(item1,...) | 要添加的元素（可多个） | 新数组长度 | 是 |
| unshift() | 开头添加元素 | array.unshift(item1,...) | 要添加的元素（可多个） | 新数组长度 | 是 |
| pop() | 删除末尾元素 | array.pop() | 无 | 被删除的元素 | 是 |
| shift() | 删除开头元素 | array.shift() | 无 | 被删除的元素 | 是 |
| reverse() | 反转数组顺序 | array.reverse() | 无 | 反转后的数组 | 是 |
| sort() | 数组排序 | array.sort(compareFn) | compareFn（可选）：自定义排序函数 | 排序后的数组 | 是 |
| indexOf() | 查找元素首次索引 | array.indexOf(item, start) | item：要查找的元素；start（可选）：开始索引 | 首次索引，无则返回 -1 | 否 |
| lastIndexOf() | 查找元素末次索引 | array.lastIndexOf(item, start) | item：要查找的元素；start（可选）：开始索引 | 末次索引，无则返回 -1 | 否 |
| forEach() | 遍历数组 | array.forEach(fn, thisValue) | fn：回调函数（value, index, array）；thisValue（可选）：this 指向 | 无 | 否 |
| splice() | 增删改数组（万能方法） | array.splice(start, deleteCount,...) | start：开始索引；deleteCount：删除数量；item...：添加元素 | 被删除元素组成的数组 | 是 |
| concat() | 连接数组 | array.concat(arr1, arr2,...) | 要连接的数组（可多个） | 连接后的新数组 | 否 |
| slice() | 截取数组 | array.slice(start, end) | start：开始索引；end（可选）：结束索引 | 截取后的新数组 | 否 |

总结

掌握这 12 个常用数组方法是 JavaScript 开发的基础，建议通过多练习来巩固：

• 增删改 优先用 push/pop/shift/unshift/splice；

• 查 用 indexOf/lastIndexOf/slice；

• 排序 用 sort（注意数字排序需传比较函数）；

• 遍历 用 forEach（无返回值）；

• 连接 用 concat（不改变原数组）