盘点 JS 数组和字符串的核心方法,我会按「常用场景 + 功能分类」整理,每个方法标注作用 + 示例 + 关键说明,既好记又能直接用,适合复习和开发时快速查阅。
一、数组(Array)方法
数组方法是 JS 高频考点,按「增删改查、遍历、转换、排序 / 过滤 / 聚合」分类,重点标⭐️
1. 增删改查(修改原数组)
| 方法 | 作用 | 示例 | 关键说明 |
|---|
⭐️ push() | 末尾添加元素 | [1,2].push(3) → [1,2,3] | 返回新长度,修改原数组 |
⭐️ pop() | 末尾删除元素 | [1,2,3].pop() → 3 | 返回删除的元素,修改原数组 |
⭐️ unshift() | 头部添加元素 | [2,3].unshift(1) → [1,2,3] | 返回新长度,修改原数组 |
⭐️ shift() | 头部删除元素 | [1,2,3].shift() → 1 | 返回删除的元素,修改原数组 |
⭐️ splice(start, delNum, ...add) | 任意位置增删改 | [1,2,3].splice(1,1,4) → [1,4,3] | 返回删除的元素,修改原数组 |
fill(val, start, end) | 填充数组 | [1,2,3].fill(0, 1, 2) → [1,0,3] | 修改原数组 |
2. 遍历(不修改原数组)
| 方法 | 作用 | 示例 | 关键说明 |
|---|
⭐️ forEach() | 遍历数组,无返回值 | [1,2].forEach(item => console.log(item)) | 无法中断(break 无效) |
⭐️ map() | 遍历 + 返回新数组 | [1,2].map(item => item*2) → [2,4] | 不修改原数组,必用 return |
⭐️ filter() | 过滤符合条件的元素 | [1,2,3].filter(item => item>1) → [2,3] | 返回新数组,保留满足条件的元素 |
⭐️ find() | 找第一个符合条件的元素 | [1,2,3].find(item => item>1) → 2 | 找到即返回,无则 undefined |
⭐️ findIndex() | 找第一个符合条件的索引 | [1,2,3].findIndex(item => item>1) → 1 | 无则返回 -1 |
every() | 所有元素满足条件? | [1,2,3].every(item => item>0) → true | 全满足返回 true |
some() | 至少一个元素满足条件? | [1,2,3].some(item => item>2) → true | 有一个满足就返回 true |
reduce() | 聚合(求和 / 拼接等) | [1,2,3].reduce((sum, item) => sum+item, 0) → 6 | 第二个参数是初始值,核心是 “累积” |
3. 转换 / 拼接(不修改原数组)
| 方法 | 作用 | 示例 | 关键说明 |
|---|
⭐️ join(sep) | 数组转字符串 | [1,2].join('-') → "1-2" | sep 是分隔符,默认逗号 |
⭐️ concat() | 拼接数组 | [1,2].concat([3,4]) → [1,2,3,4] | 返回新数组,不修改原数组 |
⭐️ slice(start, end) | 截取数组(左闭右开) | [1,2,3].slice(0,2) → [1,2] | 不修改原数组,end 可选(默认到末尾) |
flat(depth) | 扁平化数组 | [1,[2,[3]]].flat(2) → [1,2,3] | depth 是层级,默认 1,Infinity 拍平所有 |
flatMap() | map + flat(1) | [1,2].flatMap(item => [item, item*2]) → [1,2,2,4] | 比先 map 再 flat 高效 |
4. 排序 / 查找(部分修改原数组)
| 方法 | 作用 | 示例 | 关键说明 |
|---|
⭐️ sort(compare) | 排序 | [3,1,2].sort((a,b) => a-b) → [1,2,3] | 修改原数组,默认按字符串排序(需传比较函数) |
⭐️ reverse() | 反转数组 | [1,2,3].reverse() → [3,2,1] | 修改原数组 |
⭐️ includes(val) | 判断是否包含元素 | [1,2].includes(2) → true | 区分类型(1 !== '1') |
indexOf(val) | 找元素首次出现的索引 | [1,2,1].indexOf(1) → 0 | 无则返回 -1 |
lastIndexOf(val) | 找元素最后出现的索引 | [1,2,1].lastIndexOf(1) → 2 | 无则返回 -1 |
二、字符串(String)方法
字符串方法均不修改原字符串(字符串是不可变类型),按「查找 / 截取、替换 / 分割、转换、判断」分类。
1. 查找 / 截取
| 方法 | 作用 | 示例 | 关键说明 |
|---|
⭐️ charAt(index) | 获取指定位置字符 | "abc".charAt(1) → "b" | 索引越界返回空字符串 |
⭐️ indexOf(str) | 找子串首次出现的索引 | "abcab".indexOf("ab") → 0 | 无则返回 -1 |
⭐️ lastIndexOf(str) | 找子串最后出现的索引 | "abcab".lastIndexOf("ab") → 3 | 无则返回 -1 |
⭐️ slice(start, end) | 截取字符串(左闭右开) | "abcde".slice(1,3) → "bc" | start 负数表示从末尾数 |
substring(start, end) | 截取字符串 | "abcde".substring(1,3) → "bc" | 类似 slice,但 start>end 会自动交换 |
substr(start, length) | 按长度截取 | "abcde".substr(1,2) → "bc" | 已废弃,优先用 slice |
⭐️ includes(str) | 判断是否包含子串 | "abc".includes("b") → true | 区分大小写 |
startsWith(str) | 判断是否以子串开头 | "abc".startsWith("ab") → true | 可传第二个参数(起始位置) |
endsWith(str) | 判断是否以子串结尾 | "abc".endsWith("bc") → true | 可传第二个参数(截取长度) |
2. 替换 / 分割
| 方法 | 作用 | 示例 | 关键说明 |
|---|
⭐️ replace(str/regex, newStr) | 替换子串 | "abc".replace("b", "x") → "axc" | 只替换第一个,全局替换用 /g 正则 |
⭐️ split(sep) | 字符串转数组 | "a-b-c".split("-") → ["a","b","c"] | sep 为空字符串则拆成单个字符 |
replaceAll(str/regex, newStr) | 全局替换 | "abab".replaceAll("a", "x") → "xbxb" | ES2021 新增,无需 /g 正则 |
3. 转换 / 格式化
| 方法 | 作用 | 示例 | 关键说明 |
|---|
⭐️ toLowerCase() | 转小写 | "ABC".toLowerCase() → "abc" | 不修改原字符串 |
⭐️ toUpperCase() | 转大写 | "abc".toUpperCase() → "ABC" | 不修改原字符串 |
⭐️ trim() | 去除首尾空格 | " abc ".trim() → "abc" | 不处理中间空格 |
trimStart()/trimLeft() | 去除开头空格 | " abc".trimStart() → "abc" | 别名,作用一致 |
trimEnd()/trimRight() | 去除结尾空格 | "abc ".trimEnd() → "abc" | 别名,作用一致 |
repeat(n) | 重复字符串 | "ab".repeat(2) → "abab" | n 为 0 返空,负数报错 |
padStart(len, str) | 头部补全 | "123".padStart(5, "0") → "00123" | 常用于补零 |
padEnd(len, str) | 尾部补全 | "123".padEnd(5, "0") → "12300" | 超出长度则截断 |
三、数组 & 字符串互通方法
| 场景 | 实现方式 | 示例 |
|---|
| 数组 → 字符串 | arr.join(sep) | [1,2].join("") → "12" |
| 字符串 → 数组 | str.split(sep) | "abc".split("") → ["a","b","c"] |
| 遍历字符串 | 转数组后用数组遍历方法 | "abc".split("").forEach(char => console.log(char)) |
总结
- 数组核心:修改原数组的方法(push/pop/splice/sort)要注意副作用,遍历优先用 map/filter/reduce(返回新数组),列表查找用 find/findIndex 更高效;
- 字符串核心:所有方法不修改原字符串,截取用 slice、替换用 replace/replaceAll、分割用 split,判断包含用 includes;
- 高频互通:数组转字符串用 join,字符串转数组用 split,是开发中最常用的联动操作。