JavaScript 数组与字符串笔记

一、数组（Array）

1.1 定义

语法格式

// 字面量（推荐）
let 数组名 = [元素1, 元素2, ...];

// 构造函数（了解）
let 数组名 = new Array();          // 空数组
let 数组名 = new Array(长度);     // 稀疏数组（全是 empty）
let 数组名 = new Array(值1, 值2, ...); // 等价于字面量

例子

let nums = [10, 20, 30];
let mix = [1, 'hello', true, {name:'Tom'}]; // 混合类型

1.2 特点

• 无类型限制：同一个数组可存放任意类型的元素。
• 动态长度：自动伸缩，length 属性可读写。
• 索引从 0 开始，越界访问不会抛出异常，返回 undefined。

1.3 查询与索引访问

直接使用 [ ] 获取元素，支持 at() 负索引：

let arr = [10, 20, 30];
console.log(arr[0]);    // 10
console.log(arr[5]);    // undefined （不抛异常）
console.log(arr.at(-1));// 30

1.4 修改与赋值

赋值可修改已有元素，也可扩容数组。

let arr = [1, 2, 3];

// 修改（索引在 length 范围内）
arr[1] = 100;          // 改变原数组：[1, 100, 3]

// 扩容赋值（索引 ≥ length）
arr[5] = 'hello';      // 改变原数组：[1, 100, 3, empty × 2, 'hello']
                       // length 变为 6

• 修改：索引位于 0 ~ length-1，直接覆盖原值。
• 扩容赋值：索引 ≥ length，数组自动扩展，中间未赋值的索引成为 empty。

1.5 length 属性与 empty

length 可直接修改来截断或扩展数组：

let arr = [1, 2, 3, 4, 5];
console.log(arr.length);  // 5

// 减小 length → 截断数组
arr.length = 2;
console.log(arr);         // [1, 2]

// 增大 length → 增加空位
arr.length = 5;
console.log(arr);         // [1, 2, empty × 3]

什么是 empty？

• empty 不是 undefined，不是 null，也不是 0，它表示数组中的空位（hole）。
• 访问空位时会返回 undefined，但这两者并不相等：
  • empty 是“没有值”的占位，遍历时会被跳过；
  • undefined 是一个真实的值，遍历时不会被跳过

let a = [1, , 3];         // 中间是一个 empty
console.log(a[1]);        // undefined
a.forEach(v => console.log(v)); // 输出 1 和 3，跳过空位

let b = [1, undefined, 3];
b.forEach(v => console.log(v)); // 输出 1、undefined、3

1.6 删除元素

方法	描述	是否改变原数组	示例与结果
delete arr[i]	删除指定索引值，留下 empty	是（length 不变）	delete arr[1] → [1, empty, 3]
splice(start, n)	删除从 start 开始的 n 个元素	是	arr.splice(1,2) → 删除并返回被删元素数组
pop()	删除最后一个元素，返回该元素	是	arr.pop()
shift()	删除第一个元素，返回该元素	是	arr.shift()

⚠️ 日常开发中，用 splice、pop、shift 执行真正删除，避免 delete 造成稀疏数组。

let arr = ['a', 'b', 'c', 'd'];

delete arr[1];           // 变成 ['a', empty, 'c', 'd']，不推荐
arr.splice(1, 2);        // 从索引1删2个，变成 ['a', 'd']
arr.pop();               // 移除 'd'
arr.shift();             // 移除 'a'

1.7 常用方法精讲

📌 添加元素

方法	描述	是否改变原数组
push(...items)	末尾添加，返回新 length	是
unshift(...items)	开头添加，返回新 length	是

let arr = [2, 3];
arr.push(4);      // arr 变成 [2,3,4]
arr.unshift(1);   // arr 变成 [1,2,3,4]

📌 截取与合并

方法	描述	是否改变原数组
slice(start, end)	浅拷贝一段，返回新数组	❌ 否
splice(start, n, ...items)	删除/插入/替换，万能修改器	是

let arr = [1, 2, 3, 4];
let sub = arr.slice(1, 3);  // 返回 [2, 3]，arr 不变

arr.splice(1, 2, 'a');      // arr 变成 [1, 'a', 4]

📌 查找元素

方法	描述	是否改变原数组
indexOf(item)	严格相等查找，返回索引（-1 找不到）	❌ 否
includes(item)	是否包含，返回 boolean	❌ 否
find(callback)	返回第一个满足条件的元素	❌ 否

let arr = [10, 20, 30];
arr.indexOf(20);        // 1
arr.includes(40);       // false
arr.find(x => x > 15);  // 20

