数组方法总结

一、总结

1.寻找符合条件元素 ，返回布尔值

找到第一个，就返回 不要使用Array.indexOf，使用Array.includes

2.寻找符合条件元素 ，返回元素

找到第一个，就返回不要使用Array.filter，使用Array.find

3.寻找符合条件元素 ，返回布尔值

遍历数组，返回 不要使用Array.find，使用Array.some

4.寻找所有符合条件元素 ，返回数组

遍历数组，返回 不要使用forEach，使用filter

二、方法使用

预览

• arr.join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话默认逗号为分隔符
• arr.push('sss')和pop()：数组末尾添加元素，删除元素
• arr.unshift(''111)和 shift()：数组头部添加元素，删除元素
• arr.sort(compare)：按升序排列数组项
• arr.reverse()：反转数组项的顺序。
• concat(arr)：将参数添加到原数组中。返回数组
• slice(1,3)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组1,2 返回数组
• splice():实现删除、插入和替换。返回数组
• arr.indexOf('22',0)和 lastIndexOf() :接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。 未找到返回-1，找到返回个数
• forEach() :对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。
• map():指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
• filter() :“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
• every() :判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
• some() :判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
• reduce()和 reduceRight() :迭代数组的所有项，然后构建一个最终返回的值;一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
• find():返回满足条件的第一个元素的值,如果没有符合条件的元素返回 undefined
• Array.from():方法是用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组。
• Array.of():方法是将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。
• findIndex ():findIndex和find差不多，不过默认返回的是索引，如果没有符合条件的元素返回 -1
• fill()：方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。返回数组
• keys()、values()、entries()：这三个方法都是返回一个遍历器对象，可用for...of循环遍历，唯一区别：keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。
• includes()：方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
• copyWithin()：方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员，返回数组

1.sort()

在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元数组被改变)

为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

function compare(value1, value2) {
  if (value1 < value2) {
    return -1;
  } else if (value1 > value2) {
    return 1;
  } else {
    return 0;
  }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]

2.concat()

concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)

从上面测试结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组呢？

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

上述代码中，arrCopy2数组的第五项是一个包含两项的() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)

从上面测试结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组呢？

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

上述代码中，arrCopy2数组的第五项是一个包含两项的数组，也就是说concat方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数组项当作一项添加到arrCopy2中。

3.splice()

splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。

删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

4.forEach()

//forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
  console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

5.map()

//map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。 //下面代码利用map方法实现数组中每个数求平方。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
  return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

6.filter()

//filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {   
  return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

7.every()

every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
  return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
  return x < 3;
}); 
console.log(arr3); // false

8.some()

some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
  return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
  return x < 1;
}); 
console.log(arr3); // false

9.reduce()和 reduceRight()

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

下面代码用reduce()实现数组求和，数组一开始加了一个初始值10。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25

三、ES6数组方法

1.Array.from()

方法是用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组。

let json ={
   '0':'卢',
   '1':'本',
   '2':'伟',
   length:3
}
let arr = Array.from(json);
console.log(arr); // ["卢", "本", "伟"]	

2.Array.of()

//将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。

<script>
	let arr1 = Array.of(1,2,3);	
	let arr2 = Array.of([1,2,3]);
	let arr3 = Array.of(undefined);
	let arr4 = Array.of();
	console.log(arr1); // [1, 2, 3]
	console.log(arr2); // [[1, 2, 3]]
	console.log(arr3); // [undefined]
	console.log(arr4); // []
</script>

3.find()

返回通过测试（函数内判断）的数组的第一个元素的值 方法返回通过测试（函数内判断）的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。 回调函数可以接收3个参数，依次为当前的值（currentValue）、当前的位置（index）、原数组（arr） 注意：find() 对于空数组，函数是不会执行的。find() 并没有改变数组的原始值。

<script>
	let Arr = [1,2,5,7,5,9];
	let result1 = Arr.find(function(currentValue,index,arr){			
		return currentValue>5;
	});
	let result2 = Arr.find(function(currentValue,index,arr){			
		return currentValue>9;
	});
	console.log(result1); // 7
	console.log(result2); // undefined
