JavaScript的Array对象方法的高级用法

本文介绍了JavaScript中Array对象的一些高级用法,包括concat()数组拼接,every()元素检测,filter()过滤,forEach()遍历,join()数组转字符串,map()处理数据,sort()排序,includes()包含检测,indexOf()查找索引,splice()删除和添加元素,以及slice()提取片段或深度克隆。这些方法在数组操作中非常实用,能够帮助开发者高效地处理数组数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.concat() 数组拼接

连接两个或更多的数组,并返回结果,使用简单示例如下:

var arr1 = [1,2,100,1000];
var arr2 = [11,3,2];
var arr3 = [1,2,3];
var newArr = arr1.concat(arr2,arr3);
console.log(newArr);
//输出结果:[1, 2, 100, 1000, 11, 3, 2, 1, 2, 3]
2.every() 检测元素

检测数组中的所有元素是否符合指定条件,只要有一个元素不满足,则整个表达式返回false,且其余元素不再检测;如果所有元素均满足该条件,则返回true;

var arr1 = [2,4,110,1000];
var result = arr1.every(function(v,index){
	return v%2==0;
});
console.log(result);
//输出结果:true
3.filter() 过滤

检测数组元素,并返回所有符合条件所有元素所组成的数组;简单示例如下,返回所有小于100的元素数组:

var arr1 = [1,2,7,4,19,110,1000];
var result = arr1.filter(function(v,index){
	return v<100;
});
console.log(result);
//输出结果: (5) [1, 2, 7, 4, 19]
4.forEach() 遍历回调

数组中的每个元素都执行一次回调函数,没有返回值,修改元素值乘以2,示例如下:

var arr1 = [1,2,7,4,19,110,1000];
arr1.forEach(function(v,index,arr){
	arr[index]=v*2;
});
console.log(arr1);
//输出结果:(7) [2, 4, 14, 8, 38, 220, 2000]
5.join() 数组转换字符串

把数组中的所有元素转换为一个字符串,使用特定的字符将数组中的元素串联起来,示例如下:

var arr1 = [1991,8,9];
console.log(arr1.join("-"));
//输出结果:"1991-8-9"
console.log(arr1.join("/"));
//输出结果:"1991/8/9"
6.map() 处理数组数据并返回

该方法与遍历方法有一些类似,但是该方法不改变原数组返回了一个新数组,示例如下:

var arr1 = [1991,8,9,1,2,3];
var newArr = arr1.map(function(v,index){
	return v*2;
});
console.log(newArr);
//输出结果:(6) [3982, 16, 18, 2, 4, 6]
console.log(arr1);
//原数组arr1输出结果:(6) [1991, 8, 9, 1, 2, 3]

证明原数组的元素并未改变,而是返回了一个新的数组

7.sort() 排序

对数组的元素进行排序,默认排序顺序为按字母升序。示例如下:

var arr1 = [1991,8,9,1,2,3];
//升序
arr1.sort(function(a,b){
	return a-b;
});
//降序
arr1.sort(function(a,b){
	return b-a;
});

如果是个json对象数组进行排序,示例如下:

var arr2 = [
	{
		index:1,
		text:"hua1"	
	},{
		index:4,
		text:"hua4"	
	},{
		index:3,
		text:"hua3"	
	},{
		index:2,
		text:"hua2"	
	}
];
//按照index数值升序排列
arr2.sort(function(a,b){
	return a.index-b.index;//降序反之
});
console.log(JSON.stringify(arr2));
//输出结果:[{"index":1,"text":"hua"},{"index":2,"text":"hua2"},{"index":3,"text":"hua3"},{"index":4,"text":"hua4"}]
8.includes() 包含检测

用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。但是只能用于简单得数字或者字符串数组示例用法如下:

var arr1 = [1991,8,9,1,2,3];
console.log(arr1.includes(3));//输出结果:true
console.log(arr1.includes(10));//输出结果:false
var arr3 = ["world","peace","help","help2"];
console.log(arr3.includes("hel"));//输出结果:false
console.log(arr3.includes("help"));//输出结果:true
console.log(arr3.includes("help3"));//输出结果:true
9.indexOf() 查找指定元素索引位置

返回数组中某个指定的元素位置,未找到时返回-1,但是只会返回第一个匹配到的元素索引,如果需要从后面查找,可以使用lastIndexOf(),查找最后出现的位置。示例用法如下:

var arr3 = ["world","peace","help","help2"];
console.log(arr3.indexOf("help"));//输出结果:2
console.log(arr3.indexOf("hel"));//输出结果:-1
10.splice() 删除或添加元素

添加或删除数组中的元素,arr.splice(index,num,item…);
index 删除元素得起始位置;num 删除元素得个数;item… 在指定位置插入元素;即可以同时删除和添加元素,示例用法如下:

//在索引2开始插入两个元素,删除0个元素
var arr3 = ["world","peace","help","help2"];
arr3.splice(2,0,"who","talk");//此处未定义变量接收返回结果,由于删除元素个数为0,返回为空数组
console.log(arr3);
//输出结果:(6) ["world", "peace", "who", "talk", "help", "help2"]
//用作元素替换方法,在索引2开始删除1个元素并插入新的元素
arr3.splice(2,1,"know");//此处未接收的返回结果 ["who"] 
console.log(arr3);
//输出结果:(6) ["world", "peace", "know", "talk", "help", "help2"]

由此我们可以将其用于替换指定元素,只需获取到需要替换元素的索引位置即可,可以结合indexOf使用

11.slice(start, end) 提取片段或深度克隆

slice(start, end) 方法可提取字符串的某个部分,并以新的数组返回被提取的部分,也可以用于数组深度克隆,当一个数组需要复制且其中一个需要进行元素操作时为避免数组的相互影响,可以使用arr.slice() 来实现深度克隆
在字符串String也有相同的方法slice

var a = [1,2,3,4];
var b = a;
var c = a.slice();//深度克隆
a.splice(0,1);//删除第一个元素后
//a [2, 3, 4] b [2, 3, 4] c [1, 2, 3, 4]
//前包含 和 后不包含 参数来指定字符串提取的部分。
var d = a.slice(0,1); //结果d [2] 截取从索引0开始到索引1之前的片段
d = a.slice(0,2);// 结果d [2, 3] 截取从索引0开始到索引2之前的部分

.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值