JavaScript数组方法汇总(史上最全)

最新推荐文章于 2023-11-21 17:35:35 发布

请问大家代码怎么敲

最新推荐文章于 2023-11-21 17:35:35 发布

阅读量485

点赞数

分类专栏： js js数组文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/liumuye88888/article/details/121088111

版权

js 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

js数组

1 篇文章 0 订阅

订阅专栏

一、在JavaScript中创建数组的方法

(1)、Array构造函数创建数组

	var Arr1 = new Array();//创建一个空数组
    var Arr2 = new Array(6);//规定了数组长度为6，然后再根据索引向里面添加值
    	Arr2[0] = 1;
    var Arr3 = new Array('a','b','c');//直接实例化创建一个包含三个字符串的数组

(2)、Array字面量创建

	var Arr1 = [];//创建一个空数组
    var Arr2 = [6];//创建一个包含6项的数组
    var Arr3 = ['a','b','c'];//创建一个包含三个字符串的数组

二、数组的方法介绍

方法	作用	是否改变原数组
1.push	在数组的末尾增加一个或多个元素，并返回数组的新长度	是
2.pop	删除数组的最后一个元素，并返回这个元素	是
3.unshift	在数组的开头增加一个或多个元素，并返回数组的新长度	是
4.shift	删除数组的第一个元素，并返回这个元素	是
5.sort	对数组元素进行排序，并返回当前数组	是
6.reverse	颠倒数组中元素的顺序	是
7.splice	添加或删除数组中的元素	是
8.copyWithin	从数组的指定位置拷贝元素到数组的另一个指定位置中	是
9.concat	用于连接两个或多个数组	否
10.entries	返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)	否
11.every	检测数组所有元素是否都符合指定条（通过函数提供）	否
12.fill	将一个固定值替换数组的元素	是
13.filter	创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素	否
14.find	返回通过测试（函数内判断）的数组的第一个元素的值	否
15.findIndex	返回传入一个测试条件（函数）符合条件的数组第一个元素位置	否
16.forEach	用于调用数组的每个元素，并将元素传递给回调函数	否
17.from	通过拥有 length 属性的对象或可迭代的对象来返回一个数组	否
18.includes	判断一个数组是否包含一个指定的值，如果是返回 true，否则false	否
19.indexOf	返回数组中某个指定的元素位置,没有的话返回-1	否
20.isArray	判断一个对象是否为数组,是返回true否则返回false	否
21.join	把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的	否
22.keys	从数组创建一个包含数组键的可迭代对象。如果对象是数组返回 true，否则返回 false	否
23.lastIndexOf	返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找	否
24.map	返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值	否
25.reduce	接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值	否
26.reduceRight	功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加	否
27.slice	可从已有的数组中返回选定的元素	否
28.some	用于检测数组中的元素是否满足指定条件（函数提供）	否
29.toString	把数组转换为字符串，并返回结果	否
30.valueOf	返回 Array 对象的原始值	否

三、数组方法实例

1.push()方法用于在数组的末尾增加一个或多个元素，并返回数组的新长度

语法：array.push(item1, item2, …, itemX)

	var array = ['1','2'];
	array.push('3','4');
	console.log(array);//['1','2','3','4'] 改变了数组

2.pop()方法用于删除数组的最后一个元素并返回删除的元素

语法：array.pop()

	var array = ['1','2'];
	array.pop();
	console.log(array); //['1'] 改变了原数组

3.unshift()方法用于向数组的开头添加一个或更多元素，并返回新的长度

语法：array.unshift(item1, item2, …, itemX)

	var array = ['1','2'];
	array.unshift('0','6');
	console.log(array); //['0','6','1','2'] 改变了原数组

4.shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

语法：array.shift()

	var array = ['1','2'];
	array.shift();
	console.log(array); //['2'] 改变了原数组

5.sort()方法用于对数组的元素进行排序

