JavaScript 数组操作实战指南：创建、增删改查与排序

数组的创建与索引基础

在 JavaScript 中，数组可以通过构造函数或字面量创建。需要注意的是，数组的索引始终从 0 开始。

第1步：使用 Array 构造函数

目的：通过内置对象实例化数组。
参数：new Array() 可接受无参、单数字或单多元素参数。

// 创建空数组
var colors = new Array();

// 创建包含20项的空数组（预设长度）
var colors = new Array(20);

// 创建包含单个字符串 "Greg" 的数组
var colors = new Array("Greg");

// 创建包含三个字符串的数组
var colors = new Array("red", "blue", "green");

第2步：使用字面量语法

目的：更简洁、推荐的快速初始化方式。
动作：使用方括号 [] 包裹元素。

// 创建包含三个元素的数组
var colors = ["red", "blue", "green"];

// 创建空数组
var colors = [];

长度管理与字符串转换

第1步：操控 length 属性

目的：获取数组项数或动态修改数组末尾内容。
重要参数：length 不是只读的。

• 读取：alert(colors.length) 返回当前项数。
• 截断末尾：将 length 设为较小值可移除末尾项。
  例如 colors.length = 2; 会保留前两项，移除后续项。
• 添加新项：利用 length 作为索引指向下一个空白位。
  例如 colors[colors.length] = "black"; 会在末尾追加新元素。

第2步：join() 连接数组

入口：数组实例方法。
动作：将所有数组元素转换为字符串，并使用指定分隔符连接。

var colors = ["red", "blue", "green"];

// 默认逗号分隔
alert(colors.join(",")); // "red,blue,green"

// 自定义分隔符
alert(colors.join("||")); // "red||blue||green"

栈与队列操作模式

第1步：栈操作 (LIFO - 后进先出)

push()：
- 动作：向数组末尾添加任意数量元素。
- 结果：返回修改后数组的新 length。

pop()：
- 动作：从数组末尾移除最后一项。
- 结果：返回被移除的元素，length 减 1。

var colors = new Array();
var count = colors.push("red", "green"); // count: 2
var count = colors.push("black");        // count: 3
var item = colors.pop();                 // item: "black"
// colors 变为 ["red", "green"]

第2步：队列操作 (FIFO - 先进先出) & unshift

shift()：
- 动作：移除数组中的第一项。
- 结果：返回被移除的元素，所有其他项向前移动一位。

unshift()：
- 动作：在数组前端添加任意数量元素。
- 结果：返回新数组的 length。

var colors = []; 
colors.push("red", "green", "black");

// FIFO: 移除队首
var item = colors.shift(); // item: "red"
// colors 变为 ["green", "black"]

// LIFO 前端插入
var count = colors.unshift("blue"); // count: 3
// colors 变为 ["blue", "green", "black"]

重排序与反转

第1步：reverse() 反转

动作：直接反转数组项的顺序，不依赖比较函数。

var values = [1, 2, 3, 4, 5];
values.reverse(); // 变为 [5, 4, 3, 2, 1]

第2步：sort() 排序

注意：sort() 默认按字符串 Unicode 编码进行升序排列，这可能导致数字排序异常（如 10 排在 2 前面）。需传入比较函数进行数值排序。

通用比较函数写法：

function compare(value1, value2) {
    if (value1 < value2) return -1;
    else if (value1 > value2) return 1;
    else return 0;
}

数值升序简写：

function compare(value1, value2) {
    return value1 - value2; // 升序
    // return value2 - value1; // 降序
}

应用：

var values = [0, 1, 5, 15, 20, 10];
values.sort(compare); // 正确排序为 [0, 1, 5, 10, 15, 20]

核心集合修改方法：concat, slice, splice

这三个方法在处理数组子集和合并时极易混淆，关键在于理解它们是否修改原数组。

第1步：concat() 合并数组

动作：基于当前数组创建一个新数组，并将参数添加到末尾。
结果：原数组不变，返回新数组。若参数是数组，会被扁平化展开。

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);

// colors 仍为 ["red", "green", "blue"]
// colors2 为 ["red", "green", "blue", "yellow", "black", "brown"]

第2步：slice() 截取片段

动作：返回从起始位置到结束位置的浅拷贝数组。
参数：start（必选），end（可选，不包含该位置）。若无参数则复制全部；若负数则从末尾算起。
结果：不改变原数组。

var colors = ["red", "green", "blue", "yellow", "black"];

// 从索引1截取到末尾
var colors2 = colors.slice(1); // ["green", "blue", "yellow", "black"]

// 从索引1截取到索引4（不含4）
var colors3 = colors.slice(1, 4); // ["green", "blue", "yellow"]

第3步：splice() 插入、删除与替换

动作：强烈改变原数组，主要用于灵活修改数组结构。
参数：start（起始位置），deleteCount（删除项数），items...（要插入的项）。

1. 插入：设置 deleteCount = 0。

   var colors = ["red", "green", "blue"];
   var inserted = colors.splice(1, 0, "yellow", "orange");
   // colors: ["red", "yellow", "orange", "green", "blue"]
   // inserted: [] (空数组，因为未删除)

2. 删除：不提供插入项。

   var removed = colors.splice(1, 1); // 从位置1删除1项
   // colors: ["red", "blue"]
   // removed: ["green"]

3. 替换：删除项数 > 0 且提供插入项。

   var colors = ["red", "green", "blue"];
   var replaced = colors.splice(1, 1, "black", "brown");
   // colors: ["red", "black", "brown", "blue"]
   // replaced: ["green"] (被替换掉的旧项)

以上就是 JavaScript 数组常见操作的详细内容，更多关于 JavaScript 基础教程的资料请关注本站其它相关文章！