盘点 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，是开发中最常用的联动操作。
数组方法详细代码示例
push()
末尾添加元素
let arr = [1,2]
arr.push(3)
console.log(arr) // [1,2,3]
pop()
删除末尾元素
let arr = [1,2,3]
arr.pop()
console.log(arr) // [1,2]
unshift()
开头添加元素
let arr = [2,3]
arr.unshift(1)
console.log(arr) // [1,2,3]
shift()
删除开头元素
let arr = [1,2,3]
arr.shift()
console.log(arr) // [2,3]
concat()
合并数组
let a = [1,2]
let b = [3,4]
console.log(a.concat(b)) // [1,2,3,4]
slice()
截取数组（开始，结束）
let arr = [1,2,3,4]
console.log(arr.slice(1,3)) // [2,3]
splice()
删除/插入/替换元素
-
删除：
splice(起始索引, 删除个数) -
添加：
splice(插入位置, 0, 新元素) -
替换：
splice(位置, 1, 新元素) -
会修改原数组，返回被删除的元素数组
// 统一使用的原始数组
let arr;
// ============== 1. 删除元素 ==============
arr = ['苹果', '香蕉', '橙子', '葡萄', '芒果'];
let deleted1 = arr.splice(1, 2);
console.log('1. 删除元素：', arr); // 1. 删除元素： ['苹果', '葡萄', '芒果']
console.log('被删除：', deleted1); // 被删除： ['香蕉', '橙子']
// ============== 2. 添加元素 ==============
arr = ['苹果', '香蕉', '橙子', '葡萄', '芒果'];
arr.splice(2, 0, '榴莲', '西瓜');
console.log('2. 添加元素：', arr); // 2. 添加元素： ['苹果', '香蕉', '榴莲', '西瓜', '橙子', '葡萄', '芒果']
// ============== 3. 替换元素 ==============
arr = ['苹果', '香蕉', '橙子', '葡萄', '芒果'];
arr.splice(3, 1, '草莓');
console.log('3. 替换元素：', arr); // 3. 替换元素： ['苹果', '香蕉', '橙子', '草莓', '芒果']
// ============== 4. 负数索引删除末尾 ==============
arr = ['苹果', '香蕉', '橙子', '葡萄', '芒果'];
arr.splice(-1, 1);
console.log('4. 删除最后一个：', arr); // 4. 删除最后一个： ['苹果', '香蕉', '橙子', '葡萄']
// ============== 5. 删除从索引到末尾所有元素 ==============
arr = ['苹果', '香蕉', '橙子', '葡萄', '芒果'];
arr.splice(2);
console.log('5. 删除索引2及之后：', arr); // 5. 删除索引2及之后： ['苹果', '香蕉']
indexOf()
查找元素第一次出现的位置
let arr = [1,2,3,2]
console.log(arr.indexOf(2)) // 1
lastIndexOf()
查找元素最后一次出现的位置
let arr = [1,2,3,2]
console.log(arr.lastIndexOf(2)) // 3
includes()
判断是否包含元素
let arr = [1,2,3]
console.log(arr.includes(2)) // true
join()
数组转字符串
let arr = [1,2,3]
console.log(arr.join('-')) // 1-2-3
reverse()
反转数组
let arr = [1,2,3]
arr.reverse()
console.log(arr) // [3,2,1]
sort()
数组排序
let arr = [3,1,2]
arr.sort((a,b)=>a-b)
console.log(arr) // [1,2,3]
forEach()
遍历数组
let arr = [1,2,3]
arr.forEach(item=>console.log(item))
map()
映射新数组
let arr = [1,2,3]
let newArr = arr.map(item=>item*2)
console.log(newArr) // [2,4,6]
filter()
过滤数组
let arr = [1,2,3,4]
let newArr = arr.filter(item=>item>2)
console.log(newArr) // [3,4]
find()
查找第一个符合条件的元素
let arr = [1,2,3]
let res = arr.find(item=>item>1)
console.log(res) // 2
findIndex()
查找第一个符合条件的索引
let arr = [1,2,3]
let res = arr.findIndex(item=>item>1)
console.log(res) // 1
every()
判断所有元素是否满足条件
let arr = [2,4,6]
console.log(arr.every(item=>item%2===0)) // true
some()
判断是否有元素满足条件
let arr = [1,2,3]
console.log(arr.some(item=>item>2)) // true
reduce()
累计计算
let arr = [1,2,3]
let sum = arr.reduce((a,b)=>a+b,0)
console.log(sum) // 6
reduceRight()
从右往左累计
let arr = [1,2,3]
let res = arr.reduceRight((a,b)=>a-b)
console.log(res) // 0
fill()
填充数组
let arr = new Array(3).fill(0)
console.log(arr) // [0,0,0]
flat()
扁平化数组
let arr = [1,[2,[3]]]
console.log(arr.flat(2)) // [1,2,3]
flatMap()
先map再flat
let arr = [1,2]
let res = arr.flatMap(item=>[item,item*2])
console.log(res) // [1,2,2,4]
keys()
返回索引迭代器
let arr = ['a','b']
for(let k of arr.keys()){
console.log(k) // 0 1
}
values()
返回值迭代器
let arr = ['a','b']
for(let v of arr.values()){
console.log(v) // a b
}
entries()
返回键值对迭代器
let arr = ['a','b']
for(let [i,v] of arr.entries()){
console.log(i,v) // 0 'a' 1 'b'
}
字符串方法详细代码示例
charAt()
获取指定位置的字符
let str = 'hello'
console.log(str.charAt(1)) // e
charCodeAt()
获取指定位置字符的 Unicode 编码
let str = 'hello'
console.log(str.charCodeAt(0)) // 104
concat()
拼接字符串
let a = 'hello'
let b = ' world'
console.log(a.concat(b)) // hello world
includes()
判断是否包含指定字符串
let str = 'hello vue'
console.log(str.includes('vue')) // true
indexOf()
查找字符第一次出现的位置，找不到返回 -1
let str = 'hello'
console.log(str.indexOf('l')) // 2
lastIndexOf()
查找字符最后一次出现的位置
let str = 'hello'
console.log(str.lastIndexOf('l')) // 3
startsWith()
判断是否以指定字符串开头
let str = 'hello world'
console.log(str.startsWith('hello')) // true
endsWith()
判断是否以指定字符串结尾
let str = 'hello world'
console.log(str.endsWith('world')) // true
slice()
截取字符串（开始，结束）
let str = 'hello'
console.log(str.slice(1,3)) // el
substring()
截取字符串（开始，结束）不支持负数
let str = 'hello'
console.log(str.substring(1,3)) // el
substr()
截取字符串（开始，长度）已弃用
let str = 'hello'
console.log(str.substr(1,2)) // el
split()
字符串转数组
let str = 'a,b,c'
console.log(str.split(',')) // ['a','b','c']
toUpperCase()
转大写
let str = 'hello'
console.log(str.toUpperCase()) // HELLO
toLowerCase()
转小写
let str = 'HELLO'
console.log(str.toLowerCase()) // hello
trim()
去除两端空格
let str = ' hello '
console.log(str.trim()) // hello
trimStart()
去除开头空格
let str = ' hello'
console.log(str.trimStart()) // hello
trimEnd()
去除结尾空格
let str = 'hello '
console.log(str.trimEnd()) // hello
padStart()
开头补全字符串
let str = '5'
console.log(str.padStart(2, '0')) // 05
padEnd()
结尾补全字符串
let str = '5'
console.log(str.padEnd(2, '0')) // 50
repeat()
重复字符串
let str = 'hi'
console.log(str.repeat(3)) // hihihi
replace()
替换第一个匹配项
let str = 'hello hello'
console.log(str.replace('hello', 'hi')) // hi hello
replaceAll()
替换所有匹配项
let str = 'hello hello'
console.log(str.replaceAll('hello', 'hi')) // hi hi
search()
正则查找，返回位置
let str = 'hello123'
console.log(str.search(/\d/)) // 5
match()
正则匹配，返回数组
let str = 'abc123def'
console.log(str.match(/\d+/)) // ['123']
matchAll()
正则全局匹配
let str = 'a1b2c3'
let arr = [...str.matchAll(/\d/g)]
console.log(arr) // [['1'],['2'],['3']]
