js常见的数组方法（内含代码）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44489221/article/details/102687774

数组的方法有很多个，在此结合例子整理出来，方便需要的时候查看。

方法名	描述
concat()	连接多个数组
join()	将数组元素拼接成字符串
reverse()	数组元素反转
slice()	数组元素的截取(返回新数组,不改变原数组)
sort()	数组元素的排序(参数接收一个排序函数)
push()	从数组的最后面添加元素(后插)
pop()	从数组的最后面删除元素(后删)
unshift()	从数组的最前面插入元素(前插)
shift()	从数组的最前面删除元素(前删)
splice(a,b,c)	数组元素的增删改
indexOf()	查找对应下标(找不到返回-1)
lastIndexOf()	从后往前查找对应下标（找不到返回-1）
includes()	判断数组里面是否存在对应的值,存在返回true, 不存在返回false(includes对NaN是否存在判断准确, indexOf无法正确判断)
Array.isArray()	判断是否为数组
Array.from()	将类数组或可遍历对象转换成真正的数组
forEach()	遍历
filter()	过滤
every()	判断每一个元素是否符合条件
some()	判断至少有一个元素是否符合条件
reduce()	迭代数组的每一个元素
map()	映射（对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组）
find()	查找(根据条件查找满足的第一个元素)
flat()	数组扁平化(参数为扁平化的深度,Number,可以是Infinity表示无穷)

---

- concat()–连接一个或多个数组

var myArr1 = [1,2,3];
var myArr2 = [4,5,6];
var myArr3 = [7,8,9];
 
console.log(myArr1.concat(myArr2,myArr3));	//[1, 2, 3, 4, 5, 6, 7, 8, 9]

- join() --将数组元素拼接成字符串（参数接收拼接符）

var arr1 = [1,2,3];
console.log(arr1.join("到"));	//'1到2到3'--以'到'对arr1数组的元素进行拼接
 
var arr2 = ['a','b','c'];
console.log(arr2.join(''));    //'abc'--以空字符串为拼接符对arr2数组进行拼接

- reverse() --将数组元素进行反转

var arr = [1,2,3,4,5,'a'];
console.log(arr.reverse());    //['a',5,4,3,2,1]

- slice()–数组元素的截取

var arr = [1,2,3,4,5,6,7,8,9];
/*从开始下标截取到结束下标的元素(不包含结束下标)。
 *当出现负数时，将负数加上数组长度的值（9）来替换该位置的数；*/
var arr1 = arr.slice(1,-1);    //相当于arr.slice(1,8)
var arr2 = arr.slice(1,4);
var arr3 = arr.slice(-4,-2);   //相当于arr.slice(5,7)
var arr4 = arr.slice(2);    //相当于arr.slice(2,arr.length-1)
 
console.log(arr1); //[2,3,4,5,6,7,8]
console.log(arr2); //[2,3,4]
console.log(arr3); //[6, 7]
console.log(arr4); //[3,4,5,6,7,8,9]

- sort()–数组元素排序（参数接收一个排序函数）

