JavaScript数组Array常用方法详解与使用指南
本文详细解析JavaScript中Array对象的常用方法，涵盖join、reverse、sort、concat、slice、splice、push/pop及unshift/shift等核心操作。重点讲解排序比较函数的编写、数组片段截取与修改、栈式操作及字符串转换，帮助开发者掌握数组处理技巧。
JavaScript数组方法概述
ECMAScript 3标准在Array.prototype中定义了一系列实用的数组操作函数，这使得这些函数可以直接作为任何数组实例的方法进行调用。
数组连接与顺序反转
1、Array.join()方法
Array.join()方法负责将数组中的所有元素转换为字符串，并将它们连接成一个完整的字符串后返回。该方法支持一个可选参数，用于指定分隔符；若未提供分隔符，则默认使用逗号进行分隔。需要注意的是，此操作不会修改原始数组。
var arr = ['a', 'b', 'c'];
console.log(arr.join()); // a,b,c
console.log(arr.join(" ")); // a b c
console.log(arr.join("")); // abc
console.log(arr.join("slf")); // aslfbslfc
var arr2 = new Array(10);
console.log(arr2.join("-")); // ---------
扩展说明：Array.join()方法的功能与String.split()方法相反，后者是将字符串分割成多个部分以构建一个新数组。
2、Array.reverse()方法
Array.reverse()方法用于将数组中的元素顺序颠倒，并返回逆序后的数组。该方法采用原地替换的方式实现，即直接在原数组中重新排列元素，而不会创建新的数组实例。需要注意的是，此操作会修改原始数组。
var arr = ['a', 'b', 'c'];
console.log(arr.reverse()); // ['c', 'b', 'a']
console.log(arr); // ['c', 'b', 'a']
数组排序技巧
3、Array.sort()方法
Array.sort()方法用于对数组元素进行排序，并返回排序后的数组。当不传入任何参数调用sort()时，数组元素会按照字母表顺序进行排序。需要注意的是，此操作会修改原始数组。
var arr = ['ba', 'b', 'ac'];
console.log(arr.sort()); // ['ac', 'b', 'ba']
console.log(arr); // ['ac', 'b', 'ba']
如果数组中包含undefined元素，这些元素会被放置在排序后数组的末尾。
var arr = new Array(4);
arr[0] = 'ba';
arr[1] = 'b';
arr[2] = 'zc';
arr[3] = undefined;
console.log(arr.sort()); // ['ac', 'b', 'ba', undefined]
console.log(arr); // ['ac', 'b', 'ba', undefined]
若希望以非字母表顺序进行排序，必须向sort()方法传递一个比较函数。该函数用于决定两个参数在排序结果中的相对位置：若第一个参数应排在前面，函数应返回小于0的值；若第一个参数应排在后面，函数应返回大于0的值；若两者相等（顺序无关），则返回0。例如，若需按数值大小而非字母顺序排序，可参考以下代码：
var arr = new Array(4);
arr[0] = 45;
arr[1] = 12;
arr[2] = 103;
arr[3] = 24;
console.log(arr.sort()); // [103, 12, 24 45]
console.log(arr.sort(function(a, b){return b-a;})); // [103, 45, 24, 12]
有时需要对字符串数组进行不区分大小写的字母表排序，此时可使用比较函数，先将参数转换为小写字符串（利用toLowerCase()方法），再进行比较。
var arr = ['abc', 'Def', 'BoC', 'FED'];
console.log(arr.sort()); // ["BoC", "Def", "FED", "abc"]
console.log(arr.sort(function(s, t){
var a = s.toLowerCase();
var b = t.toLowerCase();
if (a < b) return -1;
if (a > b) return 1;
return 0;
})); // ["abc", "BoC", "Def", "FED"]
数组组合与片段截取
4、Array.concat()方法
Array.concat()方法用于创建并返回一个新数组，其元素包括调用该方法的原始数组元素以及concat()方法的所有参数。如果参数中包含数组，则连接的是数组内的元素而非数组本身。需注意，concat()不会递归扁平化嵌套数组。需要注意的是，此操作不会修改原始数组。
var arr = ['abc', 'Def', 'BoC', 'FED'];
console.log(arr.concat(1, 2)); // ["abc", "Def", "BoC", "FED", 1, 2]
console.log(arr.concat(1, 2, [4, 5])); // ["abc", "Def", "BoC", "FED", 1, 2, 4, 5]
console.log(arr.concat(1, 2, [4, ['slf', 5]])); // ["abc", "Def", "BoC", "FED", 1, 2, 4, Array[2]]
console.log(arr); // ["abc", "Def", "BoC", "FED"]
5、Array.slice()方法
Array.slice()方法用于返回指定数组的一个片段或子数组。其两个参数分别指定了片段的起始和结束位置。返回的数组包含从起始位置到结束位置（不含结束位置）之间的所有元素。若仅指定一个参数，则返回从该位置到数组末尾的所有元素。若参数为负数，则表示相对于数组末尾的位置，例如-1代表最后一个元素，-3代表倒数第三个元素。需要注意的是，此操作不会修改原始数组。
var arr = ['abc', 'Def', 'BoC', 'FED', 'slf'];
console.log(arr.slice(1, 2)); // ["Def"]
console.log(arr.slice(3)); // ["FED", 'slf']
console.log(arr.slice(0, -1)); // ['abc', 'Def', 'BoC', 'FED']
console.log(arr.slice(-3, -1)); // ['BoC', 'FED']
console.log(arr); // ['abc', 'Def', 'BoC', 'FED', 'slf']
数组元素的插入与删除
6、Array.splice()方法
Array.splice()是数组中用于插入或删除元素的通用方法。需注意，splice()与slice()名称相似但功能截然不同。splice()能够从数组中删除元素、插入新元素，或同时执行这两种操作。在插入或删除点之后的元素索引值会根据需要调整，以保持数组其余部分的连续性。splice()的第一个参数指定插入或删除的起始位置，第二个参数指定要删除的元素数量。若省略第二个参数，则从起始点到数组末尾的所有元素都将被删除。splice()返回一个由被删除元素组成的数组，若无删除操作则返回空数组。需要注意的是，此操作会修改原始数组（与concat()不同，splice()插入的是数组本身而非其元素）。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.splice(7)); // [8, 9]
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]
console.log(arr.splice(2, 4)); // [3, 4, 5]
console.log(arr); // [1, 2, 7]
console.log(arr.splice(2, 1, 3, 4, 5, 6)); // [7]
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arr.splice(3, 2, 3, [1, 2, 3])); // [4, 5]
console.log(arr); // [1, 2, 3, [1, 2, 3], 6]
栈式数组操作
7、Array.push()和Array.pop()方法
push()和pop()方法允许将数组当作栈来使用。push()方法在数组尾部添加一个或多个元素，并返回数组的新长度。pop()方法则相反：它删除数组的最后一个元素，减小数组长度并返回被删除的值。需要注意的是，这两个方法都会修改原始数组。
var arr = [1, 2, 3];
console.log(arr.push(7)); // 4
console.log(arr); // [1, 2, 3, 7]
console.log(arr.push([2, 4])); // 5
console.log(arr); // [1, 2, 3, 7, [2, 4]]
console.log(arr.pop()); // [2, 4]
console.log(arr); // [1, 2, 3, 7]
头部元素操作
8、Array.unshift()和Array.shift()方法
unshift()和shift()方法的行为与push()和pop()类似，区别在于前者在数组头部进行元素的插入和删除操作。unshift()在数组头部添加一个或多个元素，并将已存在的元素移动到更高索引位置以腾出空间，最后返回数组的新长度。shift()删除第一个元素并返回该元素，随后将所有后续元素向前移动一个位置以填补空缺。需要注意的是，这两个方法都会修改原始数组。
var arr = [6, 2, 3, 4, 5, 6];
console.log(arr.shift()); // 6
console.log(arr); // [2, 3, 4, 5, 6]
console.log(arr.unshift(['a', 'b'])); // 6
console.log(arr); // [['a', 'b'], 2, 3, 4, 5, 6]
console.log(arr.unshift('a', 'b')); // 8
console.log(arr); // ['a', 'b', ['a', 'b'] 2, 3, 4, 5, 6]
需注意，当使用多个参数调用unshift()时，若参数是一次性插入而非逐个插入，则最终数组中插入元素的顺序与它们在参数列表中的顺序一致。若元素是逐个插入的，其顺序则相反。
var arr = [6, 2, 3, 4, 5, 6];
console.log(arr.unshift('a', 'b', 'c')); // 9
console.log(arr); // ['a', 'b', 'c', 6, 2, 3, 4, 5, 6]
console.log(arr.unshift(1)); // 10
console.log(arr); // [1, 'a', 'b', 'c', 6, 2, 3, 4, 5, 6]
console.log(arr.unshift(2)); // 11
console.log(arr); // [2, 1, 'a', 'b', 'c', 6, 2, 3, 4, 5, 6]
数组字符串转换
9、Array.toString()和Array.toLocaleString()方法
数组与其他JavaScript对象一样拥有toString()方法。针对数组，该方法将每个元素转换为字符串，并输出由逗号分隔的字符串列表。需要注意的是，此操作不会修改原始数组（这与不使用任何参数调用join()方法返回的字符串结果相同）。
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
console.log(typeof(arr.toString())) // string
console.log(arr); // [1, 2, 3]扩展说明：toLocaleString()是toString()方法的本地化版本。它调用每个元素的toLocaleString()方法将元素转换为字符串，并使用本地化的分隔符将这些字符串连接起来，生成最终的字符串。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00