本文主要介绍javascript的数组方法，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

目录

1:concat()；2:join()；3:pop()；4:shift()；5:un shift()；6:push()；7:反向()；8:sort()；8.1: 8.2: 8.3:排序问题9:slice()；10:splice()11:toString()；12:value of()；13:index of()；14:lastIndexOf()；15:forEach()；16:map()；17:filter()；18:every()；19:有的()；20 . reduce()；1.减少右侧()22阵列。从()23阵列。属于()24arr。copywithin()总结在日常开发中，我们会接触到js中数组的一些方法。对于我们来说，可以遍历这些方法来达到我们想要的结果，但是因为方法很多，有些方法不常用，过一段时间可能就忘了。所以在这里我会把它们整理出来。

1：concat();

功能：合并数组，可以合并一个或多个数组，合并数组后的数据返回，不改变原数组；

var str1=[12，2，'你好']；var str 2=[' world ']；

console . log(str 1 . concat(str 2))；//[12，2，'你好'，'世界']

console . log(str 1)；//[12，2，'你好']；

您还可以使用es6的扩展运算符，而无需更改原始数组。

设str3=[.str1，str2]

2：join();

功能:将数组转换为字符串，返回转换后的字符串数据，不改变原数组；

注意:()使用双引号包括您要使用的分隔符。默认是逗号，这里便于观察。我用了-

var str1=[12，2，'你好']；

var str 2=[' world ']；

console . log(str 1 . join('-'))；//12-2-你好

console . log(str 1)；//[12，2，'你好']

3：pop();

函数：删除数组的最后一位，返回删除的数据，会改变原来的数组。

