JavaScript 数组与字符串常用方法详解
本文系统梳理了JavaScript中字符串与数组的核心操作方法。详细对比了substring、slice和substr在截取字符串时的参数处理差异，特别是负数索引的行为。深入解析了数组的增删改查方法，重点区分了splice与slice对原数组的影响，并介绍了forEach、map等遍历技巧。此外，还涵盖了数组排序、去重及常见综合应用场景。
JavaScript基础梳理
近期在整理JavaScript基础知识，先从数组和字符串的基础操作开始梳理。
字符串常用方法详解
字符串（String）的常用方法如下：
1. substring(start, end)：用于截取字符串，包含起始位置字符，不包含结束位置字符。若只提供一个参数，则表示从该位置截取至字符串末尾。
var str='abcdefg';
str.substring(1) //得到bcdefg str.substring(1,3) //得到bc当传入负数参数时，负数会被视为0，且实际开始位置取两个参数中较小的值。
例如：str.substring(-1, 1) 等效于 str.substring(0, 1)，返回首字符；str.substring(1, -2) 等效于 str.substring(0, 1)，同样返回首字符。
2. slice(start, end)：功能与substring类似，主要区别在于处理负数参数的逻辑不同。
var str='abcdefg';
str.slice(1) //bcdefg str.substring(1,3) // bc
当传入负数时，该值会与字符串长度相加来计算实际索引。
例如：str.slice(-1) 等效于 str.slice(6)，返回最后一个字符；str.slice(1, -2) 等效于 str.slice(1, 5)，返回中间部分；str.slice(-2, -1) 等效于 str.slice(5, 6)，返回倒数第二个字符。
若负数的绝对值大于字符串长度，则将其视为0。
例如：str.slice(-22) 等效于 str.substring(0)，返回整个字符串。
若第二个参数的绝对值大于字符串长度，则返回空字符串。
3. substr(start, length)：用于截取字符串，第二个参数指定返回的字符个数。
var str='abcdefg';
str.substr(1) //bcdefg str.substr(1,1) //b
当start为负数时，会与字符串长度相加确定起始位置；若end为负数，则视为0。
str.substr(-1) =>str.substr(6)//g
str.substr(-2,-3) // ''
4. charAt(index)：返回指定索引位置的单个字符。若索引超出有效范围（0到字符串长度减1），则返回空字符串。
var str='abcdefg';
str.charAt(2) // c
5. indexOf(string)：返回子字符串在String对象中首次出现的位置。若未找到，则返回-1。
var str='abcdefga' str.indexOf('a') // 0 str.indexOf('h') //-1
6. lastIndexOf(string)：从后向前查找，返回子字符串最后一次出现的位置。
若未找到子字符串，lastIndexOf同样返回-1。
var str='abcdefga' str.lastIndexOf('a') // 7
7. split(str)：以指定参数为分隔符，将字符串分割为数组。
var str='abcadeafg' str.split('a') //["", "bc", "de", "fg"]
8. toLowerCase()：返回将字符串中所有字母转换为小写后的新字符串。
9. toUpperCase()：返回将字符串中所有字母转换为大写后的新字符串。
10. match()：在字符串内检索指定值，或查找与正则表达式匹配的一个或多个结果。
11. search()：返回与正则表达式匹配的第一个子字符串的位置。
12. replace()：用于查找与正则表达式匹配的子字符串，并用新字符串替换匹配部分。
参考链接：http://www.cnblogs.com/bijiapo/p/5451924.html
数组常用操作方法
数组（Array）的常用方法如下：
1. push()：在数组末尾添加元素，返回添加后的数组长度。
2. unshift()：在数组开头添加元素，返回添加后的数组长度。
3. shift()：删除数组第一个元素，返回被删除的元素。
4. pop()：删除数组最后一个元素，返回被删除的元素。
5. reverse()：反转数组元素顺序，返回处理后的数组。
6. join()：将数组元素连接为字符串，可指定分隔符。
var arr=[1,2,3,4,5], str=arr.join('--');
console.log(str); // 1--2--3--4--5 以join内的参数切割数组
console.log(arr); // [1,2,3,4,5] 原数组未变
7. slice(start, end)：截取数组，从start开始到end结束（不包含end）。
该方法返回新数组，原数组保持不变。
var arr=[1,2,3,4,5],new=arr.slice(2,4);
console.log(new); // [3,4]
console.log(arr); // [1,2,3,4,5] 8. concat()：用于合并两个或多个数组，返回新数组。
9. splice(start, count, ele1, ele2...)：用于插入、删除或替换数组元素。
(1) 仅一个参数：从指定位置截取至末尾，若为负数则类似slice处理，返回截取部分，原数组发生变化。
var arr=[1,2,3,4,5];
console.log(arr.splice(1)); // [2,3,4,5]
console.log(arr); // [1]
console.lgo(arr.splice(-1)) // [5]
(2) 两个参数：指定截取开始位置和个数，返回截取部分，原数组发生变化。
var arr=[1,2,3,4,5];
console.log(arr.splice(1,3)); // [2,3,4]
console.log(arr) // [1,5]
arr.splice(0,1) =>arr.shift()
arr.splcie(arr.length-1,1) =>arr.pop()
(3) 添加元素：在指定位置插入新元素，原数组增加元素。
var arr=[1,2,3,4,5];
console.log(arr.splice(1,0,13)); // []
console.log(arr); // [1,13,2,3,4,5]
(4) 替换元素：通过指定个数和后续参数实现替换操作。
var arr=[1,2,3,4,5];
console.log(arr.splice(1,2,'a','b')) // [2,3]
console.log(arr); // [1,'a','b',4,5]
arr.splice(0,0,1) =>arr.unshift(1);
arr.splice(arr.length,0,1) => arr.push(1)
10. arr.forEach(item, index, array) {}：遍历数组，功能类似jQuery的each。
其中item为数组元素，index为索引，array为数组本身。
var arr=[1,2,3,4,5];
arr.forEach(function(item,index,array){
})
注意：在嵌套循环中跳出循环可能存在未解决的问题，需根据具体场景处理。
11. map()：映射方法，用法与forEach类似，但返回一个新数组。
var men=[
{'name':1,'age':12},
{'name':2,'age':22},
{'name':3,'age':33}
],
age=men.map(function(item){
return item.age;
})数组排序与去重算法
12. arr.sort()：对数组进行排序。
var arr=[1,2,22,11,33,3,5,4];
console.log(arr.sort()) // [1,11,2,22,3,33,4,5]
默认情况下，sort方法按ASCII字符顺序排序，而非数值大小。
arr.sort(function(a,b){ return a-b})
可通过比较函数实现排序：(a, b) => a - b为从小到大，b - a为从大到小。
13. 常见排序算法实现：
(1) 冒泡排序：每次比较相邻两个数，若后一个比前一个小则交换位置。
function bSort(arr){
var tmp;
for(var i=0,len=arr.length-1;i<len;i++){
for(var j=0;j<len;j++){
if(arr[j]>arr[j+1]){
//换位置
tmp=arr[j+1];
arr[j+1]=arr[j];
arr[j]=tmp;
}
}
}
return arr;
}
function bSort(arr){
var tmp;
arr.forEach(function(item,i){
arr.forEach(function(item,i){
if(item>arr[i+1]){
//换位置
tmp = arr[i + 1];
arr[i + 1] = arr[i];
arr[i] = tmp;
}
})
})
return arr
}
(2) 快速排序：采用分治法，选取中间值，将小于中间值的放左边，大于的放右边，递归处理。
function fastSoft(arr){
var len=arr.length;
if(len<=1){ return arr}
var cIndex=Math.floor(len/2),
c=arr.splice(c,1),
left=[],
right=[];
arr.forEach(function(item,i){
if(item<c[0]){
left.push(item);
}else{
right.push(item);
}
})
return fastSoft(left).concat(c,fastSoft(right));
} 14. 数组去重方法：
(1) 双层循环：效率较低，不推荐。
var arr=[2,3,2,2,2,4,5],
arr2=[];
function find(arr2,ele){
for(var i= 0,len=arr2.length;i<len;i++){
if(arr2[i]==ele) return true;
}
return false;
}
for(var i= 0,len=arr.length;i<len;i++){
if(!find(arr2,arr[i])){
arr2.push(arr[i]);
}
}
(2) 利用对象Key无重复特性：将数组元素作为Key存入对象，再提取Key。
var arr=[2,3,2,2,2,4,5],
json={},
arr2=[];
arr.forEach(function(item,i){
if(!json[item]){
json[item]=222;
}
});
for(var name in json){
arr2.push(Number(name));//类型发生变化了
}
(3) 利用sort排序后去重：排序后相邻元素相同，遍历去除重复项。
var arr=[2,3,2,4,4,4,5],
arr2=[];
arr.sort();
for(var i=0;i<arr.length;i++){
if(arr[i]==arr[i+1]){
arr.splice(i--,1);
}
}综合应用场景示例
一些常见的数学方法应用。
math.abs() 取绝对值 math.ceil() 向上取整 math.floor() 向下取整
math.round() 四舍五入 math.roundom
function getRan(n,m){
return Math.floor(Math.random()*(m-n)+n);
} 数组和字符串的一些综合应用场景：
1. 截取文件后缀名。
(1) 示例代码：var str='1.xxx.avi';
str=str.substring(str.lastIndexOf('.')+1);
(2) 处理逻辑示例：var str='1.xxx.avi';
var arr=str.split('.');
console.log(arr[arr.length-1]);2. 字母翻转及首字母大写处理。
var str='wo shi yi ge demo',
arr=str.split(' ');
for(var i=0;i<arr.length;i++){
console.log()
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
}
arr.reverse();
str=arr.join(' ');3. 统计字符串中字符出现次数。
var str='aaaandkdffsfsdfsfssq12345',
json={},
n= 0,
sName;
for(var i= 0,len=str.length;i<len;i++){
var Letter=str.charAt(i);
//统计次数
if(json[Letter]){
json[Letter]++;
}else{
json[Letter]=1;
}
}
//找最大
for(var name in json){
if(json[name]>n){
n=json[name];
sName=name;
}
}
console.log('出现最多的字母'+sName+'次数为'+n);
4. 简单的URL参数解析方法。
function getData() {
var search = window.location.search.substring(1);
if (!search) {
return;
}
var arr = search.split('&'),
arr2 = [],
json = {},
key,
alue;
for (var i = 0; i < arr.length; i++) {
arr2 = arr[i].split('=');
key = arr2[0];
value = arr2[1];
json[key] = value;
}
return json;
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01