数组的相关方法总结----持续更新23.05.07

本文总结了JavaScript中数组的一系列操作方法,包括查找、重组、添加、删除、翻转、合并、转换、排序以及初始化。这些方法涉及到了对数组元素的增删改查,以及数组的遍历和过滤等,是JavaScript编程中常用的操作技巧。

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

JavaScript中数组的相关方法总结

一、数组相关方法

1.查找

默认从下标0开始查找

①:查找 值 第一个次出现的下标位置
语法:
		数组.indexOf(所要查找的元素);
		数组.indexOf(所要查找的元素,开始的下标)
		返回值:若查找成功,返回元素的下标;若查找失败,返回-1
const arr = [1,2,3,4,3];
arr.indexOf(3);//返回值为2
②:查找 值 最后一次出现下标的位置
语法:
		数组.lastindexOf(所要查找的元素);
		数组.lastindexOf(所要查找的元素,开始的下标);
		返回值:若查找成功,返回元素的下标;若查找失败,返回-1
const arr = [1,3,5,7,5];
arr.lastindexOf(5);//返回值为4

2.重组(不会改变原数组的结构)

语法:
			数组.join(自定义的分割字符);//参数可选,省略参数,默认为逗号分隔符
			返回值:返回一个新的字符串,由分隔符连接(原数组不受影响)
const arr = [1,5,9,6,3,4,2,1,6,7,6,9,8];
const result = arr.join();
console.log(result);//1,5,9,6,3,4,2,1,6,7,6,9,8
console.log(arr);//[1, 5, 9, 6, 3, 4, 2, 1, 6, 7, 6, 9, 8]

3.添加(会改变原数组的结构)

①:从数组的首部添加元素
语法:
			数组.unshift(要添加的元素);//参数可以传一个或多个,多个用逗号隔开(元素1,元素2,...)
			返回值:返回值为 数组现在的长度(添加元素之后的长度)
const arr = [1,3,2,4,6];
const result = arr.unshift(5);
console.log(result);//6
console.log(arr.length);//6
console.log(arr);//[5, 1, 3, 2, 4, 6]
②:从数组的尾部添加元素
语法: 
			数组.push(要添加的元素);//参数可以传一个或多个,多个用逗号隔开(元素1,元素2,...)
			返回值:返回值为 数组现在的长度(添加元素之后的长度)
const arr = [1,3,2,4,6];
const result = arr.push(8);
console.log(result);//6(返回值为数值类型)
console.log(arr.length);//6(返回值为数值类型)
console.log(arr);//[1, 3, 2, 4, 6, 8]
③:在数组任意位置添加元素
语法:
			数组.splice(要添加元素的位置(下标位置),0,要添加的元素(元素1,元素2,...));
			第二个参数代表的是 要删除元素的个数,添加时不需要删除所以设置为0,此参数在有三个参数时,不可省略!
			返回值:在作为添加元素的方法时,返回为 空数组
			【实际返回的为 被删除元素所组成的数组,为0时,返回空数组】
const arr = [1,2,5,4,6,7];
const result = arr.splice(2, 0, 6,7);
console.log(result);//[]
console.log(arr);//[1, 2, 6, 7, 5, 4, 6, 7]

4.删除(会改变原数组的结构)

①:删除数组中第一个元素
语法:
			数组.shift();//无参数
			返回值:返回值为 被删除元素的值
const arr = [1,2,5,4,6,7];
const result = arr.shift();
console.log(result);//1
console.log(arr);//[2, 5, 4, 6, 7]
②:删除数组中最后一个元素
语法:
			数组.pop();//无参数
			返回值:返回值为 被删除元素的值
const arr = [1,2,5,4,6,7];
const result = arr.pop();
console.log(result);//7
console.log(arr);//[1, 2, 5, 4, 6]
③:删除数组中任意位置,任意个数的元素
语法:
			数组.splice(下标位置);//从下标位置开始,一直到数组的末尾,全部删除
			数组.splice(下标位置,删除个数);//从下标位置开始,然后根据删除的个数,进行删除
			返回值:返回值为 被删除的元素所组成的数组,删除个数为0时,返回空数组
const arr = [1,2,5,4,6,7];
const result = arr.splice(2);
console.log(result);//[5, 4, 6, 7]
console.log(arr);//[1, 2]

