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

虽然经常使用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);

运行结果:
这里写图片描述

扫描二维码关注公众号,回复: 5343243 查看本文章

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);
1
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)

猜你喜欢

转载自blog.csdn.net/csdn_duanjiao2016/article/details/78061101