语法：array.sort(sortfunction)
参数：sortfunction 可选。规定排序顺序。必须是函数。

	//1.第一种情况不传参数默认为升序
 	var array = ['2','1','4'];
    array.sort();
    console.log(array);//['1','2','4'] 改变了原数组
    //2.数字排序（数字和升序)
    var array = ['2','1','4'];
    array.sort(function(a,b){
      return a - b
    });
    console.log(array);//['1','2','4']
    //3.数字排序（数字和降序)
    var array = ['2','1','4'];
    array.sort(function(a,b){
      return b - a
    });
    console.log(array);//['4','2','1']

6.reverse() 方法用于颠倒数组中元素的顺序

语法：array.reverse()

	var array = ['2','1','4'];
    array.reverse()
    console.log(array);//['4','1','2'] 改变了原数组

7.splice() 方法用于添加或删除数组中的元素

语法：array.splice(index,howmany,item1,…,itemX)
参数：index必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。(如果有第三个参数就是添加元素，如果没有就是删除元素）
howmany:可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX:可选。要添加到数组的新元素

	//1.只有一个参数的时候
	var array = ['2','1','4','5'];
    array.splice(2);//删除从左到右两项
    console.log(array);// ['2','1'] 改变了原数组 返回的是删除的元素
    
    //2.只有两个参数的时候
    var array = ['2','1','4','5'];
    array.splice(0,3);//如果第一个参数是0则删除不会包括第二个参数的索引
    console.log(array);// ['5'] 改变了原数组
    array.splice(1,2);//如果第二个参数不是0则删除会包括第二个参数的索引['2','5'] 显然它删掉了索引为2的元素‘4’
	
	//3.当有>=3个参数的时候
	//当第二个参数为0的时候,第一个参数就是起始位置，从索引1开始添加第三个参数到array数组
	var array = ['1','2','3','4'];
	array.splice(1,0,'xiaoming');
	console.log(array);//['1', 'xiaoming', '2', '3', '4']
	
	//当第二个参数不为0的时候,从第一个参数索引1起始位置开始删除一个元素并把第三个参数加上
	var array = ['1','2','3','4'];
	array.splice(1,1,'xiaoming');
	console.log(array);//['1', 'xiaoming',  '3', '4']

	var array = ['1','2','3','4'];
	array.splice(1,2,'xiaoming');
	console.log(array);//['1', 'xiaoming','4']

8.copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中

语法：array.copyWithin(target, start, end)
参数：target 必需。复制到指定目标索引位置。
start 可选。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

//一个参数的时候
var array = ['1','2','3','4'];
array.copyWithin(2);
console.log(array);//['1','2','1','2'];

//二个参数的时候
var array = ['1','2','3','4'];
array.copyWithin(2,1);
console.log(array);//['1','2','2','3'];

//三个参数的时候
var array = ['1','2','3','4','5'];
array.copyWithin(2,1,3);//从索引2开始,复制的元素索引从1开始,复制到索引为3(包括3)停止
console.log(array);//['1','2','2','3','5'];

9.concat() 方法用于连接两个或多个数组

语法：array1.concat(array2,array3,…,arrayX)
注意⚠️：不会改变原数组

	var array1 = ['1','2'];
	var array2 = ['3','4'];
	var array3 = ['5','6'];
	var arrayBox = array1.concat(array2,array3)
	console.log(arrayBox) //['1', '2', '3', '4', '5', '6'];

10.entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)

语法：array.entries()

var array = ['xiaoming','lisi','zhangsan'];
var x = array.entries();
console.log(x.next().value); //[0, 'xiaoming'];
console.log(x.next().value); //[1, 'lisi'];
console.log(x.next().value); //[2, 'zhangsan'];

11.every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）

语法：array.every(function(currentValue,index,arr), thisValue)
参数：function(currentValue,index,arr){}
currentValue:必须。当前元素的值
index:可选。当前元素的索引值
arr可选。当前元素属于的数组对象

every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

var array = ['1','2','3','4','5','6'];
var ArrBox = array.every(function(currentValue,index,arr){
	return currentValue > 5
})
console.log(ArrBox);//false

