前端常用字符串/数组操作(含相关手撕)
字符串转数组的方法
1. split() - 最常用的方法
功能描述:使用指定的分隔符将字符串分割成字符串数组
语法:
str.split([separator[, limit]])
参数:
separator:指定表示每个拆分点的字符串,如果省略,则返回包含整个字符串的数组limit:可选,限制返回的数组片段数量
示例:
const str = "apple,banana,orange"; const arr = str.split(","); // 结果: ["apple", "banana", "orange"] const str2 = "hello"; const arr2 = str2.split(""); // 结果: ["h", "e", "l", "l", "o"] const str3 = "apple,banana,orange,grape"; const arr3 = str3.split(",", 2); // 结果: ["apple", "banana"]
2. Array.from() - 从类数组对象创建
功能描述:从类数组或可迭代对象创建一个新的数组实例
语法:
Array.from(arrayLike[, mapFn[, thisArg]])
参数:
arrayLike:要转换为数组的类数组或可迭代对象mapFn:可选,映射函数,用于对每个元素进行处理thisArg:可选,执行映射函数时的this值
示例:
const str = "hello"; const arr = Array.from(str); // 结果: ["h", "e", "l", "l", "o"] const str2 = "123"; const arr2 = Array.from(str2, Number); // 结果: [1, 2, 3] const str3 = "hello"; const arr3 = Array.from(str3, char => char.toUpperCase()); // 结果: ["H", "E", "L", "L", "O"]
3. 扩展运算符 ...
功能描述:将字符串展开为字符数组,适用于Unicode字符
语法:
[...string]
示例:
const str = "hello"; const arr = [...str]; // 结果: ["h", "e", "l", "l", "o"] const str2 = "👍😊"; const arr2 = [...str2]; // 结果: ["👍", "😊"] const str3 = "hello world"; const arr3 = [...new Set([...str3])]; // 结果: ["h", "e", "l", "o", " ", "w", "r", "d"] (去重)
4. Object.assign() - 较少使用
功能描述:将字符串作为数组-like对象,将其属性分配给新数组
语法:
Object.assign(target, source)
示例:
const str = "hello"; const arr = Object.assign([], str); // 结果: ["h", "e", "l", "l", "o"]
数组转字符串的方法
1. join() - 最常用的方法
功能描述:将数组的所有元素连接成一个字符串,可指定分隔符
语法:
arr.join([separator])
参数:
separator:可选,指定分隔符,默认为逗号
示例:
const arr = ["apple", "banana", "orange"]; const str = arr.join(", "); // 结果: "apple, banana, orange" const arr2 = [1, 2, 3]; const str2 = arr2.join("-"); // 结果: "1-2-3" const arr3 = ["apple", "banana", "orange"]; const str3 = arr3.join(""); // 结果: "applebananaorange" const arr4 = ["apple", "banana", "orange"]; const str4 = arr4.join(); // 结果: "apple,banana,orange" (默认逗号分隔)
2. toString() - 默认逗号分隔
功能描述:返回由数组元素组成的字符串,默认用逗号分隔
语法:
arr.toString()
示例:
const arr = ["apple", "banana", "orange"]; const str = arr.toString(); // 结果: "apple,banana,orange" const arr2 = [1, 2, 3]; const str2 = arr2.toString(); // 结果: "1,2,3" const arr3 = [1, [2, 3], [4, [5, 6]]]; const str3 = arr3.toString(); // 结果: "1,2,3,4,5,6" (会展开嵌套数组)
3. JSON.stringify() - 转换为JSON字符串
功能描述:将数组转换为JSON字符串格式
语法:
JSON.stringify(value[, replacer[, space]])
参数:
value:要转换为JSON字符串的值replacer:可选,转换结果的函数或数组space:可选,用于缩进的空格数或字符串
示例:
const arr = ["apple", "banana", "orange"]; const str = JSON.stringify(arr); // 结果: '["apple","banana","orange"]' const arr2 = [1, 2, 3]; const str2 = JSON.stringify(arr2); // 结果: "[1,2,3]" const arr3 = [{name: "apple"}, {name: "banana"}]; const str3 = JSON.stringify(arr3, null, 2); /* 结果: [ { "name": "apple" }, { "name": "banana" } ] */
4. 模板字符串 + 扩展运算符
功能描述:使用模板字符串和扩展运算符连接数组元素
小牛发言:有toString的效果
语法:
`${[...array]}`
示例:
const arr = ["apple", "banana", "orange"]; const str = `${[...arr]}`; // 结果: "apple,banana,orange" const arr2 = [1, 2, 3]; const str2 = `${arr2}`; // 结果: "1,2,3" const arr3 = ["apple", "banana", "orange"]; const str3 = `水果: ${arr3.join(" + ")}`; // 结果: "水果: apple + banana + orange"
综合应用示例
字符串反转(通过数组转换)
const original = "hello"; const reversed = [...original].reverse().join(""); // 结果: "olleh" const sentence = "Hello World"; const reversedWords = sentence.split(" ").map(word => [...word].reverse().join("")).join(" "); // 结果: "olleH dlroW"
数据清洗和格式化
// 清理用户输入 const userInput = " apple, banana , orange "; const cleanArray = userInput.split(",").map(item => item.trim()).filter(item => item !== ""); // 结果: ["apple", "banana", "orange"] // 数字数组格式化 const numbers = [1, 2, 3, 4, 5]; const formatted = numbers.join(" - "); // 结果: "1 - 2 - 3 - 4 - 5"
URL参数处理
// URL参数转对象 const queryString = "name=John&age=30&city=NewYork"; const params = queryString.split("&").reduce((acc, pair) => { const [key, value] = pair.split("="); acc[key] = value; return acc; }, {}); // 结果: {name: "John", age: "30", city: "NewYork"} // 对象转URL参数 const paramsObj = {name: "John", age: 30, city: "New York"}; const query = Object.entries(paramsObj).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}` ).join("&"); // 结果: "name=John&age=30&city=New%20York"
说明(简短)
encodeURIComponent是浏览器和 Node.js 中的全局函数,用于对 URI 的单个组件进行编码:先把字符串按 UTF-8 编码,再把非安全字符用百分号转义(%xx)。- 它会对大多数保留字符进行编码(例如
:/?&=+#,等),保留字符中只有 A–Z a–z 0–9 和 - _ . ! ~ * ' ( ) 不会被编码。 - 常用于对 URL 的查询参数名和值进行编码,避免因特殊字符导致的解析错误。对应的解码函数是
decodeURIComponent。
和 encodeURI 的区别(要点)
encodeURI用于编码整个 URI,不会编码 URI 中有意义的分隔符(如:,/,?,#),因此不会把这些分隔符转义。encodeURIComponent更“严格”,适合编码单个参数或路径段,因为它会把更多字符转义,避免破坏结构性分隔符。
实例:
const params = { name: "John Doe", city: "New York/NY" }; const qs = Object.entries(params) .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`) .join('&'); // qs -> "name=John%20Doe&city=New%20York%2FNY"
注意事项
- 空格被编码为
%20(不是+)。如果要生成 application/x-www-form-urlencoded 风格,可在需要时把%20替换为+。 - 使用
decodeURIComponent恢复原始字符串。 - 在现代浏览器和 Node.js 都可用,是 ECMAScript 标准的一部分。
注意事项
- 空字符串处理:"".split(",") // 返回 [""] 而不是 []
- 特殊字符转义:// 正则特殊字符需要转义 "a.b.c".split(".") // 正确 "a.b.c".split(/\./) // 使用正则时需要转义
- 性能考虑:
- 对于大数据量,
split()通常性能最佳 - 扩展运算符在简单场景下性能良好
- 对于大数据量,
- Unicode字符处理:// 扩展运算符和Array.from()能正确处理Unicode "👍😊".split("") // 可能不正确 [..."👍😊"] // 正确: ["👍", "😊"] Array.from("👍😊") // 正确: ["👍", "😊"]
JavaScript 数组和字符串常用方法
数组常用方法
1. 添加/删除元素方法
push()
- 描述: 向数组末尾添加一个或多个元素
- 语法:
arr.push(element1, ..., elementN) - 返回值: 数组的新长度
- 示例:
const arr = [1, 2, 3]; const length = arr.push(4, 5); console.log(arr); // [1, 2, 3, 4, 5] console.log(length); // 5
pop()
- 描述: 删除并返回数组的最后一个元素
- 语法:
arr.pop() - 返回值: 被删除的元素
- 示例:
const arr = [1, 2, 3]; const last = arr.pop(); console.log(arr); // [1, 2] console.log(last); // 3
unshift()
- 描述: 向数组开头添加一个或多个元素
- 语法:
arr.unshift(element1, ..., elementN) - 返回值: 数组的新长度
- 示例:
const arr = [2, 3]; const length = arr.unshift(0, 1); console.log(arr); // [0, 1, 2, 3] console.log(length); // 4
shift()
- 描述: 删除并返回数组的第一个元素
- 语法:
arr.shift() - 返回值: 被删除的元素
- 示例:
const arr = [1, 2, 3]; const first = arr.shift(); console.log(arr); // [2, 3] console.log(first); // 1
🌟splice()
- 描述: 在指定位置添加/删除元素
- 语法:
arr.splice(start, deleteCount, item1, ..., itemN) - 返回值: 包含被删除元素的数组
- 示例:
const arr = [1, 2, 3, 4, 5]; const removed = arr.splice(2, 1, 'a', 'b'); console.log(arr); // [1, 2, 'a', 'b', 4, 5] console.log(removed); // [3]
2. 查找和筛选方法
indexOf()
- 描述: 返回指定元素在数组中第一次出现的索引
- 语法:
arr.indexOf(searchElement[, fromIndex]) - 返回值: 索引值,未找到返回-1
- 示例:
const arr = [1, 2, 3, 2, 1]; console.log(arr.indexOf(2)); // 1 console.log(arr.indexOf(4)); // -1
lastIndexOf()
- 描述: 返回指定元素在数组中最后一次出现的索引
- 语法:
arr.lastIndexOf(searchElement[, fromIndex]) - 返回值: 索引值,未找到返回-1
- 示例:
const arr = [1, 2, 3, 2, 1]; console.log(arr.lastIndexOf(2)); // 3
includes()
- 描述: 判断数组是否包含某个元素
- 语法:
arr.includes(valueToFind[, fromIndex]) - 返回值: 布尔值
- 示例:
const arr = [1, 2, 3]; console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false
find()
- 描述: 返回满足条件的第一个元素
- 语法:
arr.find(callback(element[, index[, array]])[, thisArg]) - 返回值: 找到的元素,未找到返回undefined
- 示例:
const arr = [5, 12, 8, 130, 44]; const found = arr.find(element => element > 10); console.log(found); // 12
findIndex()
- 描述: 返回满足条件的第一个元素的索引
- 语法:
arr.findIndex(callback(element[, index[, array]])[, thisArg]) - 返回值: 索引值,未找到返回-1
- 示例:
const arr = [5, 12, 8, 130, 44]; const index = arr.findIndex(element => element > 10); console.log(index); // 1
filter()
- 描述: 返回满足条件的所有元素组成的新数组
- 语法:
arr.filter(callback(element[, index[, array]])[, thisArg]) - 返回值: 新数组
- 示例:
const arr = [1, 2, 3, 4, 5]; const evens = arr.filter(num => num % 2 === 0); console.log(evens); // [2, 4]
3. 遍历和转换方法
forEach()
- 描述: 对每个元素执行函数
- 语法:
arr.forEach(callback(currentValue[, index[, array]])[, thisArg]) - 返回值: undefined
- 示例:
const arr = [1, 2, 3]; arr.forEach((item, index) => { console.log(`索引${index}: ${item}`); });
map()
- 描述: 对每个元素执行函数并返回新数组
- 语法:
arr.map(callback(currentValue[, index[, array]])[, thisArg]) - 返回值: 新数组
- 示例:
const arr = [1, 2, 3]; const doubled = arr.map(num => num * 2); console.log(doubled); // [2, 4, 6]
reduce()
- 描述: 将数组缩减为单个值
- 语法:
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) - 返回值: 累积结果
- 示例:
const arr = [1, 2, 3, 4]; const sum = arr.reduce((acc, cur) => acc + cur, 0); console.log(sum); // 10
reduceRight()
- 描述: 从右向左将数组缩减为单个值
- 语法:
arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue]) - 返回值: 累积结果
- 示例:
const arr = [1, 2, 3, 4]; const result = arr.reduceRight((acc, cur) => acc - cur); console.log(result); // -2
4. 排序和重组方法
sort()
- 描述: 对数组排序
- 语法:
arr.sort([compareFunction]) - 返回值: 排序后的数组
- 示例:
const arr = [3, 1, 4, 1, 5]; arr.sort(); console.log(arr); // [1, 1, 3, 4, 5] // 数字排序 const numbers = [40, 100, 1, 5, 25]; numbers.sort((a, b) => a - b); console.log(numbers); // [1, 5, 25, 40, 100]
reverse()
- 描述: 反转数组顺序
- 语法:
arr.reverse() - 返回值: 反转后的数组
- 示例:
const arr = [1, 2, 3]; arr.reverse(); console.log(arr); // [3, 2, 1]
🌟slice()
- 描述: 提取数组的一部分
- 语法:
arr.slice([start[, end]]) - 返回值: 新数组
- 示例:
const arr = [1, 2, 3, 4, 5]; const part = arr.slice(1, 4); console.log(part); // [2, 3, 4]
concat()
- 描述: 合并两个或多个数组
- 语法:
arr.concat(value1[, value2[, ...[, valueN]]]) - 返回值: 新数组
- 示例:
const arr1 = [1, 2]; const arr2 = [3, 4]; const merged = arr1.concat(arr2); console.log(merged); // [1, 2, 3, 4]
5. 其他常用方法
join()
- 描述: 将数组所有元素连接成字符串
- 语法:
arr.join([separator]) - 返回值: 字符串
- 示例:
const arr = ['a', 'b', 'c']; console.log(arr.join()); // "a,b,c" console.log(arr.join('')); // "abc" console.log(arr.join('-')); // "a-b-c"
toString()
- 描述: 返回数组的字符串表示
- 语法:
arr.toString() - 返回值: 字符串
- 示例:
const arr = [1, 2, 'a', '1a']; console.log(arr.toString()); // "1,2,a,1a"
every()
- 描述: 检测是否所有元素都满足条件
- 语法:
arr.every(callback(element[, index[, array]])[, thisArg]) - 返回值: 布尔值
- 示例:
const arr = [1, 2, 3, 4]; const allPositive = arr.every(num => num > 0); console.log(allPositive); // true
some()
- 描述: 检测是否有元素满足条件
- 语法:
arr.some(callback(element[, index[, array]])[, thisArg]) - 返回值: 布尔值
- 示例:
const arr = [1, 2, 3, 4]; const hasEven = arr.some(num => num % 2 === 0); console.log(hasEven); // true
isArray()
- 描述: 判断是否为数组
- 语法:
Array.isArray(value) - 返回值: 布尔值
- 示例:
console.log(Array.isArray([1, 2, 3])); // true console.log(Array.isArray({})); // false
字符串常用方法
1. 查找和提取方法
indexOf()
- 描述: 返回指定值在字符串中第一次出现的索引
- 语法:
str.indexOf(searchValue[, fromIndex]) - 返回值: 索引值,未找到返回-1
- 示例:
const str = 'Hello World'; console.log(str.indexOf('o')); // 4 console.log(str.indexOf('World')); // 6
lastIndexOf()
- 描述: 返回指定值在字符串中最后一次出现的索引
- 语法:
str.lastIndexOf(searchValue[, fromIndex]) - 返回值: 索引值,未找到返回-1
- 示例:
const str = 'Hello World'; console.log(str.lastIndexOf('o')); // 7
includes()
- 描述: 判断字符串是否包含指定子串
- 语法:
str.includes(searchString[, position]) - 返回值: 布尔值
- 示例:
const str = 'Hello World'; console.log(str.includes('World')); // true console.log(str.includes('world')); // false
startsWith()
- 描述: 判断字符串是否以指定子串开头
- 语法:
str.startsWith(searchString[, position]) - 返回值: 布尔值
- 示例:
const str = 'Hello World'; console.log(str.startsWith('Hello')); // true console.log(str.startsWith('World')); // false
endsWith()
- 描述: 判断字符串是否以指定子串结尾
- 语法:
str.endsWith(searchString[, length]) - 返回值: 布尔值
- 示例:
const str = 'Hello World'; console.log(str.endsWith('World')); // true console.log(str.endsWith('Hello')); // false
charAt()
- 描述: 返回指定位置的字符
- 语法:
str.charAt(index) - 返回值: 字符
- 示例:
const str = 'Hello'; console.log(str.charAt(1)); // 'e'
charCodeAt()
- 描述: 返回指定位置字符的Unicode编码
- 语法:
str.charCodeAt(index) - 返回值: Unicode编码
- 示例:
const str = 'Hello'; console.log(str.charCodeAt(1)); // 101
2. 修改和转换方法
toUpperCase()
- 描述: 将字符串转换为大写
- 语法:
str.toUpperCase() - 返回值: 新字符串
- 示例:
const str = 'Hello'; console.log(str.toUpperCase()); // 'HELLO'
toLowerCase()
- 描述: 将字符串转换为小写
- 语法:
str.toLowerCase() - 返回值: 新字符串
- 示例:
const str = 'Hello'; console.log(str.toLowerCase()); // 'hello'
trim()
- 描述: 移除字符串两端的空白字符
- 语法:
str.trim() - 返回值: 新字符串
- 示例:
const str = ' Hello World '; console.log(str.trim()); // 'Hello World'
trimStart() / trimLeft()
- 描述: 移除字符串开头的空白字符
- 语法:
str.trimStart()或str.trimLeft() - 返回值: 新字符串
- 示例:
const str = ' Hello World '; console.log(str.trimStart()); // 'Hello World '
trimEnd() / trimRight()
- 描述: 移除字符串末尾的空白字符
- 语法:
str.trimEnd()或str.trimRight() - 返回值: 新字符串
- 示例:
const str = ' Hello World '; console.log(str.trimEnd()); // ' Hello World'
replace()
- 描述: 替换字符串中的子串
- 语法:
str.replace(searchValue, replaceValue) - 返回值: 新字符串
- 示例:
const str = 'Hello World'; console.log(str.replace('World', 'JavaScript')); // 'Hello JavaScript' // 使用正则表达式 console.log(str.replace(/o/g, '0')); // 'Hell0 W0rld'
replaceAll()
- 描述: 替换字符串中所有匹配的子串
- 语法:
str.replaceAll(searchValue, replaceValue) - 返回值: 新字符串
- 示例:
const str = 'Hello World'; console.log(str.replaceAll('l', 'L')); // 'HeLLo WorLd'
padStart()
- 描述: 在字符串开头填充字符直到达到指定长度
- 语法:
str.padStart(targetLength[, padString]) - 返回值: 新字符串
- 示例:
const str = '5'; console.log(str.padStart(3, '0')); // '005'
padEnd()
- 描述: 在字符串末尾填充字符直到达到指定长度
- 语法:
str.padEnd(targetLength[, padString]) - 返回值: 新字符串
- 示例:
const str = '5'; console.log(str.padEnd(3, '0')); // '500'
3. 分割和连接方法
split()
- 描述: 将字符串分割为数组
- 语法:
str.split([separator[, limit]]) - 返回值: 数组
- 示例:
const str = 'apple,banana,orange'; console.log(str.split(',')); // ['apple', 'banana', 'orange'] const str2 = 'Hello'; console.log(str2.split('')); // ['H', 'e', 'l', 'l', 'o']
concat()
- 描述: 连接两个或多个字符串
- 语法:
str.concat(str2, ..., strN) - 返回值: 新字符串
- 示例:
const str1 = 'Hello'; const str2 = 'World'; console.log(str1.concat(' ', str2)); // 'Hello World'
repeat()
- 描述: 将字符串重复指定次数
- 语法:
str.repeat(count) - 返回值: 新字符串
- 示例:
const str = 'Hello'; console.log(str.repeat(3)); // 'HelloHelloHello'
4. 切片和子串方法
slice()
- 描述: 提取字符串的一部分
- 语法:
str.slice(beginIndex[, endIndex]) - 返回值: 新字符串
- 示例:
const str = 'Hello World'; console.log(str.slice(0, 5)); // 'Hello' console.log(str.slice(6)); // 'World' console.log(str.slice(-5)); // 'World'
substring()
- 描述: 提取两个指定索引之间的字符
- 语法:
str.substring(indexStart[, indexEnd]) - 返回值: 新字符串
- 示例:
const str = 'Hello World'; console.log(str.substring(0, 5)); // 'Hello' console.log(str.substring(6)); // 'World'
substr()
- 描述: 从指定位置提取指定长度的字符
- 语法:
str.substr(start[, length]) - 返回值: 新字符串
- 示例:
const str = 'Hello World'; console.log(str.substr(0, 5)); // 'Hello' console.log(str.substr(6, 5)); // 'World'
5. 其他常用方法
valueOf()
- 描述: 返回字符串对象的原始值
- 语法:
str.valueOf() - 返回值: 字符串
- 示例:
const str = new String('Hello'); console.log(str.valueOf()); // 'Hello'
toString()
- 描述: 返回字符串表示
- 语法:
str.toString() - 返回值: 字符串
- 示例:
const str = new String('Hello'); console.log(str.toString()); // 'Hello'
match()
- 描述: 在字符串中查找匹配正则表达式的字符
- 语法:
str.match(regexp) - 返回值: 匹配结果数组或null
- 示例:
const str = 'The rain in SPAIN stays mainly in the plain'; console.log(str.match(/ain/g)); // ['ain', 'ain', 'ain']
search()
- 描述: 搜索匹配正则表达式的字符的位置
- 语法:
str.search(regexp) - 返回值: 索引值,未找到返回-1
- 示例:
const str = 'The rain in SPAIN stays mainly in the plain'; console.log(str.search(/ain/)); // 5
localeCompare()
- 描述: 比较两个字符串在本地语言环境中的顺序
- 语法:
str.localeCompare(compareString[, locales[, options]]) - 返回值: 数字(负数、零或正数)
- 示例:
console.log('a'.localeCompare('b')); // -1 console.log('b'.localeCompare('a')); // 1 console.log('a'.localeCompare('a')); // 0
总结
数组方法特点
- 改变原数组: push, pop, unshift, shift, splice, sort, reverse
- 不改变原数组: slice, concat, map, filter, reduce, join, toString
- 返回新数组: slice, concat, map, filter
- 返回单个值: reduce, reduceRight, find, findIndex, indexOf, lastIndexOf
字符串方法特点
- 所有字符串方法都不改变原字符串,因为字符串是不可变的
- 返回新字符串: toUpperCase, toLowerCase, trim, replace, slice, substring
- 返回数组: split
- 返回布尔值: includes, startsWith, endsWith
常用场景
- 数据处理: map, filter, reduce
- 元素操作: push, pop, splice
- 字符串处理: split, join, replace
- 查找判断: includes, indexOf, find
- 格式转换: toString, toUpperCase, toLowerCase