const arr1 = [1,2,5,4,6,7];
const result1 = arr1.splice(2,3);
console.log(result1);//[5, 4, 6]
console.log(arr1);//[1, 2, 7]

5.翻转——颠倒数组中元素的顺序(会改变原数组的结构)

语法:
			数组名.reverse();//无参数
			返回值:返回值为 颠倒后的数组(与原数组地址一致)
const arr = [1,5,3,4,7,6,2];
console.log(arr.reverse());//[2, 6, 7, 4, 3, 5, 1]
console.log(arr);//[2, 6, 7, 4, 3, 5, 1]
console.log(result === arr);//true

6.合并(不会影响原数组的结构)

语法: 
			数组.concat();//用于连接两个或多个数组
			返回值:返回由两个或多个字符串组成的新数组
const arr = [1,5,3,4,7,6,2];
const arr1 = [5,3,4,6,88,22];
const arr2 = [6,0,33,44,11];
const result = arr.concat(arr1);
const result1 = arr.concat(arr1,arr2);
console.log(result);//[1, 5, 3, 4, 7, 6, 2, 5, 3, 4, 6, 88, 22]
console.log(result1);//[1, 5, 3, 4, 7, 6, 2, 5, 3, 4, 6, 88, 22, 6, 0, 33, 44, 11]
console.log(arr);//[1, 5, 3, 4, 7, 6, 2]
console.log(arr1);//[5, 3, 4, 6, 88, 22]
console.log(arr2);//[6, 0, 33, 44, 11]

7.转换——强制转换为字符串

语法: 
			数组.toString();//无参数
			返回值:返回新的字符串
const arr = [6,0,33,44,11];
const result = arr.toString();
console.log(result);//6,0,33,44,11
console.log(arr);//[6, 0, 33, 44, 11]

8.排序(会改变原数组的结构)

语法:
			数组.sort();
			数组.sort(function(a,b) {
					//a代表当前比较数的下一个比较数,b代表当前比较数
					//比较函数应该具有两个参数 a 和 b,其返回值如下:
					//若 a 小于 b,即 a - b 小于零,则返回一个小于零的值,数组将按照升序排列。
					//若 a 等于 b,则返回 0。
					//若 a 大于 b, 即 a - b 大于零,则返回一个大于零的值,数组将按照降序排列。
					return a-b;
			});
			默认排序按照字符的Unicode位来进行排序,若想给数字排序,你必须通过一个函数作为参数来调用
const arr = [1,2,5,6,4,3,7,8];

//升序
const result = arr.sort(function (a,b) {
    return a-b;
});
console.log(result);//[1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8]

// 降序
const result = arr.sort(function (a,b) {
    return b-a;
});
console.log(result);//[8, 7, 6, 5, 4, 3, 2, 1]
console.log(arr);//[8, 7, 6, 5, 4, 3, 2, 1]

9. 空数组的初始化

语法: 数组.fill(用于初始化填充的数据,填充数据的起始下标,填充数据的终止下标)
// 单个参数,该方法会用该参数的值填充整个数组
var arr1 = new Array(5)
console.log(arr1.fill(3)); //[3,3,3,3,3]
var arr2 = [1, 2, 3, 4, 5]
console.log(arr2.fill(0)); //[0,0,0,0,0]

// 两个参数的时候,第一个为填充的元素,第二个为填充的起始下标
var arr3 = [0, 1, 2, 3, 4, 5, 6]
console.log(arr3.fill(1, 3)); //[0,1,2,1,1,1,1]

// 三个参数的时候,第一个参数为填充的元素
//第二个和第三个参数分别指填充元素的起始和终止下标,终止下标的元素不会被修改
var arr4 = [0, 1, 2, 3, 4, 5]
console.log(arr4.fill(1, 3, 5)); //[0,1,2,1,1,5]

//如果提供的起始下标或结束下标值为负数,则会使用数组长度与下标的值的和算出对应的下标
//eg. 起始下标为-1 就相当于array.length-1
var arr5 = [0, 1, 2, 3, 4, 5]
console.log(arr5.fill(1, -3));//[0,1,2,1,1,1]
var arr6 = [0, 1, 2, 3, 4, 5]
console.log(arr6.fill(1, 3, -2));//[0,1,2,1,4,5]

