JavaScript数组方法(最全)

一、修改器方法

下面的这些方法会改变调用它们的对象自身的值：

pop

删除并返回数组的最后一个元素。
参数：无
返回值：数组的最后一个元素

  var arr = ['张三', '李四', '王五']
  console.log(arr.pop()) // 王五

push

向数组的末尾添加一个或多个元素，并返回新的长度。

参数	描述
newelement1	必需。要添加到数组的第一个元素。
newelement12	可选。要添加到数组的第二个元素。
newelement1X	可选。可添加多个元素。

返回值：把指定的值添加到数组后的新长度。
说明：
push() 方法可把它的参数顺序添加到原数组的尾部。它直接修改原数组，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

  var arr = ['广州', '深圳']
  var newArr = arr.push('北京', '上海')
  console.log(newArr) //新数组长度：4
  console.log(arr) // 原数组：["广州", "深圳","北京", "上海"]  

shift

删除并返回数组的最后一个元素。
参数：无
返回值：数组的最后一个元素

  var arr = ['张三', '李四', '王五']
  var value = arr.pop()
  console.log(value)// 王五
  console.log(arr)// 原数组：['张三', '李四']

unshift

向数组的开头添加一个或更多元素，并返回新的长度。原数组会被改变

参数	描述
newelement1	必需。向数组添加的第一个元素。
newelement12	可选。向数组添加的第二个元素。
newelement1X	可选。可添加若干个元素。

返回值：是数组的最新长度

说明：
unshift() 方法将把它的参数插入原数组的头部，并将已经存在的元素依次往后挤，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。

  var arr = ["广州","深圳"]
  var newArr = arr.unshift("北京","上海")
  console.log(newArr) // 新数组长度：4
  console.log(arr) // 原数组：["北京", "上海", "广州", "深圳"]

splice

向/从数组中添加/删除项目，然后返回被删除的项目。会改变原数组。

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX	可选。向数组添加的新项目。

返回值：包含被删除项目的新数组，如果有的话。

说明：
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 原数组中删除了元素，则返回的是含有被删除的元素的数组。
注意：splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。

  var arr = ['中国', '美国', '日本' ,'印度']
  var newArr = arr.splice(2, 0, '英国')
  console.log(newArr) // []
  console.log(arr) // ["中国", "美国", "英国", '日本','印度']

  var arr = ['中国', '美国', '日本']
  var newArr = arr.splice(2, 1, '德国')
  console.log(newArr) // ["日本"]
  console.log(arr) // ["中国", "美国", "德国"]

  var arr = ['中国', '美国', '日本', '法国']
  var newArr = arr.splice(2, 2, '韩国')
  console.log(newArr) // ["日本", "法国"]
  console.log(arr) // ["中国", "美国", "韩国"]

sort

对数组的元素进行排序。不会改变原数组。
返回值：返回一个按照升序排列的数组

  var arr = ['S', 'M', 'B', 'Q', 'R', 'C', 'Y']
  console.log(arr.sort()) // ["B", "C", "M", "Q", "R", "S", "Y"]

  var arr = ['10','5','40','25','1000','1']
  console.log(arr.sort()) // ['1','10','1000','25','40','5']

 //请注意，要实现按数值的大小对数字进行排序，必须使用一个排序函数：
  console.log(arr.sort(sortNumber)) // ["1", "5", "10", "25", "40", "1000"]
  function sortNumber(a, b) {
    return a - b
  }

reverse

颠倒数组中元素的顺序。
注释：该方法会改变原来的数组，而不会创建新的数组。

  var arr = ['西红柿', '紫甘蓝', '香菜', '土豆']
  var newArr = arr.reverse(arr)
  console.log(newArr) //["土豆", "香菜", "紫甘蓝", "西红柿"]

fill

用一个固定值填充一个数组中从开始位置到终止位置内的全部元素。不包括终止索引。

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

    const fruits = ['Apple', 'Orange', 'Banana', 'mango']

    // 将索引2-4的位置的元素内容全都填充为'Runoob'
    console.log(fruits.fill('Runoob', 2, 4)) // ['Banana','Orange','Runoob','Runoob']
    // 从索引1开始直到最后一个元素的内容填充为5
    console.log(fruits.fill(5, 1)) // ['Apple', 5, 5, 5]
    // 将每一个元素的内容填充为5
    console.log(fruits.fill(6)) // [6, 6, 6, 6]

copyWithin

浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

参数	描述
target	必需。复制到指定目标索引位置。
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

var fruits = ["Banana", "Orange", "Apple", "Mango"]
fruits.copyWithin(2, 0) // 复制前面两个元素到后面两个元素上
console.log(fruits)  // ['Banana','Orange','Banana','Orange']

---

二、访问方法

这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。

