js数组的方法有哪些(常用数组方法总结)

 分类:js知识时间:2022-09-18点击:

js数组的方法有哪些?常用的有向数组添加元素的方法、向数组删除元素的方法、数组排序的方法、数组连接的方法、数组截取的方法、数组转换的方法、数组查找的方法、累积计算结果方法。常用数组方法总结如下:

js数组的方法

一、向数组添加元素的方法:

1.Array.push(value1,value2,…)

向数组的末尾追加

返回值是添加数据后数组的新长度。

会改变原有数组

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

2.Array.unshift(value1,value2,…)

向数组的开头添加

返回值是添加数据后数组的新长度。

会改变原有数组

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

3.splice(index,0,value1,value2,…)

向数组的指定index处插入

返回的是被删除的元素。

会改变原有数组

如果只传入俩个参数那就是从【参数1】的位置删除【参数2】个个数

let arr = [1,2,3];
let result = arr.splice(2,0,4,5);
console.log(result)   //Array(0)
console.log(arr)	//[1,2,4,5,3]

二、向数组删除元素的方法:

1.pop()

从尾部删除一个元素

返回被删除掉的元素。

会改变原有数组

let arr = [1,2,3];
let result = arr.pop();
console.log(result)   //3
console.log(arr)	//[1,2]

2.shift()

从头部删除一个元素

返回被删除掉的元素。

会改变原有数组

let arr = [1,2,3];
let result = arr.shift();
console.log(result)   //1
console.log(arr)	//[2,3]

3.splice(index,howmany)

在index处删除howmany个元素,

返回的是被删除掉的元素的集合。

会改变原有数组

let arr = [1,2,3];
let result = arr.splice(1,2);
console.log(result)   //[2,3]
console.log(arr)	//[1]

三、数组排序的方法:

1.reverse()

反转,倒置

该方法会改变原有数组。

let arr = [1,2,3];
let result = arr.reverse();
console.log(result)   //[3,2,1]
console.log(arr)	//[3,2,1]

2.sort()

按指定规则排序

改变原有数组。

let arr = [2,1,3];
let result = arr.sort();
console.log(result)   //[1,2,3]
console.log(arr)	//[1,2,3]

注意:

如果你认为sort方法是让数组从小到大排序那就错了。

我们可以改变一下刚才的数组,加一些大一点的数字。

let arr = [25,148,12,6,38];
let result = arr.sort();
console.log(result)   //[12, 148, 25, 38, 6]
console.log(arr)	//[12, 148, 25, 38, 6]

有些朋友现在是不是稍微有一点懵了?

可是我们还是能找到一些规律的,他就是首先按照一个数字的第一个字符的大小去做比较,然后再用第二个字符去做比较,小的在前面,如果朋友们想让这个数组从真正的小到真正的大排序,那么我们可以改造一下刚才的代码。

let arr = [25,148,12,6,38];
let result = arr.sort((a,b) => a - b);
console.log(result)   //[6, 12, 25, 38, 148]
console.log(arr)	//[6, 12, 25, 38, 148]

如果想要从大到小排序那么就

let arr = [25,148,12,6,38];
let result = arr.sort((a,b) => b - a);
console.log(result)   //[148, 38, 25, 12, 6]
console.log(arr)	//[148, 38, 25, 12, 6]

总的来说,数组的sort方法里面的参数是一个回调函数,有俩个值,返回值如果是第一个值减去第二个值那么就是从小到大排序,如果是第二个值减去第一个值就是从大到小排序。

四、数组连接的方法:

1.concat()

数组连接

返回连接后的新数组。

let arr = [25,148,12,6,38],
arr2 = [1,5,8]
let result = arr.concat(arr2);
console.log(result)   //[25, 148, 12, 6, 38, 1, 5, 8]
console.log(arr)	//[25, 148, 12, 6, 38]

2.join()

将数组的每个元素以指定分隔符(默认为“,”)连接成字符

返回该连接完成后的字符串。

let arr = [25,148,12,6,38];
let result = arr.join(),
result2 = arr.join('+')
console.log(result)   //25,148,12,6,38
console.log(result2)   //25+148+12+6+38
console.log(arr)	//[25, 148, 12, 6, 38]