二、数组迭代(循环)方法(不会改变原数组的结构)

每一个方法的实际参数都为回调函数,不会影响原数组的结构

1.判断数组中是否符合条件

①:判断数组中是否存在符合条件的元素
语法:
			数组.some(function(当前元素,数组元素的下标,原数组结构) {
					return 条件语句;
			});
			返回值:只要有一个符合条件的元素,就返回true,遍历停止;若直到结束都没有,返回false
const arr = [1,3,2,5,4,6,7,9];
const result = arr.some(function (item) {
   return item % 2 === 0;
});
console.log(result);//true
console.log(arr);//[1, 3, 2, 5, 4, 6, 7, 9]
②:判断数组中所以元素是否都符合条件
语法:
			数组.every(function(当前元素,数组元素的下标,原数组结构) {
					return 条件语句;
			});
			返回值:只要有一个不符合条件的元素,就返回false,遍历停止;若全部符合,即返回true
const arr = [1,3,2,5,4,6,7,9];
const result1 = arr.every(function (item) {
    return item % 2 === 0;
});
console.log(result1);//false
console.log(arr);//[1, 3, 2, 5, 4, 6, 7, 9]

const arr1 = [2,4,6,8,10,12];
const result2 = arr1.every(function(item) {
    return item % 2 === 0;
})
console.log(result2);//true

2. 遍历及改变元素的值

语法:
			数组.map(function(当前元素,数组元素的下标,原数组结构) {
					return 当前元素 * 10;
			})
			不光可以遍历现有数组的结构,而且还可以按照回调函数中设定的条件修改数组中元素的值
			返回值:返回一个改变以后的新数组
const arr = [1,3,2,5,7,8];
const result = arr.map(function(item) {
   return item*10;
});
console.log(result);//[10, 30, 20, 50, 70, 80]
console.log(arr);//[1, 3, 2, 5, 7, 8]

3. 过滤数组中符合条件的元素组成新的数组

语法:
			数组.filter(function(当前元素,数组元素的下标,原数组结构) {
					return 当前元素 % 2 === 0;
			});
			从现有数组结构中按照条件进行过滤满足条件的元素
			返回值:返回一个符合过滤条件元素组成的新数组
const arr = [1,3,2,5,7,8,6,12];
const result1 = arr.filter(function(item) {
    return item % 2 === 0;
});
console.log(result1);//[2, 8, 6, 12]
console.log(arr);//[1, 3, 2, 5, 7, 8, 6, 12]

4.查找符合条件的元素并返回符合条件的元素

语法:
			数组.find(function(当前元素,数组元素的下标,原数组结构) {
					return 当前元素 % 2 ===0
			});
			返回值:返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined
const result2 = arr.find(function (item) {
    return item % 2 === 0;
});
console.log(result2);//2
console.log(arr);//[1, 3, 2, 5, 7, 8, 6, 12]

5. 只遍历无返回值

语法:
			数组.forEach(function(当前元素,数组元素的下标,原数组结构) {
					if(item % 2 === 0){
				            //可执行语句,无返回值(无return);
				    }
			});
arr.forEach(function(item) {
    if(item % 2 === 0) {
        console.log(item);
    }
});
//返回值为2  8  6  12(console.log自动换行)

6.求和

语法:
			数组.reduce(function(total, currentValue, currentIndex, arr), initialValue)
			接收一个函数作为累加器,数组中的每个值(从左到右)开始相加并减少,最终计算为一个值
			返回值:因为接收的为一个回调函数,返回值即为回调函数的返回值
			
			注意:此方法需要返回值,所以回调函数要写返回值(return之后的表达式作为返回值)!
			
			方法中的参数:第一个参数必写,接收一个回调函数;第二个参数可选,表示传递给函数的初始值
			
			函数中的参数:第一个参数必写,表示初始值,或者计算结束后的返回值;第二个参数必写,表示当前元素
						第三个参数可选,表示当前元素的下标;第四个参数可选,表示当前元素所属的数组对象
const arr = [1,6,3,4,2,8,7,9,1,5,3];
//previousValue表示上一次的值,currentValue表示当前的值
const result = arr.reduce(function (previousValue,currentValue) {
    return previousValue + currentValue;
});
console.log(result);//49 (返回值为数值类型)
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

engineer_why

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值