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

engineer_why

墨衍会员 · AI 创作全网分发码龄6年

关注

原创 2023-05-07 14:00:33 258 阅读 AI 写同款· GEO 优化 ›

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 (返回值为数值类型)