12.fill() 方法用于将一个固定值替换数组的元素

语法：array.fill(value, start, end)
参数：value 必需。填充的值。
start 可选。开始填充位置。
end 可选。停止填充位置 (默认为 array.length)

//只有一个参数的时候
var array = ['1','2','3','4'];
array.fill('6');
console.log(array);//['6', '6', '6', '6'] 所有的都会被替换掉

//不止一个参数的时候
var array = ['1','2','3','4'];
array.fill('6',1,3);
console.log(array);//['1', '6', '6', '4'] 索引1到索引3 不包括索引3都会被替换掉

13.filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

语法：array.filter(function(currentValue,index,arr), thisValue) 同11

	var array = ['1','2','3','4'];
	var ArrBox = array.filter(function(currentValue){
		return currentValue > 2
	})
	console.log(ArrBox);// ['3', '4']

14.find() 方法返回通过测试（函数内判断）的数组的第一个元素的

语法：array.find(function(currentValue, index, arr),thisValue) 同11

	var array = ['6','9','18','20'];
	var ArrBox = array.find(function(currentValue){
		return currentValue >= 18
	})
	console.log(ArrBox);//18 第三个元素满足条件,返回第三个元素就不接着往下面走啦

15.findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置

语法：array.findIndex(function(currentValue, index, arr), thisValue) 同11

	var array = ['1','2','3'];
	var ArrBox = array.findIndex(function(currentValue){
		return currentValue > 2
	})
	console.log(ArrBox);//2 这个2就是索引2 它满足条件，如果array中都没有大于2的这时就会返回-1

16.forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

语法：array.forEach(function(currentValue, index, arr), thisValue) 同11

	var array = ['1','2','3','4'];
	array.forEach(function(currentValue, index, arr){
		console.log(currentValue, index, arr);
	})
	//1 0 (4) ['1', '2', '3', '4']
 	//2 1 (4) ['1', '2', '3', '4']
    //3 2 (4) ['1', '2', '3', '4']
    //4 3 (4) ['1', '2', '3', '4']

17.from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组

语法：Array.from(object, mapFunction, thisValue)
参数：object：必需，要转换为数组的对象。
mapFunction：可选，数组中每个元素要调用的函数。
thisValue 可选，映射函数(mapFunction)中的 this 对象。

	//只有一个参数的情况
	var array = Array.from('xiaoming');
	console.log(array);//(8) ['x', 'i', 'a', 'o', 'm', 'i', 'n', 'g']
	
	//不止一个参数的情况
	var array = Array.from([1,2,3],function(x){
		return x * 10
	})
	console.log(array);//[10, 20, 30]
	
	//从类数组对象（arguments）生成数组
	function f() {
    console.log(arguments);
    console.log(Array.from(arguments)); // [ 1, 2, 3 ]
	}
	f(1, 2, 3);

18.includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false

语法：arr.includes(searchElement, fromIndex)
参数：searchElement 必须。需要查找的元素值。
fromIndex 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

	//传一个参数的时候
	var array = ['1','2','3','4'];
	var ArrBox = array.includes('2');
	console.log(array);//true
	
	//传两个参数的时候
	var array = ['1','2','3','4'];
	var ArrBox = array.includes('2',2);
	console.log(array);//false 虽然这时array数组里面有2但是它是从索引为2开始查找的,所以返回false

19.indexOf() 方法可返回数组中某个指定的元素位置，如果在数组中没找到指定元素则返回 -1

语法：array.indexOf(item,start)
参数：item 必须。查找的元素。
start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

	//一个参数的时候
	var array = ['1','2','3','4'];
	var ArrBox = array.indexOf('1');
	console.log(ArrBox);//0 返回的就是‘1’的索引位置
	//二个参数的时候
	var array = ['1','2','3','4'];
	var ArrBox = array.indexOf('1',1);
	console.log(ArrBox);//false 这是第二个参数的是为1,从索引1开始查找找不到‘1’，所以返回-1