</script>

find()实现根据id取出数组中的对象

<script>
let Arr = [
	{
		id:1,
		name:"张三"
	},
	{
		id:2,
		name:"李四"
	}		
];
let obj = Arr.find(function(currentValue,index,arr){			
	return currentValue.id===1;
});
console.log(obj.name); // 张三
</script>

4.findIndex ()

findIndex和find差不多，不过默认返回的是索引，如果没有符合条件的元素返回 -1

<script>
	let Arr = [1,2,5,7,5,9];
	let result1 = Arr.findIndex(function(currentValue,index,arr){			
		return currentValue>5;
	});
	let result2 = Arr.findIndex(function(currentValue,index,arr){			
		return currentValue>9;
	});
	console.log(result1); // 3
	console.log(result2); // -1
</script>

5.fill()

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法：array.fill(value, start, end) value：必需。填充的值。 start：可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。 end：可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

<script>
    let arr = [1,2,3,4,5,6];
    arr.fill(0);  // [0, 0, 0, 0, 0, 0]
    arr.fill(0,1);  // [1, 0, 0, 0, 0, 0] 
    arr.fill(0,1,2);  // [1, 0, 3, 4, 5, 6]
    arr.fill(0,-1);  // [1, 2, 3, 4, 5, 0]
    arr.fill(0,1,-1);  // [1, 0, 0, 0, 0, 6]
</script>

6.遍历数组方法 keys()、values()、entries()

这三个方法都是返回一个遍历器对象，可用for...of循环遍历，唯一区别：keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

keys()

<script>
	let arr = ["a","b","c","d"];
	for(let i of arr.keys()){
		console.log(i);
	}
    //打印：
    // 0
    // 1
    // 2
    // 3
</script>
values()

<script>
	let arr = ["a","b","c","d"];
	for(let i of arr.values()){
		console.log(i);
	}
    //打印：
    // a
    // b
    // c
    // d
</script>
entries()

<script>
    let arr = ["a","b","c","d"];
    for(let i of arr.entries()){
        console.log(i);
    }
    //打印：
    // [0, "a"]
    // [1, "b"]
    // [2, "c"]
    // [3, "d"]
    for(let [idx,item] of arr.entries()){
        console.log(idx+":"+item);
    }
    //打印：
    // 0:a
    // 1:b
    // 2:c
    // 3:d
</script>

7.includes()

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

语法：arr.includes(searchElement , fromIndex)

searchElement ： 必须。需要查找的元素值。

fromIndex：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

<script>
	let arr = ["a","b","c","d"];
	let result1 = arr.includes("b");
	let result2 = arr.includes("b",2);
	let result3 = arr.includes("b",-1);
	let result4 = arr.includes("b",-3);
	console.log(result1);  // true
	console.log(result2);  // false
	console.log(result3);  // flase
	console.log(result4);  // true
</script>

8.copyWithin()

方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员

语法：array.copyWithin(target , start , end)

target ：必需。从该位置开始替换数据。

start ：可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。

end： 可选。到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

<script>
    let arr = [1,2,3,4,5,6];
    let result1 = [1,2,3,4,5,6].copyWithin(0);
    let result2 = [1,2,3,4,5,6].copyWithin(0,1);
    let result3 = [1,2,3,4,5,6].copyWithin(1,3,5);
    let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1);
    let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6);
    console.log(result1);  // [1, 2, 3, 4, 5, 6]
    console.log(result2);  // [2, 3, 4, 5, 6, 6]
    console.log(result3);  // [1, 4, 5, 4, 5, 6]
    console.log(result4);  // [1, 3, 4, 5, 5, 6]
    console.log(result5);  // [1, 3, 4, 5, 6, 6]
</script>

参考博客

js数组方法大全

javascript数组array方法indexOf,includes,filter,find,some,map,reduce区别及使用实例

js数组常用方法

MDN