var str1=[12，2，'你好']；console . log(str 1 . pop()//hello console . log(str 1)；//[12，2]var str1=[12，2，'你好']；

console.log(str1.pop()//hello

console . log(str 1)；//[12, 2]

4：shift();

函数：删除数组的第一个数据，返回新数组的长度，这样会改变原来的数组。

var str1=[12，2，'你好']；

console . log(str 1 . shift())；//12

console . log(str 1)；//[2，'你好']

5：unshift();

函数：向数组的第一个位置添加一个或多个数据，并返回新数组的长度，会改变原数组。

注意：unshift()方法返回的数据是新数组的长度。它可以添加一个或多个数据，可以理解为添加一系列数据。

var str1=[12，2，'你好']；

var str2=[43，2，' test ']；

console . log(str 1 . un shift(' Hello '))；//4

console . log(str 2 . un shift(' hello '，' world '))；//5

console . log(str 1)；//['你好'，12，2，'你好']

console . log(str 2)；

6：push();

函数：向数组的最后一位添加一个或多个数据，并返回新数组的长度，会改变原数组。

注意：push()方法返回的数据是新数组的长度，它可以添加一个或多个数据，可以理解为添加一系列数据。

var str1=[12，2，'你好']；

var str2=[43，2，' test ']；

console . log(str 1 . push(' Hello '))；//4

console.log(str2.push('hello '，' world '))；//5

console . log(str 1)；//[12，2，'喂'，'喂']

console . log(str 2)；//[43，2，'测试'，'你好'，'世界']

7：reverse();

函数：反转数组的数据，返回反转后的数组，会改变原来的数组。

var str1=[12，2，'你好']；

console . log(str 1 . reverse())；//['你好'，2，12]

console . log(str 1)；//['你好'，2，12]

8：sort();

函数：对数组中的数据进行排序(默认为升序)，返回一个已经排序的新数组，这样会改变原来的数组。

注意：

8.1：

这里的排序是针对字符的排序。先用数组的toString()方法转换成字符串，然后一点一点比较。3大于12，因为第一位是31，所以不要和数字数据排序混淆。

8.2：

str2数组中添加了两个字符。大家可以看到，比较的时候，zoom是最大的，因为第一个英文字母可以通过ASCII码转换成对应的值，然后根据值进行比较。

var str1=[12，2，43，5，2，5]；

var str2=[92，2，43，' hello '，5，2，5，' abc '，' zoom ']；

console . log(str 1 . sort())；//[12, 2, 2, 43, 5, 5]

console . log(str 1)；//[12, 2, 2, 43, 5, 5]

console . log(str 2 . sort())；//[2，2，43，5，5，92，' abc '，' hello '，' zoom']

console . log(str 2)；//[2，2，43，5，5，92，' abc '，' hello '，' zoom']

8.3：排序问题

参数：sort(回调)如果需要按数值排序，需要传递一个参数。Sort(callback)，这是一个回调函数。这个函数应该有两个参数，比较这两个参数，然后返回一个数字(a-b)来说明这两个值的相对顺序。它的返回值如下：

如果a小于b，则返回值小于0。

如果a等于b，则返回0。

如果a大于b，则返回大于0的值。

var str3=[92，2，43，5，2，5]；

console . log(str 3 . sort(fn))；//[2, 2, 5, 5, 43, 92]

console . log(str 3)；//[2, 2, 5, 5, 43, 92]

函数fn (a，b){

返回a-b；

}

9：slice();

函数：在指定位置截取数组，返回截取的数组，不改变原数组。

参数：slice(startIndex，endIndex)

注意：您可以从现有数组中返回选定的元素。方法接收两个参数，slice(start，end)，strat是必需的，表示起始位置；End可选，表示结束的位数(不包括结束位)，省略表示最后一位；开始和结束都可以是负数。为负数时，表示从最后一位数开始计数，如-1表示最后一位数。

var arr=['T1 '，' J1 '，' L1 '，' L2 '，' M1 ']；

console.log(arr.slice(1，3))；//['J1 '，' L1']

console . log(arr . slice(1))；//['J1 '，' L1 '，' L2 '，' M1']

console.log(arr.slice(-4，-1))；//['J1 '，' L1 '，' L2']

console . log(arr . slice(-2))；//['莉莉'，' M1']

console.log(arr.slice(1，-2))；//['J1 '，' L1']

console . log(arr)；//['T1 '，' J1 '，' L1 '，' L2 '，' M1']

10：splice()

函数：添加、删除或替换数组中的元素，然后返回删除/替换的元素。

参数：splice(start，num，data1，data2，…)；所有参数都是可选的。第一个参数是标签，第二个是删除的长度，第一个参数可以是负数。

var list=[1，2，3]

console.log(列表)；//[1, 2, 3]

//删除

list.splice(0，1)；//Delete-从下标0和长度1开始

console.log(列表)；//[2,3]

list.splice(0，2)；//Delete-从下标0开始，长度为2

console.log(列表)；//[]

//替换

list.splice(0，1，4)；//replace-从下标0开始，将长度为1的数组元素替换为4。

console.log(列表)；//[4,2,3]

list.splice(0，2，4)；//replace-从下标0开始，将长度为2的数组元素替换为4(即4，2整体替换为4)

console.log(列表)；//[4,3]

//添加

list.splice(1，0，5)；//表示在下标1处加一个5。

console.log(列表)；//[1,5,2,3]

如果第一个参数为负数就从后面往前数，入上图

splice会改变原数组

11：toString();

函数：将数组转换为字符串，类似于不带参数的join()。当数据被隐式类型化时，该方法将被自动调用，如果手动调用，该方法将被直接转换为字符串。不会改变原来的数组。

var str=[1，2，3]；

console . log(str . tostring())；//1,2,3

console . log(str)；//[1,2,3]

12：valueOf();

函数：返回数组的原始值(一般来说，其实就是数组本身)，通常由js在后台调用，不会在代码中显式出现。

var str=[1，2，3]；console . log(str . value of())；//[1，2，3]console . log(str)；//[1，2，3]//为了证明返回的是数组本身console . log(str . value of()==str)；//真

13:IndexOf();

函数：根据指定的数据，从左到右，查询在数组中的位置。如果指定的数据不存在，则返回-1，并查找指定的数据以返回该数据的索引。

参数：indexOf(value，start)；Value是要查询的数据；Start是可选的，表示查询开始的位置。当start为负时，从数组末尾向前计数；如果查询没有发现值的存在，则该方法返回-1

注意：如果找到该数据，立即返回该数据的索引，不再往后继续查找

var str=['h '，' e '，' l '，' l '，o ']；

console . log(str . index of(' l '))；//2

console.log(str.indexOf('l '，3))；//3

console.log(str.indexOf('l '，4))；//-1

console.log(str.indexOf('l '，-1))；//-1

console.log(str.indexOf('l '，-3))；//2

14:lastIndexOf();

功能:根据指定的数据，从左到右，lastIndexOf()方法可以返回指定元素在数组中的最后一个位置，从字符串的后面向前看。如果指定的数据不存在，则返回-1。如果找到指定的数据，则返回该数据的索引。

参数:indexOf(值，开始)；Value是要查询的数据；Start是可选的，表示查询开始的位置。当start为负时，从数组末尾向前计数；如果查询没有发现值的存在，则该方法返回-1

var str=['h '，' e '，' l '，' l '，o ']；

console . log(str . lastindexof(' l '))；//3

根据我的发现，传入indexOf的第二个参数是有用的，lastIndexOf的第二个参数和没有传输的一样。

15:forEach();

函数：ES5的新方法，用来遍历数组，没有返回值。

参数：forEach(回调)；Callback默认有三个参数，分别是value(被遍历数组的数据)、index(对应的索引)和self(数组本身)。

var arr=['汤姆'，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr . foreach(function(value，index，self){

console . log(value '-' index '-'(arr===self))；

})

//打印结果是：

//Tom - 0 - true

//杰克- 1 -真

//露西- 2 -真

//Lily - 3 - true

//可能- 4 -真

console . log(a)；///undefined - forEach没有返回值

//此方法是一个遍历方法，不会修改原始数组。

16:map();

功能：

1.与forEach函数相同；

2.map的回调函数会返回执行结果，最后MAP会将所有回调函数的返回值组成一个新的数组并返回。

参数：图(回调)；回调默认有三个参数，分别是value、index和self。参数与上面的forEach()相同。

//函数1:与forEach相同

var arr=['汤姆'，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.map(function(value，index，self){

console.log(值'-'索引'- ' (arr===self))

})

//打印结果是：

//Tom - 0 - true

//杰克- 1 -真

//露西- 2 -真

//Lily - 3 - true

//可能- 4 -真

//函数2:每个回调函数的返回值由map形成的新数组返回。

var arr=['汤姆'，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.map(function(value，index，self){

返回“hi:”值；

})

console . log(a)；//['嗨：汤姆'，'嗨：杰克'，'嗨：露西'，'嗨：莉莉'，'嗨：阿美']

console . log(arr)；//['Tom '，' Jack '，' Lucy '，' Lily '，' May ']-原来的数组没有变。

17：filter();

功能: 1.与forEach函数相同；2.filter的回调函数需要返回一个布尔值。当它为真时，这个数组的数据将被返回给过滤器。最后，Filter会将所有回调函数的返回值组成一个新的数组并返回(这个函数可以理解为“过滤”)。

参数:过滤(回拨)；回调默认有三个参数，分别是value、index和self。

//函数1:同foreach vararr=['Tom '，' Jack '，' Lucy '，' Lily '，' May ']；var a=arr.filter(function(value，index，Self){ console . log(value '-' index '-'(arr==Self))}//打印结果为：//Tom-0-true//Jack-1-true//Lucy-2-true//Lily May-4-true//Function 2:当回调函数的返回值为true时，将本次的数组值返回给filter，filter形成的新数组将返回var arr=['Tom '，' Jack '，' Lucy '，' Lily '，' May ']；var a=arr.filter(function(value，index，self){返回值. length 3；})console . log(a)；//['杰克'，'露西'，'莉莉']console . log(arr)；//['Tom '，' Jack '，' Lucy '，' Lily '，' May ']-原来的数组没有变。//函数1:与forEach相同

var arr=['汤姆'，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.filter(function(value，index，self){

console.log(值'-'索引'- ' (arr===self))

})

//打印结果是：

//Tom - 0 - true

//杰克- 1 -真

//露西- 2 -真

//Lily - 3 - true

//可能- 4 -真

//函数2:当回调函数的返回值为真时，将这次的数组值返回给filter，filter将组成一个新的数组并返回。

var arr=['汤姆'，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.filter(function(value，index，self){

返回值. length 3；

})

console . log(a)；//['杰克'，'露西'，'莉莉']

console . log(arr)；//['Tom '，' Jack '，' Lucy '，' Lily '，' May ']-原来的数组没有变。

18:every();

功能：确定数组中的每一项是否满足条件。只有当所有项目都满足条件时，才会返回true。

参数：EVERY()接收回调函数作为参数。这个回调函数需要有一个返回值，every(回调)；回调默认有三个参数，分别是value、index和self。

功能1：当回调函数的返回值为真时，类似于forEach的函数，遍历所有；如果为false，则停止执行，后续数据在第一个返回false的位置停止。

//demo1:

var arr=['汤姆'，' abc '，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.every(function(value，index，self){

console.log(值'-'索引'- ' (arr==self))

})

//打印结果是：

//Tom - 0 - true

//因为回调函数中没有返回true，所以默认返回undefined，相当于返回false。

//demo2:

var arr=['汤姆'，' abc '，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.every(function(value，index，self){

console.log(值'-'索引'- ' (arr==self))

返回值. length 4；

})

//打印结果是：

//Tom - 0 - true

//abc - 1 - true

//杰克- 2 -真

//因为遍历到Jack时，回调函数返回false来返回。此时Jack已经遍历了，但是后续的数据不再遍历。

//演示3:

var arr=['汤姆'，' abc '，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.every(function(value，index，self){

console.log(值'-'索引'- ' (arr==self))

返回true

})

//打印结果是：

//Tom - 0 - true

//abc - 1 - true

//杰克- 2 -真

//露西- 3 -真

//Lily - 4 - true

//May - 5 - true

//因为每个回调函数的返回值都是true，所以会遍历数组的所有数据，相当于forEach函数。

功能2:当每个回调函数的返回值为真时，every的返回值为真。只要一个回调函数为假，每个的返回值都为假。

//demo1:

var arr=['汤姆'，' abc '，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.every(function(value，index，self){

返回值. length 3；

})

console . log(a)；//假

//demo2:

var arr=['汤姆'，' abc '，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.every(function(value，index，self){

返回值. length 2；

})

console . log(a)；//真

19:some();

功能：确定数组中是否有满足条件的项。只要有一项满足条件，就返回true。

参数：some()接收回调函数作为参数，需要返回值，some(callback)；回调默认有三个参数，分别是value、index和self。

功能1：因为要判断数组中的每一项，只要有一个回调函数返回true，有些就会返回true，所以正好和every相反。遇到返回值为真的回调函数，可以确定结果，然后停止执行，后面的所有数据不再遍历，停在第一个返回真的位置；当回调函数的返回值为false时，需要继续向后执行，直到可以确定最终结果，所以会遍历所有数据，实现一个类似forEach的函数，遍历all。

//demo1:

var arr=['汤姆'，' abc '，'杰克'，'露西'，'莉莉'，'梅']；

var a=arr.some(function(value，index，self){

console.log(值'-'索引'- ' (arr==self))

返回值. length 3；

})

//打印结果是：

//Tom - 0 - true

//abc - 1 - true

//杰克- 2 -真

20.reduce();

迭代数组中的所有项、累加器和数组中的每个值(从左到右)被合并，最终计算为一个值。

参数：

回拨：

PreviousValue必选-最后一次回调调用返回的值，或提供的initialValue。

Current必选-数组中已处理数组项的当前值。

Index可选-数组中当前数组项的索引值。

可选数组-原始数组

InitialValue:可选-初始值

实行方法:第一次执行回调函数时，preValue和curValue可以是一个值。如果调用reduce()时提供了initialValue，那么第一个preValue等于initialValue，curValue等于数组中的第一个值；如果未提供initialValue，preValue等于数组中的第一个值。

设arr=[0，1，2，3，4]

设arr1=arr.reduce((preValue，curValue)=1

前值曲线值

)

console.log(arr1) //10

设arr2=arr.reduce((preValue，curValue)=preValue curValue，5)

console.log(arr2) //15

arr.reduce()拓展(高级用法)

(1)计算数组中每个元素出现的次数

设arr=[0，1，2，3，4]

设arr1=arr.reduce((preValue，curValue)=1

前值曲线值

)

console.log(arr1) //10

设arr2=arr.reduce((preValue，curValue)=preValue curValue，5)

console.log(arr2) //15

(2)阵列重复数据消除

设arr=[1，2，3，4，4，1]

设newArr=arr.reduce((pre，cur)={

如果(！预先包含(当前)){

return pre.concat(当前)

}否则{

返回前

}

},[])

console . log(new arr)；//[1, 2, 3, 4]

(3)将多维数组转化为一维数组。

设arr=[[0，1]，[2，3]，[4，[5，6，7]]]

const newArr=function(arr){

return arr.reduce((pre，cur)=pre . concat(array . is array(cur)？newArr(cur):cur)，[])

}

console . log(new arr(arr))；//[0, 1, 2, 3, 4, 5, 6, 7]

21.reduceRight()

功能:(类似于reduce)从数组的最后一项开始，逐个向前遍历到第一处，迭代数组的所有项，然后构建最终返回值。

参数:与reduce相同。演示：与reduce相同

22 Array.from()

把伪数组变成数组意味着任何有长度的东西都可以变成数组。—es6

让我们来看看

console . log(array . from(str))//[' 1 '，' 2 '，' 3 '，' 4 '，' 5']

设obj={0:'a '，1:'b '，长度：2}

console . log(array . from(obj))//[' a '，' b']

设aa={0:'a '，1:'b'}

console . log(array . from(aa))//[]

原著不会变。

23 Array.of()

将一组值转换成一个数组，类似于声明一个数组—es6。

让str='11 '

console . log(array . of(str))//[' 11 ']

//相当于

console.log(新数组(' 11 ')//[' 11]

Ps:但是new Array()有参数问题导致重载的缺点。

console . log(new array(2))//[empty2]是一个空数组。

console.log(Array.of(2)) //[2]

24 arr.copyWithin()

在当前数组中，将指定位置的数组复制到另一个位置将覆盖原始数组项并返回当前数组。

参数：

Target - Required index从这个位置开始替换数组项-可选index从这个位置开始读取数组项，默认值为0。如果是负数，将从右向左读取。End -可选数组项，索引到此位置停止读取。默认值为Array.length，如果为负，则表示倒数。

设arr=[1，2，3，4，5，6，7]设arr 1=arr . copy within(1)console . log(arr 1)//[1，1，2，3，4，5，6]设arr2=arr.copyWithin(1，2，3，4，5，7)设arr3=arr.copyWithin(1，2，4)console . log(arr 3)/[1，3，4，4，4，5，6

哪些数组方法会改变原数组

un shift()；push()；shift()；pop()；sort()；反向()；splice()；copyWithin()

以上已经介绍了这八种数组方法。可以看出，再次使用这些方法时，会改变原来的数组。

总结

本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

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