20.isArray() 方法用于判断一个对象是否为数组，如果对象是数组返回 true，否则返回 false

语法：Array.isArray(obj)
参数：obj：必须。要判断的对象。

	var array1 = ['1','2','3'];
	var array2 = {name:'xiaoming',age:18};
	console.log(Array.isArray(array1));//true
	console.log(Array.isArray(array2));//false

21.join() 方法用于把数组中的所有元素转换一个字符串，元素是通过指定的分隔符进行分隔的,返回值是一个字符串

语法：array.join(separator)
参数：separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

	var array = ['1','2','3','4'];
	var ArrBox = array.join('--');
	console.log(ArrBox);//1--2--3--4

22.keys() 方法用于从数组创建一个包含数组键的可迭代对象，如果对象是数组返回 true，否则返回 false

语法：array.keys()
iterable：一个具有可枚举属性并且可以迭代的对象。
for…of 语句创建一个循环来迭代可迭代的对象

	var array = ['a','b','c','d'];
	var ArrBox = array.keys();
	console.log(ArrBox);//Array Iterator {}
	for(key of ArrBox){
    console.log(key);//0 1 2 3
  	};

23.lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。如果要检索的元素没有出现，则该方法返回 -1

语法：array.lastIndexOf(item,start)
参数：item 必需。规定需检索的字符串值。
start 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

	//当只有一个参数的时候
	var array = ['1','2','3','2'];
	var ArrBox = array.lastIndexOf('2');
	console.log(ArrBox);//3 从后往前开始检索
	//当有两个参数的时候
	var array = ['1','2','3','2'];
	var ArrBox = array.lastIndexOf('2',array.length - 2);
	console.log(ArrBox);//1 从后往前开始检索,开始检索的位置是从倒数第二个开始

24.map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素

语法：array.map(function(currentValue,index,arr), thisValue) 同11

	var array = ['1','2','3','4'];
	var ArrBox = array.map(function(currentValue){
		return currentValue * 10
	});
	console.log(ArrBox);//[10, 20, 30, 40]

25.reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数：function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
参数描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值

	var array = [1,2,3,4];
	var ArrBox = array.reduce(function(total,currentValue){
		console.log(total,currentValue);
		// 0 1 
		// 1 2
		// 3 3
		// 6 4
		return total + currentValue
	},0);
	console.log(ArrBox);// 10

26.reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加

语法：同上

	var array = [1,2,3,4];
	var ArrBox = array.reduceRight(function(total,currentValue){
		console.log(total,currentValue);
		// 4 3
		// 1 2
		// -1 1
		// -2
		return total - currentValue
	});
	console.log(ArrBox);//-2

27.slice() 方法可从已有的数组中返回选定的元素

语法：array.slice(start, end)
参数：
start 可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

	var array = [1,2,3,4];
	console.log(array.slice(1));//[2, 3, 4] 从索引1截取到最后
	console.log(array.slice(-2));//[3, 4] 从原数组中的倒数第几个元素开始提取
	console.log(array.slice(1,2));//[2] 选取索引1到索引2的元素（不包含索引2）
	console.log(array.slice(-2,-1));//[2] 选取倒数第二个到倒数第一个（不包含倒数第一个）

28.some() 方法用于检测数组中的元素是否满足指定条件（函数提供）

如果有一个元素满足就会返回ture，剩下的不会在进行检测。没有满足的返回false
语法：array.some(function(currentValue,index,arr),thisValue) 同11

	var array = [1,2,3,4];
	var ArrBox = array.some(function(currentValue){
		return currentValue > 2
	});
	console.log(ArrBox);//true

29.toString() 方法可把数组转换为字符串，并返回结果,数组的所有值用逗号隔开

语法：array.toString()

	var array = ['1','2','3','4'];
	var ArrBox = array.toString();
	console.log(ArrBox);//1,2,3,4

30.valueOf() 方法返回 Array 对象的原始值

