前言：js数组自带了很多属性方法，这些方法为我们写程序提供了方便，因此，也是笔试、面试中经常会被问到的，本文总结了常用的数组的方法，提醒大家要注意这些方法是否改变了原有数组，返回值是什么，如果不注意这些，可能会导致一些莫名其妙的bug。在文末我将给出例子说明这一点。
一、数组中常用的方法：
Array.prototype.concat 将两个数组拼接，返回拼接后的新数组, 不改变原有数组。
var arr1 = [1, 2, 3]
var arr2 = [4, 5, 6]
console.log(arr1.concat(arr2))
// [1, 2, 3, 4, 5, 6]
console.log(arr1)
// [1, 2, 3]
console.log(arr2)
// [4, 5, 6]
Array.prototype.copyWithin 浅复制数组的一部分到同一数组中的另一个位置，并返回它，原数组值被改变，而不修改其大小 。
var arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(0, 3, 4))
// [4, 2, 3, 4, 5]
arr.copyWithin(target[, start[, end]])
target: 复制序列到该位置，如果是负数，target将从末尾开始计算。
start： 开始复制元素的起始位置，如果是负数，target将从末尾开始计算。
end: 复制元素的结束为止，但不包括end这个位置的元素。
Array.prototype.entries 方法返回一个新的Array Iterator对象，该对象包含数组中的每个索引的健/值对，原数组不变。
var arr1 = ['a', 'b', 'c']
var iter = arr1.entries()
console.log(iter.next().value)
// [0, 'a']
console.log(iter.next().value)
// [1, 'b']
Array.prototype.every()方法测试数组的所有元素是否都通过了指定函数的测试。如果都通过返回true,否则返回false。
function isBelowThreshold(currentValue) {
return currentValue < 40
}
var arr1 = [1, 30, 39, 29, 10, 13]
console.log(arr1.every(isBelowThreshold))
// true
Array.prototype.fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，该方法会改变原数组的值，并返回被修改后的数组。
var arr1 = [1, 2, 3, 4]
console.log(arr1.fill(0, 2, 4))
// [1, 2, 0, 0]
arr.fill(value[, start[, end]])
value: 填充的值；
start: 开始索引值；
end:结束索引值，不包括end值。
Array.prototype.filter()方法返回一个新数组，其包含通过所提供函数实现的测试的所有元素，不改变原数组。
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// ["exuberant", "destruction", "present"]
Array.prototype.find()方法返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined。
var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
return element > 10;
});
console.log(found);
// 12
Array.prototype.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1
var arr1 = [5, 12, 8, 130, 44];
var found = arr1.findIndex(function(element) {
return element > 13;
});
// 3
Array.prototype.forEach()方法对数组中的每个元素执行一次提供的函数，不会改变原数组的值。
var arr1 = ['a', 'b', 'c']
arr1.forEach(function(element) {
console.log(element)
})
// a
// b
// c
Array.prototype.includes()方法判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则则返回false。不会改变原数组的值。
var arr1 = [1, 2, 3]
console.log(arr1.includes(2))
// true
Array.prototype.indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，返回-1。不改变原数组的值。
Array.prototype.join()方法将一个数组的所有元素连接成一个字符串并返回这个字符串。默认以','作为连接符。不改变原数组的值。
var elements = ['Fire', 'Wind', 'Rain']
console.log(elements.join());
// Fire,Wind,Rain
console.log(elements.join(''));
// FireWindRain
Array.prototype.keys()方法返回一个新的Array迭代器，它包含数组中的每个索引的键。不改变原数组。
var array1 = ['a', 'b', 'c'];
var iterator = array1.keys();
for (let key of iterator) {
console.log(key); // expected output: 0 1 2
}
Array.prototype.lastIndexOf()方法返回指定元素在数组中的最后一个的索引，如果不存在则返回-1。从数组后面向前查找，从fromIndex开始，fromIndex默认为 数组长度-1，不改变原数组。
var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
// 3
console.log(animals.lastIndexOf('Tiger'));
// 1
Array.prototype.map() 方法，返回该数组中的每个元素都调用一个提供的函数后的结果。 不改变原数组。
var arr1 = [1, 4, 9, 16]
const map1 = array1.map(x => x * 2)
console.log(map1)
// [2, 8, 18, 32]
Array.prototype.pop()方法从数组中删除最后一个元素，并返回该元素的值，此方法更改数组的长度。
var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
// tomato
console.log(plants);
// ["broccoli", "cauliflower", "cabbage", "kale"]
Array.prototype.push() 方法将一个或多个元素添加到数组的末尾，改变了原数组，并返回新数组的长度。
var animals = ['pigs', 'goats', 'sheep'];
console.log(animals.push('cows'));
// 4
console.log(animals);
// ["pigs", "goats", "sheep", "cows"]
animals.push('chickens');
console.log(animals);
// Array ["pigs", "goats", "sheep", "cows", "chickens"]
Array.prototype.reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值（从左到右）开始缩减，最终为一个值并返回该值，不改变原数组的大小。
const arr1 = [1, 2, 3, 4]
const reducer = (accumulator, currentValue) => accumulator + currentValue
console.log(arr1.reduce(reducer))
console.log(arr1.reduce(reducer, 5))
arr.reduce(callback[, initialValue])，
callback执行数组中每个值的函数，它是上一次调用回调时返回的累积值，或者initialValue
currentValue 数组中正在处理的元素
currentIndex 数组中正在处理的当前元素的索引。如果提供了initialValue,则索引号为0，否则索引为1
array 调用reduce的数组。
initialValue用作第一个调用callback的第一个参数的值，如果没有提供初始值，则将使用数组中的第一个元素，在没有初始值的空数组上调用reduce将报错。
Array.prototype.reduceRight()方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左）将其减少为单个值
Array.prototype.reverse()方法颠倒数组中元素的位置，并返回该数组的引用，会改变原数组。
Array.prototype.shift()方法删除数组中的第一个元素，并返回该元素的值，此方法改变数组的长度。
Array.prototype.slice()方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原数组不会被修改。注意：与copyWithin()方法的区别在于：copyWithin方法选择数组的一部分复制到自身某处，而slice是拷贝到一个新的数组对象。
Array.prototype.some() 方法与every向对应，测试数组中的某些元素是否通过由提供的函数的测试，只要有大于等于1个则返回true，同样不改变原数组的值。
Array.prototype.sort()方法用就地(in-place)排序算法(指的是不占用额外的内存或占用常数的内存) 对数组元素进行排序，并返回排序后的数组，sort方法是会修改原数组的。sort排序不一定是稳定的，默认的排序是根据字符串的Unicode码点。
Array.prototype.splice()方法通过删除现有元素和/或添加新元素来更改一个数组的内容，如果删除了元素，则会返回被删除元素的数组，如果是新添元素，则返回空数组。会改变原数组。
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start 指定修改的开始位置（从0计数）如果超过了数组的长度，则从数组末尾开始添加内容，如果是负值，则表示从数组末位开始的第几位(从-1计数),若只使用start参数而不使用deleteCount,item，如array.splice(start)表示删除[start, end]的元素。
deleteCount 整数，表示要移除的数组元素的个数，如果为0，则不删除元素。
item1, item2, .... 要添加进数组的元素，从start开始，如果不指定，则splice()将只删除数组元素。
这些方法中不会改变原数组的有：concat entries every filter find findIndex forEach includes indexOf join keys lastIndexOf map reduce reduceRight slice some
会改变原数组的： copyWithin fill reverse pop push reverse shift sort splice
最后 举例说明注意数组方法的返回值和是否修改原数组的重要性：
栗子：
将数组var a = [1,2,3] 变成数组 [4,3,2,1] 下面的方法正确的是？
A. a.reverse().unshift(4)
B. a.push(4).reverse()
C. a.push(4);a.reverse()
D. a.splice(3,1,4).reverse()
答案：A C
A中reverse()改变数组自身并返回再调用unshift可以在数组首位添加元素并返回添加后的数组长度，此时a变成[4, 3, 2, 1]，所以a是可行的。
B中push()改变数组自身，但是返回新数组的长度，数值没有reverse方法，因此会报错。
C中先执行a.push(4)后数组变为[1, 2, 3, 4]，然后调用reverse()改变数组并返回。
D中splice(3, 1, 4)在索引为3出新增一个元素为4，正如上面所说，返回的是空数组[]，因此调用reverse后还是空数组。
网友评论