JavaScript Array 常用方法实战指南：零基础也能轻松掌握（附蓝桥杯备赛技巧）

数组是 JavaScript 开发中最核心的数据结构之一，灵活运用数组方法能让代码更简洁高效。本文结合一段实战代码，逐一讲解 12 个常用 Array 方法的用法、特性及注意事项，并通过表格汇总帮助你快速掌握。无论你是零基础入门，还是备战蓝桥杯 Web 应用开发赛项，这份指南都能助你一臂之力。

一、代码实战与方法解析

先看这段包含 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 个）

三、方法汇总表格

方法名	作用	语法	参数说明	返回值	是否改变原数组
	末尾添加元素		要添加的元素（可多个）	新数组长度	是
	开头添加元素		要添加的元素（可多个）	新数组长度	是
	删除末尾元素		无	被删除的元素	是
	删除开头元素		无	被删除的元素	是
	反转数组顺序		无	反转后的数组	是
	数组排序		（可选）：自定义排序函数	排序后的数组	是
	查找元素首次索引		：要查找的元素；（可选）：开始索引	首次索引，无则返回	否
	查找元素末次索引		：要查找的元素；（可选）：开始索引	末次索引，无则返回	否
	遍历数组		：回调函数（value, index, array）；（可选）：this 指向	无	否
	增删改数组（万能方法）		：开始索引；：删除数量；：添加元素	被删除元素组成的数组	是
	连接数组		要连接的数组（可多个）	连接后的新数组	否
	截取数组		：开始索引；（可选）：结束索引	截取后的新数组	否

小贴士：在蓝桥杯 Web 应用开发备赛中，数组操作题常考察这些方法的组合使用。例如，先用 sort() 排序，再用 slice() 截取前 N 个元素，或者结合 forEach() 和 splice() 实现复杂的数据处理逻辑。建议在本地环境中反复练习，并尝试用不同方法解决同一问题，加深理解。

[AFFILIATE_SLOT_1]

四、总结与实战建议

掌握这 12 个常用数组方法是 JavaScript 开发的基础。在日常编码中，可以参考以下原则快速选择方法：

• 增删改：优先用 push()/pop()/shift()/unshift()/splice()；
• 查：用 indexOf()/lastIndexOf()/forEach()；
• 排序：用 sort()（注意数字排序需传比较函数）；
• 遍历：用 forEach()（无返回值）；
• 连接：用 concat()（不改变原数组）；
• 截取：用 slice()（不改变原数组）。

进阶提示：如果你已经熟悉这些基础方法，可以进一步学习 map()、filter()、reduce() 等更强大的高阶函数。它们在现代 JavaScript 开发中应用广泛，尤其在 React、Vue 等前端框架中频繁出现。此外，了解其他语言（如 Python 的列表推导式、Java 的 Stream API、Go 的切片操作）的数组处理方式，也能帮助你触类旁通，提升编程思维。

[AFFILIATE_SLOT_2]

建议通过多练习来巩固：尝试用这些方法实现数组去重、数组扁平化、数组交集等常见算法题。如果正在备战蓝桥杯，尤其要关注 Web 应用开发赛题中与数据处理相关的场景，熟练运用数组方法能让你在比赛中事半功倍。加油！

push()array.push(item1,...)unshift()array.unshift(item1,...)pop()array.pop()shift()array.shift()reverse()array.reverse()sort()array.sort(compareFn)compareFnindexOf()array.indexOf(item, start)itemstart-1lastIndexOf()array.lastIndexOf(item, start)itemstart-1forEach()array.forEach(fn, thisValue)fnthisValuesplice()array.splice(start, deleteCount,...)startdeleteCountitem...concat()array.concat(arr1, arr2,...)slice()array.slice(start, end)startend