语法：array.valueOf()
Array：返回数组对象本身。
Boolean：返回布尔值
Date：存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function：返回函数本身。
Number：返回数字值。
Object：返回对象本身。这是默认情况。
String：返回字符串值。
Math 和 Error 对象没有 valueOf 方法。

	//返回数组本身
	var array = ['xiaoming','1','2'];
	console.log(array.valueOf() == array);//true
	
	//返回布尔值
	var boolean = true
	console.log(boolean.valueOf() == boolean);//true
	// new一个Boolean对象
	var newBool = new Boolean(true); // Boolean {true}
	newBool.valueOf() // true
	// valueOf()返回的是true，两者的值相等
	console.log(newBool.valueOf() == newBool);   // true
	// 但是不全等，两者类型不相等，前者是boolean类型，后者是object类型
	console.log(newBool.valueOf() === newBool);   // false
	
	//返回时间戳
	var date = new Date(2021, 11, 2, 13, 04, 59, 230);
	console.log(date.valueOf());//1638421499230 返回时间戳
	
	//返回函数本身
	var function = function foo(){};
	console.log(function.valueOf() == function);//true
	
	//返回数字值
	var number = 5;
  	console.log(number.valueOf() == number );//true
	
	//返回对象本身
	var object = {name: "张三", age: 18};
	console.log(object.valueOf() == object);//true

	//返回字符串本身
	var string = 'xiaoming';
	console.log(string.valueOf() == string);//true

三、数组去重的方法

1.利用ES6中的 Set 方法去重

	let arr = [1,2,3,4,1,2];
	let set1 = new Set(arr);
	console.log(set1);//Set(3) {1, 2, 3} 此时时类数组，不是真正的数组
	
	let newArr1 = Array.from(set1); //第一种方法可以使用Array.from()将类数组转换成真正的数组
	console.log(newArr1);//[1, 2, 3, 4]
	
	let newArr2 = [...set1];//第二种方法直接结构赋值，也可以得到一个真正的数组
	console.log(newArr2);//[1, 2, 3, 4]

2.双层for循环去重

	var arr = [1,2,3,4,1,2];
    for(var i = 0;i<arr.length;i++){
      for(var j = i+1;j<arr.length;j++){
        console.log(arr[i],arr[j]);
        if(arr[i] == arr[j]) {
          //如果数据相同则通过splice删除一条相同的数据
          arr.splice(i,1);
           //i是第一层遍历的下标，因为上一步删除了一条数据，所以下标也需要减一，否则实际下标，要比数组中的数据更多
          i--;
          //j 也同样需要和i一样减一，保持遍历依旧同步判断
          j--;
        }

      }
    }
    console.log(arr);// [3, 4, 1, 2]

3.利用数组的indexOf方法去重

	let arr = [4,5,6,2,3,2,4,5];
    let newArr = []
    for(var i=0;i<arr.length;i++) { //循环arr数组
      if(newArr.indexOf(arr[i]) == -1) {
        newArr.push(arr[i]);
      }
    }
    console.log(newArr);//[4, 5, 6, 2, 3]

4.利用数组的includes方法去重

    let arr = [4,5,6,2,3,2,4,5];
    let newArr = []
    for(var i=0;i<arr.length;i++) {
      if(!newArr.includes(arr[i])){ 
        newArr.push(arr[i])
      }
    }
    console.log(newArr);//[4, 5, 6, 2, 3]

5.利用数组的filter方法去重

	let arr = [4,5,6,2,3,2,4,5];
    let newArr = arr.filter(function(item,index){
    console.log(arr.indexOf(item,0),index);
    //arr.indexOf(item,0)循环返回元素所在的位置,有两个相同的元素只会返回第一个元素的索引
    //0 0
   //1 1
   //2 2
   //3 3 
   //4 4
   //3 5
   //0 6
   //1 7
      return arr.indexOf(item,0) === index
    })
    console.log(newArr);/[4, 5, 6, 2, 3]