数组与常用方法

这一课你将能做到

1. 创建数组，用下标读写，用 push 追加，并说出下标从 0 开始的含义
2. 会用 map / filter 从列表「派生」新列表，知道它们不改原数组
3. 知道 sort 会改原数组，数字排序要写比较函数

为什么要学

课程序号、待办、搜索结果——都是一列东西。
数组（Array）就是有序清单：第 0 个、第 1 个……（下标从 0 开始！）

现代前端几乎处处在「把数组变成另一份数组再渲染」。
map/filter 用得越熟，后面学 React 列表渲染越轻松。

先建立图像

const arr = ["HTML", "CSS", "JS"];
下标：       0        1      2
长度：arr.length === 3
最后一个：arr[arr.length - 1]

两类方法要分清：

类型	例子	人话
可能改原数组	push sort splice	动原来的清单
返回新数组	map filter slice toSorted（较新）	派生一份，原清单可不动

scores ──filter(及格)──► pass ──map(加标签)──► labels
原数组是否被改？filter/map：通常不改

跟着做

步骤 1：基础操作

const list = ["HTML", "CSS"];
list.push("JS");          // 末尾加，改原数组
console.log(list[0]);     // "HTML"
console.log(list.length); // 3
console.log(list.at(-1)); // "JS"（现代写法：倒数第一个）

你应看到长度变为 3。记住：越界读取得到 undefined，不会自动报错。

步骤 2：map / filter（超常用）

const scores = [90, 60, 80, 55];

const pass = scores.filter(function (s) {
  return s >= 60; // 留下及格的
});

const labels = pass.map(function (s) {
  return "分数:" + s; // 每一项变成新字符串
});

console.log(pass);   // [90, 60, 80]
console.log(labels); // ["分数:90", ...]
console.log(scores); // 原数组仍在，未被 filter/map 改掉

箭头写法：

const pass2 = scores.filter((s) => s >= 60);
const doubled = scores.map((s) => s * 2);

步骤 3：sort 的坑与安全排序

const nums = [10, 2, 1];
nums.sort(); // 默认按字符串规则排 → 可能变成 [1, 10, 2]
console.log("默认 sort：", nums);

const nums2 = [10, 2, 1];
nums2.sort((a, b) => a - b); // 数字升序
console.log("比较函数：", nums2); // [1, 2, 10]

// 不想改原数据：先复制再排
const nums3 = [10, 2, 1];
const sorted = [...nums3].sort((a, b) => a - b);
console.log("原数组", nums3, "新数组", sorted);