concat

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
参数：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
返回值：返回一个新的数组。

  var arr = ['苹果', '香蕉']
  
  console.log(arr.concat('橘子')) // ['苹果','香蕉','橘子']

  var arr1 = ['哈密瓜','菠萝']
  console.log(arr.concat(arr1)) // ['苹果','香蕉','哈密瓜','菠萝']

  var arr1 = ['哈密瓜','菠萝']
  var arr2 = ['葡萄','西瓜']
  console.log(arr.concat(arr1,arr2)) // ['苹果','香蕉','哈密瓜','菠萝','葡萄','西瓜']

join

用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
参数：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为 分隔符。
返回值：返回一个字符串。

  var arr = ['1','2','3','4','5']
  console.log(arr.join()) // 1,2,3,4,5
  console.log(arr.join('-')) // 1-2-3-4-5

toString

可把数组转换为以逗号分隔的字符串，并返回结果。
注：返回值与没有参数的 join() 方法返回的字符串相同。

  var arr = ['Hello', 'World']
  var str = arr.toString()
  console.log(str) // Hello,World

toLocaleString

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开。

参数	描述
locales	可选，带有BCP 47语言标记的字符串或字符串数组，关于locales参数的形式与解释，请看Intl页面。
options	可选，一个可配置属性的对象，对于数字 Number.prototype.toLocaleString()，对于日期Date.prototype.toLocaleString().

const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')]
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' })

console.log(localeString)  // "1,a,12/21/1997, 2:12:00 PM"

indexOf

在数组中搜索元素值并返回其位置。
参数：

• item 必需。要检索的项目。
• start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

返回值：

• 如果未找到项目，返回 -1。
• 如果项目多次出现，则返回第一次出现的位置。

    var fruits = ["Apple", "Orange", "Apple", "Mango"]
    var a = fruits.indexOf("Apple")
    console.log(a) // 0

lastIndexOf

lastIndexOf()Array与indexOf() 类似，但是从数组结尾开始搜索。
参数：

• item 必需。要检索的项目。
• start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。
  返回值：
• 如果未找到项目，返回 -1。
• 如果项目多次出现，则返回第一次出现的位置。
  注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

    var fruits = ['Apple', 'Orange', 'Apple', 'Mango']
    var a = fruits.lastIndexOf('Apple')
    console.log(a) // 2

slice

可从已有的数组中返回选定的元素。

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值：一个新的数组，包含从 start 到 end （不包括该元素）的原数组中的元素。
说明：请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
1：您可使用负值从数组的尾部选取元素。
2：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

  var arr = ['苹果', '香蕉', '菠萝', '榴莲']
  var newArr = arr.slice(1)
  console.log(newArr) // ["香蕉", "菠萝", "榴莲"]
  console.log(arr) // 原数组：["苹果","香蕉","菠萝","榴莲"]

  var arr = ['苹果', '香蕉', '菠萝', '榴莲']
  var newArr = arr.slice(2,4)
  console.log(newArr) // ["菠萝", "榴莲"]
  console.log(arr) // 原数组：["苹果","香蕉","菠萝","榴莲"]

includes

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

  const array1 = [1, 2, 3]
  console.log(array1.includes(2)) // true

  const pets = ['cat', 'dog', 'bat']
  console.log(pets.includes('cat')) // true
  console.log(pets.includes('at')) // false

---

三、迭代方法

forEach