var arr= [11,99,33,4,4,35,3,46,9];
console.log(arr.sort((a,b)=>a-b);    //升序[3, 4, 4, 9, 11, 33, 35, 46, 99]
console.log(arr.sort((a,b)=>b-a);    //降序[99, 46, 35, 33, 11, 9, 4, 4, 3]

- push()–向数组的最后面添加元素(返回数组长度, 会改变原数组)

//后插（返回数组长度，会改变原数组）
var arr1 = [1,2,3];
var arr2 = arr1.push(9,10,11);
console.log(arr2);	//6(返回数组长度)
console.log(arr1);	//改变原数组[1,2,3,9,10,11]

- pop()–删除数组的最后面的元素(返回被删除的元素)

//后删（返回被删除的元素,会改变原数组）
var arr1 = [1,2,3,4,5];
var arr2 = arr1.pop();
console.log(arr2);	//5(返回被删除的元素)
console.log(arr1);	//[1,2,3,4]

- unshift()–在数组的最前面插入元素(返回数组长度, 会改变原数组)

//前插（返回数组长度, 会改变原数组）
var arr1 = [1,2,3,4,5];
var arr2= arr1.unshift(0,'a','b');
console.log(arr2);	//8(返回新数组长度)
console.log(arr1);	//[0, 'a', 'b', 1, 2, 3, 4, 5]

- shift()–删除数组的最前面的元素

//前删--返回被删除的元素,会改变原数组
var arr1 = [1,2,3,4,5];
var arr2= arr1.shift();
console.log(arr2);    //1(返回被删除的元素)
console.log(arr1);    //[2,3,4,5]

- splice(a,b,c)–数组元素的增删改

/*
 * arr1.splice(a,b,c)
 *    a: 操作的对应下标
 *    b: 删除个数
 *    c: 添加元素(多个用逗号隔开)--可省略
*/

//增
var arr1 = [1,2,3,4,5];
var arr2 = arr1.splice(2,0,8,9,10);	//增--第二个参数为0时, 不删除元素；第三个参数往后是添加的元素
console.log(arr2);	//[]删除元素数组（没有删除，所以数组为空）
console.log(arr1);	//[1,2,3,8,9,10,4,5]

//删
var arr3= arr1.splice(2,1);	//删--第二个参数不为0时,删除元素（此时arr1为[1,2,3,8,9,10,4,5]）
console.log(arr3);   //[3](返回被删除的元素)
console.log(arr1);	//[1,2,8,9,10,4,5]

//改
var arr4 = arr1.splice(4,1,666);//改--第二个参数不为0,且第三个参数有值时,为改（此时arr1为[1,2,8,9,10,4,5]）
console.log(arr4);	//[10]
console.log(arr1);	//[1,2,8,9,666,4,5]

- indexOf()–判断数组里面是否存在对应的值,存在则返回该值第一次出现时所在的下标，不存在则返回-1

var arr = ['a','b','c','a',2,4,'b'];
console.log(arr.indexOf('a'));	//0('a'第一次出现是在0下标)
console.log(arr.indexOf(5));	//-1(不存在则返回-1)

- lastIndexOf()–同上，区别在于从后往前找

var arr = ['a','b','c','a',2,4,'b'];
console.log(arr.lastIndexOf('a'));	//3
console.log(arr.lastIndexOf(5));	//-1(不存在则返回-1)

- include()–判断数组里面是否存在对应的值,存在返回true

/*includes对NaN是否存在判断准确, indexOf无法正确判断*/
var indexRes = [1, 2, 3, NaN].indexOf(NaN);
var includeRes = [1, 2, 3, NaN].includes(NaN);
console.log(indexRes);	//-1
console.log(includeRes); //true

- Array.isArray()–判断是否为数组

var arr = [1,2,3];
console.log(Array.isArray(arr));	//true
console.log(Array.isArray({myname: '小刘老师'}));	//false

- Array.from()–将类数组或可遍历对象转换成真正的数组

/*类数组（与数组格式相类似，但不可以使用数组的方法进行操作）*/
var arr = {
    0: 'name', 
    1: 'age',
    2: 'sex',
    3: ['user1','user2','user3'],
    'length': 4
}
var arr1 = Array.from(arr)
console.log(arr1) // ['name','age','sex',['user1','user2','user3']]

/*可遍历对象*/
var str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

- forEach()–遍历

var arr1 = [11,22,33];
arr1.forEach((a,b,c)=>{	//三个参数分别对应数组元素、下标、原数组
	console.log(a);		//数组元素(11 22 33)
	console.log(b);		//数组下标(0 1 2)
	console.log(c);		//原数组([11,22,33] [11,22,33] [11,22,33])
})

- filter()–过滤

var arr1 = [11,22,33];
var arr2 = arr1.filter((a,b,c)=>{
	console.log(a,b,c);	//分别对应数组元素、下标、原数组
	return a>20;	//根据这个条件将数组进行过滤，并返回符合条件的数组
});
console.log(arr2);	//[22,33]

// 过滤进行去重
/*由于indexOf查找相同元素时,只会返回第一个元素所在的下标,
*所以判断当前元素在原数组中的下标与自身下标相等时, 说明第一次出现*/
var arr1 = [11,33,44,22,33,44,11,55];
var arr2 = arr1.filter((val,ind,theArr)=>{
	return theArr.indexOf(val)==ind;	
})
console.log(arr2);	//[11,33,44,22,55]

- every()–判断每一个元素是否符合条件

var arr = [11,22,33,11,9,8,7,6];
var result1 = arr1.every(val=>{
	return val>11
})
var result2 = arr1.every(val=>{
	return val>5
})
console.log(result1);	//false(数组里面的每个元素均符合条件才返回true)
console.log(result2);	//true(数组里面的每个元素均符合条件才返回true)

- some()–判断至少有一个元素是否符合条件

var arr = [11,22,33,11,9,8,7,6];
var someRes = arr.some(val=>{
	return val>=11
})
console.log(someRes);	//true(数组里面的至少有一个元素符合条件即返回true)

- reduce()–迭代每一个元素

/*reduce(fn,[initialValue])
	fn(a,b,c,d)
	a: previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    b: currentValue （数组中当前被处理的元素）
    c: index （当前元素在数组中的索引）
    d: array （调用 reduce 的数组）
*/
var reduceRes = [1,2,3,4,5,6,7,8,9,10].reduce((val1,val2)=>{
	return val1*val2;
})
console.log(reduceRes);	//3628800(1到10的乘积)
			

/*reduce计算每个元素出现的次数*/
var names = ['AA', 'BB', 'AA', 'EE', 'FF','AA', 'EE', 'FF'];

var nameCount= names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++;
  }else{
    pre[cur] = 1;
  }
  return pre;
},{})
console.log(nameCount); //{AA: 3, BB: 1, EE: 2, FF: 2}

var arr = [1,2,2,1,4,1,3,3,4];
var arr1 = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur);
    }else{
      return pre;
    }
},[])
console.log(arr1);// [1, 2, 4, 3]

- map–映射(对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组)

var arr = [1,2,4];
var arr1 = arr.map(item=>item*2);
console.log(arr1);	//[2,4,8]

- find()–查找(根据条件查找满足的第一个元素)

var arr = [11,22,33,11,9,8,7,6];
var findRes = arr1.find(val=>{
	return val>25;
});
console.log(findRes);	//33

- flat()–数组扁平化

var arr10 = [
	[1, [2, 3, [4, [5, [6]]]]],[7],[8,[9]]
];
console.log(arr10.flat(2));	//[1, 2, 3, [4,[5,[6]]], 7, 8, 9]
console.log(arr10.flat(4));	//[1, 2, 3, 4, 5, [6], 7, 8, 9]
console.log(arr10.flat(Infinity));//[1, 2, 3, 4, 5, 6, 7, 8, 9]