爱站程序员基地js中数组方法总结
在学习 JavaScript 时，我们会遇到各种数组方法，而这些方法的作用，是否会改变原数组，以及返回值得类型都不尽相同，初学时，很容易混淆，搞不清楚，也难以记忆以及使用，所以我整理了数组的方法总结，以供大家学习参考，如发现错误，望及时指正。
数组方法总结（一共 22 种方法）
1. 会改变原数组的：pop、push、shift、unshift、splice、sort、reverse 这七种方法（推荐记忆！）
2.不会改变原数组的：toString、 join、concat、slice、 forEach、map、filter、reduce、reduceRight、some、every、indexOf、lastIndexOf、find、findIndex
3.无返回值的：forEach
4.返回值为新数组的：splice、concat、slice、sort、reverse、map、filter
数组方法详解
把数组转换为字符串（toString、join）
1. toString()
作用：把数组转换为数组值的字符串，字符串只能以逗号分隔。
参数：无
是否会改变原数组： 否
返回值：字符串
实例：
var arr = [1， 2 ，3， 4， 5]
var str = arr.toString()
console.log(str) // 1，2，3，4，5
console.log(arr) // [1， 2 ，3， 4， 5]
2. join( 分隔符 )
作用：把数组转换为数组值的字符串，可以自己规定分隔符，这是与toString()方法的不同。
参数：分隔符
是否会改变原数组： 否
返回值：字符串
实例：
var arr = [1， 2 ，3， 4， 5]
var str = arr.join(\”@\”)
console.log(str) // 1@2@3@4@5
console.log(arr) // [1， 2 ，3， 4， 5]
增删元素（pop、push、shift、unshift）
3. pop()
作用：从数组中删除最后一个元素
参数：无
是否会改变原数组： 是
返回值：返回被删除的值
实例：
var arr = [1， 2 ，3， 4， 5]
var str = arr.1044pop()
console.log(str) // 5
console.log(arr) // [1， 2 ，3， 4]
4. push()
作用：向数组结尾处添加一个新的元素
参数：新添加的元素
是否会改变原数组： 是
返回值：返回新数组的长度
实例：
var arr = [1， 2 ，3， 4， 5]
var len = arr.push(10)
console.log(len) // 6
console.log(arr) // [1， 2 ，3， 4，5，10]
5. shift()
作用：从数组中删除第一个元素
参数：无
是否会改变原数组： 是
返回值：返回被删除的值
实例：
var arr = [1， 2 ，3， 4， 5]
var str = arr.shift()
console.log(str) // 1
console.log(arr) // [2， 3 ，4， 5]
6. unshift()
作用：向数组结尾处添加一个新的元素
参数：添加的新元素
是否会改变原数组： 是
返回值：返回新数组的长度
实例：
var arr = [1， 2 ，3， 4， 5]
var len = arr.unshift(10)
console.log(len) // 6
console.log(arr) // [10，1， 2 ，3， 4，5]
拼接数组（splice、concat）
7. splice(参数一，参数二，其余参数)
作用：向数组中添加新元素（此方法也可以用来删除元素）
第一个参数 ：定义了添加新元素的位置
第二个参数：定义了要删除多少元素
其余参数：定义了要添加的元素 可省略
是否会改变原数组： 是
返回值：返回被删除的值组成的数组
实ad0例：（添加元素）
var arr = [1， 2 ，3， 4， 5]
var str = arr.splice(2，2，\’apple\’，\’banana\’)
console.log(str) // [3，4]
console.log(arr) // [1， 2， \’apple\’，\’banana\’， 5]
实例：（删除元素）通过改变参数来实现
var arr = [1， 2 ，3， 4， 5]
var str = arr.splice(0，1)
console.log(str) // [ 1 ]
console.log(arr) // [ 2，3，4， 5 ]
8. concat()
作用：通过合并（连接）现有的数组来创建一个新数组
参数：可以是一个数组，可以使两个或者多个数组，也可以是数值
是否会改变原数组： 否
返回值：返回合并后的新数组
实例（合并两个数组）：
var arr = [1， 2 ，3， 4， 5]
var arr1 = [\’a\’， \’b\’ ，\’c\’]
var arr2 = arr.concat(arr1)
console.log(arr2) // [1， 2 ，3， 4， 5，\’a\’， \’b\’ ，\’c\’]
console.log(arr) // [1， 2 ，3， 4，5]
实例（将数组和值合并）：
var arr = [1， 2 ，3， 4， 5]
var arr2 = arr.concat(\’a\’)
console.log(arr2) // [1， 2 ，3， 4， 5，\’a\’]
console.log(arr) // [1， 2 ，3， 4，5]
裁剪数组（slice）
9. slice(参数一，参数二)
作用：裁剪出一个新数组
参数一：开始参数（包括）
参数二：结束参数（不包括） 可以省略
是否会改变原数组： 否
返回值：裁剪后的新数组
实例：
var arr = [1， 2 ，3， 4， 5]
var arr2 = arr.slice(2，4)
console.log(arr2) // [3， 4]
console.log(arr) // [1， 2 ，3， 4，5]
实例（省略结束参数）：
var arr = [1， 2 ，3， 4， 5]
var arr2 = arr.slice(2)
console.log(arr2) // [3， 4， 5]
console.log(arr) // [1， 2 ，3， 4，5]
数组排序（sort、reverse）
10. sort()
作用：以字母的顺序对数组进行排序（注意：并不会按照数字从大到小进行排序）
参数：无
是否会改变原数组： 是
返回值：返回排序后的新数组
实例：
var arr = [\’b\’， \’f\’，\’c\’， \’g\’， \’a\’]
var arr2 = arr.sort()
console.log(arr2) // [\’a\’， \’b\’，\’c\’， \’f\’， \’g\’]
console.log(arr) // [\’a\’， \’b\’，\’c\’， \’f\’， \’g\’]
实例 （不会按照数字从小到大排序）：
var arr = [2， 10，4， 3， 5]
var arr2 = arr.sort()
console.log(arr2) // [10， 2 ，3， 4，5]
console.log(arr) // [10， 2 ，3， 4，5]
比值函数：function（a，b）{return a-b}
sort(function（a，b）{return a-b})
作用：函数结合 sort() 方法可以实现将数组按 数字从大到小排序
当 a-b < 0 时，a 排在b前面
当 a-b > 0 时，a 排在后面
是否会改变原数组： 是
返回值：返回反转后的新数组
实例：
var arr =[3， 10 ，6， 8，1]
var arr2 = arr.sort(function(a，b) { return a-b })
console.log(arr2) // [1， 3 ，6， 8，10]
console.log(arr) // [1， 3 ，6， 8，10]
11. reverse()
作用：反转数组中的元素
参数：无
是否会改变原数组： 是
返回值：返回反转后的新数组
实例：
var arr =[1， 2 ，3， 4，5]
var arr2 = arr.reverse()
console.log(arr2) // [5， 4 ，3， 2，1]
console.log(arr) // [5， 4 ，3， 2，1]
数组迭代方法（forEach、map、filter、reduce、reduceRight、every、some、indexOf、lastIndexOf、find、findIndex）
数组迭代方法对每个数组项进行操作。
12. forEach( function (value, index, array) {} )
作用：为每个数组元素调用一次函数（回调函数）
回调函数接受三个参数：
参数一：项目值（value）
参数二：项目索引（index） 可省略
参数三：数组本身（array） 可省略
是否会改变原数组： 否
返回值：无返回值
实例：
var arr =[1， 2 ，3， 4，5]
var num = 0
arr.forEach（function(value, index, array) { num += value }）
console.log(num) // 15
console.log(arr) // [1， 2 ，3， 4，5]
13. map( function (value, index, array) {} )
作用：为每个数组元素执行函数来创建新数组
注意：此方法不会对没有值得数组元素执行函数，即跳过！
回调函数接受三个参数：
参数一：项目值（value）
参数二：项目索引（index） 可省略
参数三：数组本身（array） 可省略
是否会改变原数组：否
返回值：返回更改后的新数组
实例：
var arr =[1， 2 ，3， 4，5]
var arr2 = arr.map（function(value, index, array) { return value * 2 }）
console.log(arr2) // [2， 4 ，6， 8，10]
console.log(arr) // [1， 2 ，3， 4，5]
14. filter( function (value, index, array) {} )
作用：创建一个包含通过测试的数组元素的新数组
注意：此方法不会对没有值得数组元素执行函数，即跳过！
回调函数接受三个参数：
参数一：项目值（value）
参数二：项目索引（index） 可省略
参数三：数组本身（array） 可省略
是否会改变原数组：否
返回值：返回满足条件的数组元素组成的新数组
实例：
var arr =[1， 2 ，3， 4，5]
var arr2 = arr.filter（function(value, index, array) { return value > 2}）
console.log(arr2) // [3， 4，5]
console.log(arr) // [1， 2 ，3， 4，5]
15. reduce( function (value, index, array) {} ，init（初始值，可省略）)
作用：在每个数组元素上运行函数，以生成（减少它）单个值
注意：此方法在数组中从左到右工作
函数接受四个参数：
参数一：总数（初识值 / 先前返回的值）
参数二：项目值（value）
参数三：项目索引（index） 可省略
参数四：数组本身（array） 可省略
是否会改变原数组：否
返回值： 函数的返回值
实例（无初识值 init）：
var arr =[1， 2 ，3， 4，5]
var arr2 = arr.reduce（function(total，value, index, array) { return total + value}）
console.log(arr2) // 15
console.log(arr) // [1， 2 ，3， 4，5]
实例（有初识值 init）：
var arr =[1， 2 ，3， 4，5]
var arr2 = arr.reduce（function(total，value, index, array) { return total + value}，100）
console.log(arr2) // 115
console.log(arr) // [1， 2 ，3， 4，5]
16. reduceRight( function (value, index, array) {} ，init（初始值，可省略）)
作用：此方法与reduce一样，不同的是从右到左工作！
17. every( function (value, index, array) {} )
作用：此方法检查所有数组值是否通过测试，所有元素都通过测试，返回 true，否则返回 false
测试函数接受三个参数：
参数一：项目值（value）
参数二：项目索引（index） 可省略
参数三：数组本身（array） 可省略
是否会改变原数组：否
返回值：布尔值 true / false
实例：
var arr =[1， 2 ，3， 4，5]
var res = arr.every（function(value, index, array) { return value > 3}）
console.log(res) // false
console.log(arr) // [1， 2 ，3， 4，5]
18. some( function (value, index, array) {} )
作用：此方法检查某些数组值是否通过了测试，只要有一个通过，就返回 true，否则返回 false
测试函数接受三个参数：ad8
参数一：项目值（value）
参数二：项目索引（index） 可省略
参数三：数组本身（array） 可省略
是否会改变原数组：否
返回值：布尔值 true / false
实例：
var arr =[1， 2 ，3， 4，5]
var res = arr.some（function(value, index, array) { return value < 3}）
console.log(res) // true
console.log(arr) // [1， 2 ，3， 4，5]
19. indexOf( value，start )
作用：此方法在数组中搜索元素值并返回其位置（第一个位置为0）
参数一：要检索的值
参数二：开始检索的位置，负值将从结尾开始的给定位置开始，并搜索到结尾 可省略（即从第一个值开始检索）
是否会改变原数组：否
返回值：索引位置（number）。若数组中没有要查找的元素，则返回 -1。查找到多个相同的值，返回第一次出现的位置
实例（出现一次）：
var arr = [\’A\’， \’B\’，\’C\’， \’D\’， \’E\’]
var res = arr.indexOf（\’A\’）
console.log(res) // 0
console.log(arr) // [\’A\’， \’B\’，\’C\’， \’D\’， \’E\’]
564 实例（出现多次）：
var arr = [\’A\’， \’B\’，\’C\’， \’D\’， \’E\’，\’B\’]
var res = arr.indexOf（\’B\’）
console.log(res) // 1
console.log(arr) // [\’A\’， \’B\’，\’C\’， \’D\’， \’E\’，\’B\’]
20. lastIndexOf( value，start )
作用：此方法与 lastIndexOf() 一样，但是从数组结尾开始搜索，其他的也与 indexOf 顺序相反
21. find(function (value, index, array) {})
作用：返回通过测试函数的第一个数组元素的值
测试函数接受三个参数：
参数一：数组元素值
参数二：数组元素索引值 可省略
参数三：数组本身 可省略
是否会改变原数组：否
返回值： 满足条件的第一个元素值
实例：
var arr =[1， 2 ，3， 4，5]
var res = arr.find ( function ( ) { return value > 3 } )
console.log(res) // 4
console.log(arr) // [1， 2 ，3， 4，5]
22. findIndex(function (value, index, array) {})
作用：返回通过测试函数的第一个数组元素的索引
测试函数接受三个参数：
参数一：数组元素值
参数二：数组元素索引值 可省略
参数三：数组本身 可省略
是否会改变原数组：否
返回值： 满足条件的第一个元素值的索引
实例：
var arr =[1， 2 ，3， 4，5]
var res = arr.findIndex ( function ( ) { return value > 1 } )
console.log(res) // 1
console.log(arr) // [1， 2 ，3， 4，5]
14bf
