js数组方法总结,javascript 数组操作

　　本文已经给大家带来了一些关于javascript的知识，主要整理了数组操作函数的相关问题，包括元素删除、拼接、切片、concat等等。下面就一起来看看吧，希望对你有帮助。

　　【相关推荐：javascript视频教程，web前端】

数组进阶

　　上一篇文章介绍了数组的基本概念和数组元素的一些简单运算函数。其实array提供的功能有很多。

　　Push、pop、shift和unshift是操作数组开头和结尾的函数。上面已经提到了，本文不再赘述。

元素删除（对象方式）

　　上一篇文章已经简单介绍了数组是一个特殊的对象，我们可以尝试使用对象的属性删除方法：delete。

　　例如：

　　设arr=[1，2，3，4，5]；删除arr[2]；console . log(arr)；代码执行结果如下：

　　注意图中用黄色标记的位置。虽然删除了元素，但是数组的长度还是5，删除的位置多了一个空格。如果我们访问下标为2的元素，我们将得到以下结果：

　　出现这种现象的原因是delete obj.key通过key删除了对应的值，也就是说delete arr[2]删除了数组中2:3的键值对。当我们访问下标2时，它是未定义的。

　　在一个数组中，我们往往希望删除一个元素后，该元素的位置会被后续的一个元素填充，数组的长度会缩短。

　　这时候就需要splice()方法了。

splice()

　　需要提前注意的是，splice()方法的功能相当丰富，不能只是删除元素。下面是语法：

　　数组拼接(start [，deleteCount，E1，E2，en]) Splice方法从起始位置开始，删除deletecount元素，然后在适当的位置插入e1、e2、e3和其他元素。

删除一个元素

　　以下示例可以从数组中删除元素：

　　设arr=[1，2，3，4，5]arr.splice(0，1)；//删除第一个元素1console.log(arr)上面的代码删除数组中的第一个元素，执行结果如下：

删除多个元素

　　删除多个元素与删除一个元素相同，只需将第二个参数更改为指定的数字，例如：

　　设arr=[1，2，3，4，5]；arr.splice(0，3)；//删除前三个元素console . log(arr)；//[4，5]代码执行结果如下：

截断数组

　　如果我们只提供一个参数start，那么数组开始位置之后的所有元素都将被删除。例如：

　　设arr=[1，2，3，4，5]arr . splice(2)；//删除下标2及以下的所有元素console . log(arr)；//[1，2]代码执行结果：

元素替换

　　如果我们提供两个以上的参数，那么我们可以替换数组元素。例如：

　　设arr=[1，2，3，4，5]；arr.splice(0，2，“itm1”，“itm2”，“it m3”)；console . log(arr)；//[itm1 ， itm2 ， itm3 ，3，4，5]代码执行结果如下：

　　上面的代码实际上执行了两步，首先从0开始删除2个元素，然后在0插入3个新元素。

元素插入

　　如果我们将第二个参数(删除数量)更改为0，那么我们可以只插入元素而不删除它们。举个栗子：

　　设arr=[1，2，3，4，5]arr.splice(0，0， x ， y ， z )console . log(arr)；//[x ， y ， z1，2，3，4，5]

返回值

　　 splice()函数将返回已删除元素的数组。例如：

　　Arr=[1，2，3，4，5] let res=arr.splice (0，3， x ， y )console . log(arr)/[ x ， y ，4，5] console.log (res)//

负索引

　　我们可以使用负数来表示开始操作元素的位置。例如：

　　Let=[1，2，3，4，5] arr.splice (-1，1， x ， y ， z) console.log (arr)//[1，2，3，4， x ， y ， z

slice()

　　 slice()方法可以截取指定范围的数组，语法如下：

　　Arr.slice([start]，[end])返回一个新数组，从start开始，到end结束，但不包括end。

　　示例：

　　Let=[1，2，3，4，5] console.log (arr.slice (2，5))//[3，4，5] console.log (arr.slice (1，3))//[2，3]代码执行结果：

　　Slice()也可以使用负数下标：

　　Let=[1，2，3，4，5]console . log(arr . slice(-3))//[3，4，5] console.log (arr.slice (-5，-1))//[1，2，3，4]

　　如果只为slice()方法提供了一个参数，它将像splice()一样被截断到数组的末尾。

concat()

　　 concat()函数可以将多个数组或其他类型的值拼接成一个长数组。语法如下：

　　上面arr.concat(e1，e2，e3)的代码会返回一个新的数组，这个数组是由arr将e1，e2，e3拼接而成的。