为每个数组元素调用一次函数（回调函数）。
函数参数：item(项目值)、index(项目索引）、array(数组本身)

   var forEachArr = ['a','b','c']
   forEachArr.forEach((item) => console.log(item))  // 依次输出  "a"  "b"  "c"

map

通过对每个数组元素执行函数来创建新数组。不会对没有值的数组元素执行函数。不会更改原始数组。
函数参数：item(项目值)、index(项目索引)、array(数组本身)

    const mapArr = [1, 4, 9, 16]
    const mapNewArr = mapArr.map((item) => item * 2)
    console.log(mapNewArr) //  [2, 8, 18, 32]

filter

筛选出所有符合条件的数组元素，组成一个新数组。
函数参数：item(项目值)、index(项目索引)、array(数组本身)

    var arr = [45, 4, 9, 16, 25]
    var newArr = arr.filter(myFunction)

    function myFunction(value, index, array) {
      return value > 18
    }
    console.log(newArr) // [45, 25]

find

返回第一个符合条件的数组成员。
参数：一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
函数参数：item(项目值)、index(项目索引）、array(数组本身)

    var arr = [4, 9, 16, 25, 29]
    var findItem = arr.find(myFunction)

    function myFunction(item, index, array) {
      return item > 18
    }
    console.log(findItem) // 25

findIndex

返回第一个符合条件的数组成员的索引。
参数：一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员下标，然后返回该成员。如果没有符合条件的成员，则返回-1。
函数参数：item(项目值)、index(项目索引）、array(数组本身)

    var arr = [4, 9, 16, 25, 29]
    var findIndex = arr.findIndex(myFunction)

    function myFunction(item, index, array) {
      return item > 18
    }
    console.log(findIndex) // 3

keys

返回一个包含数组中每个索引键的Array Iterator对象。

const array1 = ['a', 'b', 'c']
const iterator = array1.keys()
console.log(iterator) // Array Iterator {}

for (const key of iterator) {
  console.log(key)  // 依次输出：0  1  2
}

values

返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

    const array1 = ['a', 'b', 'c']
    const iterator = array1.values()
    console.log(iterator) // Array Iterator {}
    
    for (const value of iterator) {
      console.log(value) // 依次输出："a"  "b"  "c"
    }

entries

返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对

    var fruits = ["Banana", "Orange", "Apple", "Mango"]
    fruits.entries()
    console.log(fruits.entries()) // ['Banana', 'Orange', 'Apple', 'Mango']

from

from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
如果对象是数组返回 true，否则返回 false。
参数：

1. object 必需，要转换为数组的对象。
2. mapFunction 可选，数组中每个元素要调用的函数。
3. thisValue 可选，映射函数(mapFunction)中的 this 对象。

返回值：数组对象
语法：

Array.from(object, mapFunction, thisValue)

console.log(Array.from('foo')) // ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x)) // [2, 4, 6]

reduce

从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。
注：不会减少原始数组。
函数参数：total(总数)、item(项目值)、index(项目索引)、array(数组本身)

    var arr = [45, 4, 9, 16, 25]
    var sum = arr.reduce(myFunction)

    function myFunction(total, value, index, array) {
      return total + value
      console.log(total)
    }
    console.log(sum) // 99

reduceRight

从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。
注：接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

    const array1 = [
      [0, 1],
      [2, 3],
      [4, 5],
    ].reduceRight((accumulator, currentValue) =>
      accumulator.concat(currentValue)
    )
    console.log(array1) // [4, 5, 2, 3, 0, 1]

some

如果数组中至少有一个元素符合条件，则返回 true，否则返回 false。
函数参数：item(项目值)、index(项目索引)、array(数组本身)

var arr = [45, 4, 9, 16, 25]
var someOver = arr.some(myFunction)

function myFunction(value, index, array) {
  return value > 18
}
console.log(someOver) // true

every

如果数组中每一个元素都符合条件，则返回 true，否则返回 false。
函数参数：item(项目值)、index(项目索引)、array(数组本身)

  var arr = [45, 4, 9, 16, 25]
  var everyOver = arr.every(myFunction)

  function myFunction(value, index, array) {
  return value > 18
}
console.log(everyOver) // false

---

判断一个变量是不是数组

三种方法：

1. Array.isArray(obj)

2. obj instanceof Array

3. Object.prototype.toString.call(obj)

以上方法返回的都是布尔值

  // 判断是否是数组
  var aaa = '123'
  var bbb = ['1', '2', '3']
  // 方法一
  function isArray(obj) {
    return Array.isArray(obj)
  }
  // 方法二
  function isArray(obj) {
    return obj instanceof Array
  }
  // 方法三
  function isArray(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]'
  }
  console.log(isArray(aaa)) //false
  console.log(isArray(bbb)) //true

---

数组去重的方法

1.最简单数组去重法

    var arr = ['12', '32', '89', '12', '12', '78', '12', '32']
    var newarr = unique1(arr)
    console.log(newarr) //["12", "32", "89", "78"]

    function unique1(array) {
      var n = [] //一个新的临时数组
      for (var i = 0; i < array.length; i++) {
        //遍历当前数组
        if (n.indexOf(array[i]) == -1) n.push(array[i])
      }
      return n
    }

2.数组下标判断法

    var arr = ['12', '32', '89', '12', '12', '78', '12', '32']
    var newarr = unique2(arr)
    console.log(newarr) //["12", "32", "89", "78"]

    function unique2(array) {
      var n = [array[0]] //结果数组
      for (var i = 1; i < array.length; i++) {
        //从第二项开始遍历
        if (array.indexOf(array[i]) == i) n.push(array[i])
      }
      return n
    }

3.速度最快， 占空间最多（空间换时间）

    var arr = ['12', '32', '89', '12', '12', '78', '12', '32']
    var newarr = unique3(arr)
    console.log(newarr) //["12", "32", "89", "78"]

    function unique3(array) {
      var n = {}, r = [],type
      for (var i = 0; i < array.length; i++) {
        type = typeof array[i]
        if (!n[array[i]]) {
           n[array[i]] = [type]
           r.push(array[i])
        } else if (n[array[i]].indexOf(type) < 0) {
           n[array[i]].push(type)
           r.push(array[i])
        }
      }
      return r
    }