JS数组方法总结shift()、unshift()、pop()、push()、concat()、splice()、filter()、map()、some()、every()、forEach()等方法

JS数组方法总结

虽然经常使用JS数组的方法，但重来没有真正的全部总结过，这次把编程过程中我常见的数组方法列出来。

shift、unshift、pop、push、splice、reverse、sort、copyWithin、fill这几个方法会修改原数组。

concat、slice、join、filter、map、some、every、forEach、lastIndexOf、indexOf、reduce、reduceRight、find、findIndex这几个方法不会

测试数组

var array = new Array(1,2,3,4,5,6,7,8,9,10);
var nullarray = new Array();//空数组

1.shift()

删除原数组第一项，并返回删除元素的值，如果数组为空则返回undefined。该方法会改变原来的数组，而不会创建新的数组。

console.info(array);
console.info(nullarray);
console.info(array.shift());//返回删除元素的值
console.info(nullarray.shift());//空数组返回undefined
console.info(array);//数组变化了

运行结果：



2.unshift()

将参数添加到原数组开头，并返回数组的长度。该方法会改变原来的数组，而不会创建新的数组。

console.info(array);
console.info(array.unshift(-1,0));//向数组开头插入-1、0，返回插入后数组长度。
console.info(array);

运行结果：



3.pop()

删除原数组最后一项，并返回删除元素的值，如果数组为空则返回undefined，该方法会改变原来的数组，而不会创建新的数组。

console.info(array);
console.info(array.pop());//删除最后一项，并返回数组长度
console.info(array);//数组有变化
console.info(nullarray.pop());//空数组返回undefined
console.info(nullarray);

运行结果：



4.push()

将参数添加到原数组末尾，并返回数组的长度，该方法会改变原来的数组，而不会创建新的数组。

console.info(array);
console.info(array.push(11,12));//向数组末尾插入数据并返回数组长度
console.info(array);

运行结果：



5.splice(index,howmany,item1,…..,itemX)

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。index开始的下标，howmany删除多少个，item1…itemx为删除后插入的元素。该方法会改变原来的数组，而不会创建新的数组。

console.info(array);
console.info(array.splice(5,2,'x','y','z'));
console.info(array);//该方法会改变原始数组。

运行结果：



6.reverse()

reverse() 方法用于颠倒数组中元素的顺序。该方法会改变原来的数组，而不会创建新的数组。

console.info(array);
console.info(array.reverse());
console.info(array);

运行结果：



7.concat()

返回一个新数组，数组合并，参数可以是具体的值，也可以是数组对象。可以是任意多个。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var contactarray = new Array(11,12,13,14,15,16,17,18,19,20);
console.info(array);
console.info(array.concat(contactarray));
console.info(array);//**注意原数组没有变**

运行结果：



8.slice(start,end)

slice() 方法可从已有的数组中返回选定的元素。返回一个新的数组，包含从 start 到 end （不包括该元素）的中的元素。该方法不会改变现有的数组

console.info(array);
console.info(array.slice(3,7));
console.info(array);

运行结果：



9.join(separator)

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。该方法不会改变现有的数组

console.info(array);
console.info(array.join("|"));
console.info(array);

运行结果：



10.sort()

sort() 方法用于对数组的元素进行排序。参数可以为函数。该方法会改变原来的数组，而不会创建新的数组。

function sortNumber(a,b){//自己设计的排序函数
return a-b;
}
var sortarray =  new Array(4,2,6,1,3,4,0,10,6,7,3,8);
console.info(sortarray);
console.info(sortarray.sort());//默认按首字符ascii码排序
console.info(sortarray);
console.info(sortarray.sort(sortNumber));
console.info(sortarray);

运行结果：



ES5提出的

11.filter()过滤

array.filter(function(currentValue,index,arr), thisObject )

参数说明：

function： 要对每个数组元素执行的回调函数。

function(currentValue,index,arr)

currentValue：必须。当前元素的值

index：可选。当期元素的索引值

arr：可选。当期元素属于的数组对象

thisObject ： 可选。在执行回调函数时定义的this对象。如果省略了 thisValue ，”this” 的值为 “undefined”

对数组中的每个元素都执行一次指定的函数（callback），并且创建一个新的数组，该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略，同时，新创建的数组也不会包含这些元素。

回调函数可以有三个参数：当前元素，当前元素的索引和当前的数组对象。

如参数 thisObject 被传递进来，它将被当做回调函数（callback）内部的 this 对象，如果没有传递或者为null，那么将会使用全局对象。

filter 不会改变原有数组，记住：只有在回调函数执行前传入的数组元素才有效，在回调函数开始执行后才添加的元素将被忽略，而在回调函数开始执行到最后一个元素这一期间，数组元素被删除或者被更改的，将以回调函数访问到该元素的时间为准，被删除的元素将被忽略。

function isBigEnough(element){//判断大于5的元素
return (element>=5);
}
console.info(array);
console.info(array.filter(isBigEnough));//数组元素会依次传人
console.info(array);

运行结果：



12.map()处理

array.map(function(currentValue,index,arr), thisValue)；

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

function sqrt(element){
return element*element;
}
console.info(array);
console.info(array.map(sqrt));
console.info(array);

13.some()

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

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素，则返回false。

function checknum(num) {
return num >= 11;
}
console.info(array);
console.info(array.some(checknum));
array.push(11,12);
console.info(array);
console.info(array.some(checknum));

运行结果：



14.every()

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

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

function checknum(num) {
return num >= 11;
}
console.info(array);
console.info(array.every(checknum));
array.push(11,12);
console.info(array);
console.info(array.every(checknum));

运行结果：



15.forEach()

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

注意: forEach() 对于空数组是不会执行回调函数的。

array.forEach(myFunction);

16.lastIndexOf()

array.lastIndexOf(item,start)

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

如果要检索的字符串值没有出现，则该方法返回 -1。

该方法将从尾到头地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的结尾（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一个字符在 stringObject 中的位置。stringObject 中的字符位置是从 0 开始的。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");//return 2

17.indexOf()

类似lastIndexOf()

18.reduce()

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

注意: reduce() 对于空数组是不会执行回调函数的。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

total 必需。初始值, 或者计算结束后的返回值。

currentValue 必需。当前元素

currentIndex 可选。当前元素的索引

arr 可选。当前元素所属的数组对象。

initialValue 可选。传递给函数的初始值

function getSum(total, num) {
return total + num;
}
console.info(array);
console.info(array.reduce(getSum));
console.info(array);

运行结果：



19.reduceRight()

从右边开始

20.findIndex()

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

findIndex() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。

如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

21.find()

find() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。

如果没有符合条件的元素返回 -1

注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

22.copyWithin()

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

array.copyWithin(target, start, end)

target 必需。复制到指定目标索引位置。

start 必需。元素复制的起始位置。

end 可选。停止复制的索引位置 (默认为 array.length)

23.fill() IE 11 及更早版本不支持 fill() 方法。

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

array.fill(value, start, end)

value 必需。填充的值。

start 可选。开始填充位置。

end 可选。停止填充位置 (默认为 array.length)