　　示例：

　　设arr=[1，2，3] console.log (arr.concat ([4，5]，6，7，[8，9]))代码执行结果如下：

　　的普通对象，即使它们看起来与对象一样，仍将作为一个整体插入到数组中，例如：

　　Arr=[1，2] let obj={1: 1 ，2: 2} console.log (arr.concat (obj))代码执行结果：

　　但是，如果对象具有Symbol.isConcatSpreadable属性，它将被视为数组：

　　设arr=[1，2]设obj={0:x ，

　　1:y ，

　　[Symbol.isConcatSpreadable]:真，

　　长度：2} console.log (arr.concat (obj))代码执行结果：

forEach()

　　遍历整个数组，为每个数组元素提供一个运算函数。语法：

　　设arr=[1，2]arr.forEach((itm，idx，array)={

　　.})应用示例：

　　设arr=[1，2，3，4，5]arr.forEach((itm)={

　　Console.log(itm)})代码执行结果：

　　设arr=[1，2，3，4，5]arr.forEach((itm，idx，array)={

　　console . log(` arr[$ { array }]中的[$ {idx}]是$ {ITM} `)}代码执行结果：

indexOf、lastIndexOf、includes

　　类似于字符串，indexOf，lastIndexOf，includes可以匹配查询数组中指定元素的下标：

　　Arr.indexOf(itm，start):从起始位置开始搜索itm，如果找到返回下标则返回-1，否则返回；Arr.lastIndexOf(itm，start):逆序搜索整个数组，直到开始，返回找到的第一个下标(即数组的最后一个匹配)。如果找不到，返回-1；Arr.includes(itm，start):从起始位置开始搜索itm，如果找到则返回true，否则返回false示例：

　　设arr=[1，2，3，4，5，6， 7 ， 8 ， 9 ，0，0，true，False]console . log(arr . index of(0))//9 console . log(arr . lastindexof(0))//10 console . log(arr . includes(10))//False console . log(arr . includes(9))//False这些

　　NaN的处理

　　南是一个特殊的数字，三者在对待南上有微妙的区别：

　　Let=[NaN，1，2，3，NaN]console . log(arr . includes(NaN))//true console . log(arr . index of(NaN))//-1 console . log(arr . lastingdexof(NaN))//-1产生这个结果。

　　这些内容在前几章已经提到了。记得被遗忘的童鞋。

find、findIndex

　　在编程过程中，我们经常会遇到对象数组，对象无法直接与===进行比较。怎样才能从数组中找到满足条件的对象？

　　此时，应该使用find和findIndex方法。语法如下：

　　let result=arr . find(function(ITM，idx，array){

　　//itm数组元素

　　//idx元素下标

　　//数组数组本身

　　//传入一个判断函数，如果这个函数返回true，就返回当前对象itm})举个栗子，我们找name属性等于晓明的对象：

　　让arr=[

　　{id:1，姓名：小明 }，

　　{id:2，姓名：小红 }，

　　{id:3，name: Xiaojun }，]let Xiaoming=arr . find(function(ITM，idx，array){

　　if(itm.name==xiaoming )返回true})console.log(晓明)代码执行结果：

　　如果没有匹配的对象，将返回undefined。

　　上述代码也可以简化为：

　　让小明=arr.find ((ITM)=ITM.name==小明)的执行效果完全一样。

　　arr.findIndex(func)的用途和arr.find(func)几乎一样。唯一不同的是arr.findIndex返回符合条件的对象的下标而不是对象本身，找不到返回-1。

filter

　　 find和findIndex只能找到一个符合要求的对象。如果数组中有多个符合要求的对象，则需要使用filter方法。语法如下：

　　let results=arr.filter(函数(itm，idx，array){

　　//用法和find一样，但是会返回符合要求的对象数组。

　　//找不到返回的空数组})为例：

　　让arr=[

　　{id:1，姓名：小明 }，

　　{id:2，姓名：小红 }，

　　{id:3，name:xiaojunn}，]let RES=arr . filter(function(ITM，idx，array){

　　if(itm.name==晓明 itm.name==小红)返回true})console.log(res)代码执行结果：

map

　　 arr.map方法可以在数组的每个对象上调用一个函数，然后返回处理后的数组，这是数组最有用也是最重要的方法之一。

　　语法：

　　let arrNew=arr.map(function(itm，idx，array){

　　//返回新结果})比如返回字符串数组对应的长度数组：

　　Arr=[i ， am ， a ， student ]let arr new=arr . map((ITM)=ITM . length)//返回ITM . length console . log(arr new)//[1，2，1，7]代码执行结果

sort

　　 arr.sort对数组执行原地排序并返回排序后的数组。但是，由于原始数组已经改变，返回值实际上没有任何意义。

　　Let=[a ， c ， b] arr.sort () console.log (arr)代码执行结果：

　　数字数组

　　设arr=[1，3，2]arr.sort(函数(a，b){

　　if(a b)返回1；

　　if(a b)返回-1；

　　返回0；})代码执行结果：

　　排序函数中使用了Quick sort或者timsort算法，但是我们不需要关心这些，只需要关注比较函数就可以了。

　　比较函数可以返回任意数值，正数表示，负数表示，0表示等于，所以我们可以简化数值比较的方法：

　　Let=[1，3，2] arr.sort ((a，b)=a-b)如果要逆序排列，只需要交换A和B的位置：

　　设arr=[1，3，2]arr.sort((a，b)=b - a)字符串排序

　　不要忘记使用str.localeCompare(str1)方法进行字符串比较。

　　Arr=[asdfas ， success ， failures] arr.sort ((a，b)=a.locale compare (b))代码执行结果：

reverse

　　 arr.reverse用于反向数组。

　　设arr=[1，2，3]arr . reverse()console . log(arr)//[3，2，1]这个没什么好说的。

str.split()和arr.join()

　　还记得字符串拆分函数吗？字符串分割函数可以将一个字符串分割成一个字符数组：

　　Str=晓明，小红，小丽 let arr=str.split(，)/[晓明，小红] arr.join()方法与split方法相反，可以将一个数组组合成一个字符串。

　　举个栗子：

　　let arr=[1，2，3]let str=arr . join(；)console.log(str)代码执行结果：

reduce、reduceRight

　　 arr . reduce方法与arr.map方法类似，都是传入一个方法，然后依次在数组元素上调用这个方法。不同的是app.map方法处理数组元素时，每个元素调用都是独立的，而arr.reduce会把前一个元素的调用结果传递给当前的元素处理方法。

　　语法：

　　设res=arr.reduce(function(prev，itm，idx，array){

　　//prev是最后一次元素调用返回的结果。

　　//init会在执行第一个元素时充当前一个元素调用的结果}，[init])试想如何实现一个由数字组成的数组元素和？没有办法实现map。这时候就需要用arr.reduce了：

　　Arr=[1，2，3，4，5] let res=arr.reduce ((sum，ITM)=sum ITM，0) console.log (res)//15代码执行过程如下：

　　Arr.reduceRight和arr.reduce的用途相同，只是从右向左调用元素上的方法。

Array.isArray()

　　数组是对象的特例，使用typeof无法准确区分它们之间的区别：

　　console . log(type of { })//object console . log(type of[])//object都是对象，我们需要使用Array.isArray()方法做进一步的判断：

　　console . log(array . isarray({ }))//false console . log(array . isarray([]))//true

some、every

　　 arr . some(func)和arr.every(func)方法用于检查数字，执行机制与map类似。

　　some

　　对每个数组元素执行传入的方法，如果方法返回true，则立即返回true，如果所有元素都不返回true，则返回false。

　　every

　　对数组的每个元素执行传入的方法，如果所有元素都返回true，则返回true，否则返回false。

　　例如：

　　Let=[1，2，3，4，5]//确定是否存在元素console.log(arr.some((itm)={

　　if(itm 2)返回true}))//true//判断所有元素是否大于2console.log(arr.every((itm)={

　　if(itm 2)返回true}))//false

thisArg

　　在所有数组方法中，除了sort，都有一个不常见的固定参数thisArg，语法如下：

　　Arr.find (func，thisArg) arr.filter (func，thisarg) arr.map (func，thisArg)如果我们传入thisarg，那么它就会变成func中的this。

　　这个参数在正常情况下是没有用的，但是如果func是成员方法(object method)并且在方法中使用了这个，那么thisArg就很有意义了。

　　例如：

　　让obj={

　　数字：3，

　　func(itm){

　　console.log(this)

　　返回itm this.num//查找大于3的数字

　　}} let arr=[1，2，3，4，5，6，7]let newarr=arr . filter(obj . func，obj) console.log (newarr)代码执行结果：

　　在这里，我们可以看到func中的这个输出是我们传入的thisArg的值。

　　如果我们使用object member方法而没有指定thisArg的值，这将是未定义的，这将导致程序错误。

　　【相关推荐：javascript视频教程，web前端】以上是JavaScript数组操作函数的总结和分享的详细内容。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。