📌 遍历

方法	描述	是否改变原数组
forEach(callback)	对每个元素执行回调，无返回值	❌ 不改变原数组（但回调内可修改元素）

let arr = [1, 2, 3];
arr.forEach((v, i) => console.log(i, v));
// 输出 0 1, 1 2, 2 3
// arr 本身不变（除非在回调中赋值 arr[i]=...）

📌 排序与反转

方法	描述	是否改变原数组
sort(compareFn)	排序，默认按字符串顺序	是
reverse()	反转顺序	是

let arr = [1, 2, 10];
arr.sort();                  // [1, 10, 2]（字符串排序）
arr.sort((a, b) => a - b);  // [1, 2, 10]（数字升序）
arr.reverse();              // [10, 2, 1]

📌 数组转字符串

方法	描述	是否改变原数组
join(分隔符)	将数组用分隔符连接成字符串	❌ 否
toString()	默认用逗号连接	❌ 否

[1, 2, 3].join('-');   // '1-2-3'
[1,2,3].toString();  // '1,2,3'

---

二、字符串（String）

2.1 定义

let s1 = 'hello';
let s2 = "world";
let s3 = `模板字符串`; // 支持多行与嵌入变量

2.2 特点

• 不可变：任何操作都返回新字符串，原字符串不会改变。
• 类数组索引：可用 [index] 或 charAt(index) 读取单个字符，但只能读。

2.3 索引访问（只读）

let str = 'JavaScript';
console.log(str[0]);   // 'J'
console.log(str[10]);  // undefined
str[0] = 'j';          // 无效，str 不变

2.4 拼接与模板字符串

传统拼接：使用 + 运算符

let result = 'Hello, ' + name + '!';

模板字符串：使用反引号

• 支持多行字符串，直接换行即可；
• 变量或表达式用 ${} 嵌入。

let multi = `第一行
第二行`; // 保留换行

2.5 常用方法精讲

📌 截取

方法	描述	返回
slice(start, end)	截取 [start, end)，支持负索引	新字符串

let s = 'JavaScript';
s.slice(0, 4);   // 'Java'
s.slice(-6);     // 'Script'（从倒数第6到末尾）

📌 查找与判断

方法	描述	返回
indexOf(sub)	查找子串首次出现位置	索引或 -1
includes(sub)	判断是否包含子串	boolean
startsWith(sub)	是否以 sub 开头	boolean
endsWith(sub)	是否以 sub 结尾	boolean

let s = 'hello world';
s.indexOf('o');       // 4
s.includes('world');  // true
s.startsWith('he');   // true

📌 修改（生成新串）

方法	描述	返回
replace(old, new)	替换第一个匹配；可用正则全局替换	新字符串
replaceAll(old, new)	替换所有匹配	新字符串
toLowerCase()	全小写	新字符串
toUpperCase()	全大写	新字符串
trim()	去除两端空格	新字符串

let s = '  JS  ';
s.trim();              // 'JS'
'apple, apple'.replaceAll('apple', 'orange'); // 'orange, orange'

📌 分割与拼接

方法	描述	返回
split(分隔符)	将字符串拆为数组	数组
数组的 join()	将数组拼回字符串	字符串

'2025-01-01'.split('-');  // ['2025','01','01']
['a','b','c'].join('');   // 'abc'

📌 填充

方法	描述	返回
padStart(len, str)	在前填充至指定长度	新字符串
padEnd(len, str)	在后填充至指定长度	新字符串

'5'.padStart(3, '0');  // '005'
'ab'.padEnd(5, '!');   // 'ab!!!'

---

三、JavaScript 与 Java 核心差异对比

对比维度	JavaScript	Java
数组类型	元素可混合，无固定类型	强类型，元素必须同一类型
数组长度	动态伸缩，length 属性可读写	长度固定，length 只读
越界访问	返回 undefined，不抛异常	抛出 ArrayIndexOutOfBoundsException
直接索引赋值扩容	支持，索引≥length 时自动扩容	不支持，只能修改现有索引
数组删除	splice、pop、shift 直接删除	无内置直接删除，需用集合类
字符串不可变性	是，所有操作返回新串	是，String 不可变
字符访问	str[i] 直接读（只读）	必须 charAt(i)
字符串比较	=== 直接比值	equals() 比较内容，== 比较引用
数组排序	默认按字符串排序	基本类型自然排序，对象需 Comparator
内容相等	数组内容比较不能直接用 ==	Arrays.equals() 深度比较

---

以上为个人学习总结，旨在梳理个人理解。如有疏漏或不当之处，欢迎指正与交流。