js中数组方法总结

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.pop()

　　　　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(参数一，参数二，其余参数) 

　　　　作用：向数组中添加新元素（此方法也可以用来删除元素）

　　　　第一个参数 ：定义了添加新元素的位置　　

　　　　第二个参数：定义了要删除多少元素

　　　　其余参数：定义了要添加的元素　　可省略

　　　　是否会改变原数组： 是

　　　　返回值：返回被删除的值组成的数组

　　　　实例：（添加元素）

　　　　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

　　　　测试函数接受三个参数：

　　　　参数一：项目值（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']

 

　　　　实例（出现多次）：

　　　　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]