Skip to content

数组

1. 数组

与 C 的数组不同,JavaScript 的数组长度可变,且类型混合,即同一个数组里可以同时放数字、字符串、对象,甚至另一个数组。

  • 数组的 length 元素返回最大索引+1(不一定等于元素个数)

1.1 创建与访问

// 创建一个空数组
let arr1 = new Array();
// 或者
let arr2 = [];

// 创建一个包含不同类型的数组
const mixed = [100, "Hello", true, { name: "Gemini" }];

// 1. 访问元素 (索引从 0 开始)
console.log(mixed[0]); // 100
console.log(mixed[1]); // "Hello"

// 2. 获取长度
console.log(mixed.length); // 4

// 3. 修改元素
mixed[1] = "World";
console.log(mixed); // [100, "World", true, {...}]

1.2 增删改查

A. 尾部操作 (最常用,性能最好)

  • push(item): 在末尾添加一个或多个元素。

  • pop(): 移除末尾的一个元素,并返回它。

const stack = [1, 2];
stack.push(3); // [1, 2, 3]
stack.pop();   // 返回 3,数组变回 [1, 2]

B. 头部操作 (性能稍差,因为要移动后面所有人)

  • unshift(item): 在开头添加一个或多个元素。

  • shift(): 移除开头的一个元素。

const queue = [1, 2];
queue.unshift(0); // [0, 1, 2]
queue.shift();    // 返回 0,数组变回 [1, 2]

C. 万能修改器:splice

  • splice(start操作位置, count删除元素数量, items...可选,插入新元素列表): 用于在数组中间删除、插入或替换元素。注意:它会修改原数组。
const colors = ["Red", "Green", "Blue"];

// 从索引 1 开始,删除 0 个,插入 "Yellow"
colors.splice(1, 0, "Yellow");
// 结果: ["Red", "Yellow", "Green", "Blue"]

// 从索引 2 开始,删除 1 个 (删掉 Green)
colors.splice(2, 1);
// 结果: ["Red", "Yellow", "Blue"]

1.3 切片与合并 (不修改原数组)

这些方法很像字符串的方法,它们返回新数组,不改变原来的。

  • slice(start, end): 切取数组的一部分。

  • concat(arr2): 合并两个数组。

const nums = [10, 20, 30, 40, 50];

// 提取中间一段 (含头不含尾)
const sub = nums.slice(1, 3); // [20, 30]
console.log(nums); // 原数组不变: [10, 20, 30, 40, 50]

1.4 现代数组迭代 (ES6+)

A. forEach - 仅仅是遍历

代替传统的 for 循环,做一些操作,没有返回值。

const names = ["Alice", "Bob"];
names.forEach(name => {
    console.log("Hello, " + name);
});

B. map - 变形

将数组里的每一项都“映射”成新东西,返回一个新数组。

const prices = [10, 20, 30];
// 所有价格打九折
const salePrices = prices.map(price => price * 0.9);
console.log(salePrices); // [9, 18, 27]

C. filter - 筛选

保留符合条件的元素,扔掉不符合的,返回一个新数组。

const scores = [88, 55, 92, 40, 76];
// 筛选出及格的分数 (>= 60)
const passed = scores.filter(score => score >= 60);
console.log(passed); // [88, 92, 76]

1.5 数组与字符串的转换

  • join(separator): 数组 -> 字符串

  • split(separator): 字符串 -> 数组 (这是 String 的方法,但常配合使用)

const arr = ["HTML", "CSS", "JS"];
const str = arr.join("-"); // "HTML-CSS-JS"