五、数组截取的方法:

1.slice(start,end)

从start起始索引处,截取到end结束索引处

返回截取到的元素集合。

注意:

如果不传值那么就是直接拷贝了一份数组的值。

end可以不传值,表示截取到数组的末尾。start与end也可以取负值,取负值表示从后向前计数。

let arr = [1,2,3,4,5,6,7];
let result = arr.slice(),
result2 = arr.slice(2),
result3 = arr.slice(2,4);
console.log(result)   //[1, 2, 3, 4, 5, 6, 7]
console.log(result2)   //[3, 4, 5, 6, 7]
console.log(result3)	//[3, 4]
console.log(arr)	//[1, 2, 3, 4, 5, 6, 7]

六、数组转换的方法:

1.toString()

转换为字符串,和不传参数的join()一致,还可以使用2,8,16进制转变为不同结果。

let arr = [1,2,3,4,5,6];
let result = arr.toString();
console.log(result)   //1,2,3,4,5,6
console.log(arr)	//[1,2,3,4,5,6]

提取数组指定深度的方法:

比如说现在有一个这样的数组:

[1,2,[3,4,[5,6]]],

我想将它输出为[1,2,3,4,5,6]。

如果自己去写递归的话还是比较麻烦的。

那么我们可以使用数组本身的flat方法来深度解析。

1.flat()

按照指定的深度递归遍历数组

返回值是遍历到的所有元素集合。

let arr = [1,2,[3,4,[5,6]]],
res = arr.flat(Infinity),  //无限递归,直到最后
res2 = arr.flat();		//如果不传参数那么只递归一次
console.log(arr)   //[1,2,[3,4,[5,6]]]
console.log(res)   //[1, 2, 3, 4, 5, 6]
console.log(res2)	//[1,2,3,4,[5,6]]

七、数组查找的方法

indexOf(val[, fromIndex = 0])

数组的indexOf方法用来查找数组中某个val值第一次出现的索引,找不到返回 -1

val表示待查找的值

fromIndex可选参数,表示起始查找位置,默认值是0

lastIndexOf(val[, fromIndex = arr.length - 1])

数组的lastIndexOf()方法用来查找数组中的某个val值第一次出现的索引,找不到返回 -1,lastIndexOf是从数组的最后往前找。

val表示待查找的值

fromIndex可选参数,表示起始查找位置,默认值是数组的长度-1

八、累积计算结果

array.reduce((reslute, currentValue, index, array) => {}, initialValue)

数组的reduce方法适合用来计算数组某一指定内容的累加或者其他运算结果的总结果。

简单实例:

let arr = [1, 2, 3];
const result = arr.reduce((res, cur) => {	
   return res += cur;		//注意要把每一次的计算结果返回给res。
},0);	//这个0是res的初始值,可改为任意数字。
console.log(result)	// 6

复杂一点的实例:

把数组里的每一项变成了对象,而不是简单的数字了。

let arr = [
  {
    name: 'wuxiaodi',
    age: 18,
  }, 
  {
    name: 'liushan',
    age: 16,
  }, 
  {
    name: 'xiaomingge',
    age: 20,
  },
];
const result = arr.reduce((res, cur) => {
  return res += cur.age;
},0);
console.log(result)

再复杂一点的实例:

数组的每一项是对象,而且要过滤条件

let arr = [{
	name: 'wuxiaodi',
	age: 18,
}, {
	name: 'liushan',
	age: 16,
}, {
	name: 'xiaomingge',
	age: 20,
}];
const result = arr.reduce((res, cur) => {
	if (cur.name !== 'liushan') {	//当前的人不是'liushan'就累加年龄
		return res += cur.age;
	}
	return res += 0;  //否则加0,如果不写这句话的话就相当于是返回了一个null,最后的结果就是NaN了,这里要注意一下。
},0);
console.log(result)	//38

array.reduceRight((reslute, currentValue, index, array) => {}, initialValue)

用法与array的reduce方法一致,只是reduceRight的计算过程是从后往前,而reduce是从前往后。

Array.isArray(param)

判断参数param是否是Array

是数组返回true

不是数组返回false

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: