【前端(十三)】JavaScript 数组与字符串笔记

文章目录

[JavaScript 数组与字符串笔记](#JavaScript 数组与字符串笔记)
- 一、数组（Array）
- - [1.1 定义](#1.1 定义)
  - [1.2 特点](#1.2 特点)
  - [1.3 查询与索引访问](#1.3 查询与索引访问)
  - [1.4 修改与赋值](#1.4 修改与赋值)
  - [1.5 length 属性与 empty](#1.5 length 属性与 empty)
  - [1.6 删除元素](#1.6 删除元素)
  - [1.7 常用方法精讲](#1.7 常用方法精讲)
  - - [📌 添加元素](#📌 添加元素)
    - [📌 截取与合并](#📌 截取与合并)
    - [📌 查找元素](#📌 查找元素)
    - [📌 遍历](#📌 遍历)
    - [📌 排序与反转](#📌 排序与反转)
    - [📌 数组转字符串](#📌 数组转字符串)
- 二、字符串（String）
- - [2.1 定义](#2.1 定义)
  - [2.2 特点](#2.2 特点)
  - [2.3 索引访问（只读）](#2.3 索引访问（只读）)
  - [2.4 拼接与模板字符串](#2.4 拼接与模板字符串)
  - [2.5 常用方法精讲](#2.5 常用方法精讲)
  - - [📌 截取](#📌 截取)
    - [📌 查找与判断](#📌 查找与判断)
    - [📌 修改（生成新串）](#📌 修改（生成新串）)
    - [📌 分割与拼接](#📌 分割与拼接)
    - [📌 填充](#📌 填充)
- [三、JavaScript 与 Java 核心差异对比](#三、JavaScript 与 Java 核心差异对比)

JavaScript 数组与字符串笔记

一、数组（Array）

1.1 定义

语法格式

javascript 复制代码

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

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

例子

javascript 复制代码

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

1.2 特点

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

1.3 查询与索引访问

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

javascript 复制代码

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

1.4 修改与赋值

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

javascript 复制代码

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 可直接修改来截断或扩展数组：

javascript 复制代码

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 是一个真实的值，遍历时不会被跳过

javascript 复制代码

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 造成稀疏数组。

javascript 复制代码

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	是

javascript 复制代码

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)`	删除/插入/替换，万能修改器	是

javascript 复制代码

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)`	返回第一个满足条件的元素	❌ 否

javascript 复制代码

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

📌 遍历

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

javascript 复制代码

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()`	反转顺序	是

javascript 复制代码

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()`	默认用逗号连接	❌ 否

javascript 复制代码

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

二、字符串（String）

2.1 定义

javascript 复制代码

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

2.2 特点

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

2.3 索引访问（只读）

javascript 复制代码

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

2.4 拼接与模板字符串

传统拼接 ：使用 + 运算符

javascript 复制代码

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

模板字符串 ：使用反引号

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

javascript 复制代码

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

2.5 常用方法精讲

📌 截取

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

javascript 复制代码

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

javascript 复制代码

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()`	去除两端空格	新字符串

javascript 复制代码

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

📌 分割与拼接

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

javascript 复制代码

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

📌 填充

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

javascript 复制代码

'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()` 深度比较

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