JavaScript Arrays

学习目标

理解 JavaScript 中数组的基本概念与特性
掌握创建数组的两种主要方式及其区别
熟练使用数组的常见操作（访问、修改、增删、遍历等）
能够正确判断一个变量是否为数组类型
避免常见的数组使用误区（如 new Array(5) 的陷阱）

什么是 JS 数组

在 JavaScript 中，数组（Array） 是一个有序的值列表。每个值称为元素（element），并被分配一个从 0 开始的数字位置，称为索引（index）。

数组非常灵活，可以存储任意类型的数据，包括：

数字（number）
字符串（string）
对象（object）
其他数组（嵌套数组）
函数（function）等

示例场景：
假设你要存储一组课程名称（如 "HTML"、"CSS"、"JavaScript"）。如果用单独的变量：
let course1 = "HTML"; let course2 = "CSS"; let course3 = "JavaScript";
当课程数量增加到 300 门时，这种方式将变得极其低效且难以维护。
解决方案：使用数组！

let courses = ["HTML", "CSS", "JavaScript"];

创建数组的两种方式

1. 使用数组字面量（推荐）

使用方括号 [] 直接定义数组，简洁高效。

// 创建空数组
let emptyList = [];
console.log(emptyList); // []

// 创建并初始化数组
let techStack = ["HTML", "CSS", "JS"];
console.log(techStack); // ['HTML', 'CSS', 'JS']

2. 使用 `new Array()`

通过调用 Array 构造函数创建数组。

let tools = new Array("Git", "Webpack", "Vite");
console.log(tools); // ['Git', 'Webpack', 'Vite']

重要提示：
虽然两种方式功能相同，但强烈推荐使用字面量语法，因为它：
更简洁
性能更好
可读性更强
避免构造函数的歧义（见后文“常见误区”）

数组的基本操作

访问数组元素

通过索引（从 0 开始）获取元素。

let langs = ["Python", "Java", "JavaScript"];
console.log(langs[0]); // "Python"
console.log(langs[1]); // "Java"

获取第一个和最后一个元素

let items = ["Apple", "Banana", "Cherry"];

// 第一个元素
let first = items[0];
console.log("First:", first); // First: Apple

// 最后一个元素（使用 length - 1）
let last = items[items.length - 1];
console.log("Last:", last); // Last: Cherry

修改数组元素

直接通过索引赋值即可修改。

let frameworks = ["React", "Vue", "Angular"];
frameworks[1] = "Svelte";
console.log(frameworks); // ['React', 'Svelte', 'Angular']

添加元素

push()：在末尾添加一个或多个元素
unshift()：在开头添加一个或多个元素

let stack = ["HTML", "CSS"];

stack.push("JavaScript");        // 末尾添加
stack.unshift("Web Basics");     // 开头添加

console.log(stack);
// ['Web Basics', 'HTML', 'CSS', 'JavaScript']

删除元素

方法	作用	返回值
`pop()`	删除最后一个元素	被删除的元素
`shift()`	删除第一个元素	被删除的元素
`splice()`	从指定位置删除 / 替换元素	被删除的元素数组

let libs = ["jQuery", "Lodash", "Axios"];

let removedLast = libs.pop();      // 删除 "Axios"
let removedFirst = libs.shift();   // 删除 "jQuery"

console.log(libs); // ['Lodash']

// 使用 splice 删除从索引 0 开始的 1 个元素
libs.splice(0, 1);
console.log(libs); // []

获取数组长度

使用 .length 属性：

let numbers = [1, 2, 3, 4, 5];
console.log("Length:", numbers.length); // Length: 5

动态调整数组长度

可直接设置 .length 来截断或扩展数组。

let colors = ["Red", "Green", "Blue"];

// 扩展到长度 6（新增 3 个空位）
colors.length = 6;
console.log(colors); 
// ['Red', 'Green', 'Blue', <3 empty items>]

// 截断为长度 2
colors.length = 2;
console.log(colors); // ['Red', 'Green']

注意：扩展后的空位在控制台显示为 <n empty items>，实际值为 undefined，但不会占用内存（稀疏数组）。

遍历数组

传统 `for` 循环

let fruits = ["Apple", "Banana", "Orange"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

`forEach()` 方法

fruits.forEach(function(item) {
    console.log(item);
});

// 或使用箭头函数（推荐）
fruits.forEach(item => console.log(item));

其他常用操作

合并数组

返回一个新数组，不修改原数组。

let frontend = ["HTML", "CSS", "JS"];
let backend = ["Node.js", "Express"];

let fullStack = frontend.concat(backend);
console.log(fullStack);
// ['HTML', 'CSS', 'JS', 'Node.js', 'Express']

转换为字符串

将数组元素用逗号连接成字符串。

let tags = ["JS", "Array", "Tutorial"];
console.log(tags.toString()); // "JS,Array,Tutorial"

判断是否为数组

typeof 对数组返回 "object"，因此不能用于准确判断。

let data = ["A", "B"];
console.log(typeof data); // "object" 不可靠

正确方法：

const courses = ["HTML", "CSS", "JavaScript"];

// 方法 1：Array.isArray()
console.log(Array.isArray(courses)); // true

// 方法 2：instanceof
console.log(courses instanceof Array); // true

建议优先使用 Array.isArray()，因为它在跨 iframe 或不同窗口环境中更可靠。

常见误区

误区：[5] 与 new Array(5) 是一样的？

完全不一样！

// 示例 1：字面量 —— 包含一个数字 5
const arr1 = [5];
console.log(arr1); // [5]

// 示例 2：构造函数 —— 创建长度为 5 的空数组！
const arr2 = new Array(5);
console.log(arr2); // [<5 empty items>]

这是新手常犯的错误！
new Array(n) 当只有一个数字参数时，表示创建一个长度为 n 的空数组，而不是包含数字 n 的数组。

安全写法：始终使用字面量，或确保构造函数传入多个参数：

// 安全：明确意图
const safeArr = new Array(5, 10, 15); // [5, 10, 15]

重点总结

操作	方法 / 语法	说明
创建数组	`[]` 或 `new Array()`	推荐使用 `[]`
访问元素	`arr[index]`	索引从 0 开始
获取长度	`arr.length`	可读可写
添加元素	`push()`（末尾）、`unshift()`（开头）
删除元素	`pop()`、`shift()`、`splice()`	`splice` 更灵活
遍历	`for` 循环、`forEach()`
合并数组	`concat()`	返回新数组
判断是否为数组	`Array.isArray(arr)`	比 `typeof` 和 `instanceof` 更可靠
避免陷阱	不要用 `new Array(n)` 表示 `[n]`	易引发逻辑错误

思考题

为什么 typeof [] 返回的是 "object"？这反映了 JavaScript 的什么设计特点？
如果你有一个长度为 1000 的数组，只在索引 999 处赋值了一个元素，其余为空，这种数组叫什么？它对内存有什么影响？
除了 push 和 unshift，还有哪些方法可以在数组中间插入元素？请举例说明。