面试官 : “ 请说一下 JS 的常见的数组 和 字符串方法有哪些 ? ”

0 阅读5分钟

盘点 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))

总结

  1. 数组核心:修改原数组的方法(push/pop/splice/sort)要注意副作用,遍历优先用 map/filter/reduce(返回新数组),列表查找用 find/findIndex 更高效;
  2. 字符串核心:所有方法不修改原字符串,截取用 slice、替换用 replace/replaceAll、分割用 split,判断包含用 includes;
  3. 高频互通:数组转字符串用 join,字符串转数组用 split,是开发中最常用的联动操作。