JS中数组的十几种常用方法的用法及实例总结(必会)

本文链接：https://blog.csdn.net/wuyou_w/article/details/132920871

处理数据大多数时候都会处理数组,掌握数组的常用操作方法是非常有必要的

使用数组的方法要明确的是这些方法会不会更改原数组,还有要明确其返回值

会修改原数组的方法：(以下7个方法在Vue中能够侦听响应式数组的变更)
- push();pop();shift();unshift();splice();sort();reverse()
不会更改原数组:
- filter();concat() 和 slice()
这些方法不会更改原数组，而总是返回一个新数组。一般我们需要将旧的数组替换为新的：

this.newArr = this.newArr.filter((item) => item > 5)

以下几个方法很容易混淆,注意区分:

push unshift pop shift 常用于数组头尾增删元素,会修改原数组,相信大家都很熟悉

splice和 slice 是不是傻傻分不清,slice(切分)少个p被“截取”了~

push () / unshift ()

数组末尾 / 开头添加一个或多个元素
用法:

array.push(item1, item2, ..., itemX)

返回值: 新数组的长度

let arr = [1,2,3]
arr.unshift(5) //4
console.log(arr) //[5, 1, 2, 3]

pop() / shift()

pop()用于删除数组的最后一个元素。shift()删除第一个元素
返回值:返回删除的元素

[1,2,3].pop() //3

splice() 和 slice()

splice()方法:

用于插入,删除或者替换数组元素
返回值:如果删除一个元素，则返回一个元素的数组。如果未删除任何元素，则返回空数组。即返回的是含有被删除的元素的数组。
用法: array.splice(index, Num, itemX)

参数:index-必须,操作的元素开始的索引位置

Num 删除元素的个数,为0则不删除
```
array.splice(index,删除的个数,添加的数组元素item1,...,itemX)
```
注意:
- 插入时会将元素插入到索引位置
- 若第二个参数为空则从索引到结束全部删除,第二个参数可以为数字型字符串
- index参数为负数时表示倒数开始的索引
返回值:返回删除的元素组成的数组,未删除则返回空数组[]

var arr = [1,2,3]
//删除2并插入a
arr.splice(1,1,'a')
console.log( arr ) //[1, 'a', 3]
//负数索引
arr.splice(-1,1)
console.log(arr) //[1, 'a']
//----
arr.splice(1); //只含一个参数
console.log( arr ); //[1]

slice() 方法:

作用:

返回截取的数组元素. (该方法也可用于字符串)
用法: array.slice(start, end)
- start参数: 开始选取的索引对应元素
- end参数: 截取不包括end,即从start到end-1的索引部分;若参数未指定则包括开始到结束的所有元素
- 两个参数可为负数,为负数时表示倒数第几个元素开始,如slice(-2,-1)表示截取倒数第二个元素

var arr =[1,2,3]
console.log( arr.slice(-2,-1) ) //返回值 [2]
console.log( arr.slice(-3,-2) ) //返回值 [1]

注意:slice()方法不会更改原数组,splice会.

reverse()

反转数组的元素顺序,返回反转后的新数组

array.reverse();

[1,2,3].reverse() //[3, 2, 1]

join()

join()方法用于把数组中的所有元素转换为一个字符串,并返回
元素是通过指定的分隔符进行分隔的。
用法: [separator分隔符,可选,默认为,]

array.join(separator)

['a', 'b', 'c', 'd'].join() // 'a,b,c,d'

concat()

用于连接两个或多个数组。
不会改变原数组，返回新组成的数组。
用法:

array1.concat(array2, array3,..., arrayX)

[1,2,3].concat([4,5]) //[1, 2, 3, 4, 5]

可遍历数组中每一个元素的方法: fliter, forEach, map, find, findIndex …

用法都差不多,举一反三就行了

filter()方法

返回一个符合条件的新数组,该数组由所有返回真值的元素值组成; 没有符合条件的元素则返回空数组

用法：

注意： filter() 不会对空数组进行检测。

array.filter(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue,index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数描述： currentValue必须，当前元素的值；index可选,当前元素的索引值；arr可选，当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

实例:

筛选出符合条件元素

['a', 'b', 'c', 'd'].filter((item, index) => item == 'c' || index == 3)
// ['c', 'd']

arr.filter(Boolean) 过滤掉数组中为假的元素，并返回只包含真值元素的新数组。

const oldArr = [0, 'hello', '', false, 10, null, true, undefined];

const newArr = oldArr.filter(Boolean);

console.log(newArr); // 输出：['hello', 10, true]

第一次看到这种写法还有点懵, 其实Boolean 是一个内置函数，它可以将给定的值转换为对应的布尔值. 以上filter中传入Boolean 函数,会将数组每一个元素作为参数传给Boolean函数进行调用，并将其转换为对应的布尔值。因此我们不需要显式地编写回调函数。

forEach()

用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。
返回值undefined

var arr = [1, 2, 3, 4, 5];

arr.forEach(function (item) {
    if(item === 5) arr.pop(5)
})
console.log(arr); //[1, 2, 3, 4]

map()

返回一个新数组
原数组中的每个元素都调用一次提供的函数，并将返回值加入新数组

let dataList = [
    { name: '标签2', value: '值2' },
    { name: '标签3', value: '值3' }
];
let labList = [
    { label: '标签1', value: '值1' },
    ...dataList.map((item) => ({ label: item.name, value: item.value }))
];
console.log(labList);

在这里插入图片描述

forEach和 map的使用方法和 filter类似,这几个在实际开发是经常使用的,区别在于:

forEach会改变原数组,返回值undefined

map不改变原数组,返回值: 新数组

find() 和 findIndex()

find()方法:
- 返回通过测试（函数内判断满足条件）的数组的第一个元素的值; 如果没有符合条件的则返回 undefined。
- 当数组中的元素在测试条件返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
- 对于空数组，函数是不会执行的
findIndex()方法则返回第一个元素的索引。若没有找到对应元素则返回 -1。

语法

array.find(function(currentValue, index, arr),thisValue)

var arr = [1, 2, 5, 3, 4, 5];

arr.findIndex(function (item) {
    return item == 5
})
//只返回索引 2

indexOf() / lastIndexOf()

indexOf()返回数组中第一次出现给定元素的索引
lastIndexOf()返回数组中给定元素最后一次出现的索引,相当于逆向开始检索（逆向检索）；
给定元素不存在时都返回-1

let arr = ['a', 'c', 'a', 'b', 'c'];
arr.lastIndexOf('c') //4
arr.lastIndexOf('a'); //2

indexOf()应用： 数组去重

let arr = [1, 5, 19, 19, 5, 2];
let newArr = [];
function fun(arr) {
	for (i = 0; i < arr.length; i++) {
		if (newArr.indexOf(arr[i]) === -1) {
			newArr.push(arr[i]);
		}
	}
	return newArr;
}
console.log(fun(arr)); //1,5,19,2