JavaScript Array(数组)方法总结

JavaScript Array(数组)方法总结

数组的作用：

使用单独的变量名来存储一系列的值，用于在单一变量中存储多个值

数组的创建：

1. 通过Array构造函数

var arr = new Array()  //创建一个空数组
var arr = new Array(9)  //创建一个长度为9的数组
var arr = new Array('a', 'b', 'c')  //创建一个包含三个字符串的数组

2. 通过字面量表达式

var arr = []  //创建一个空数组
var arr = ['a', 'b', 'c']  //创建一个包含三个字符串的数组

数组方法：

Array.isArray()方法用于判断一个对象是否为数组

参数： Array.isArray(obj)

• obj： 必需，要判断的对象

返回值： 如果对象是数组返回 true，否则返回 false

var arr = [1, 2, 3]
var b = Array.isArray(arr)
console.log(b)  //true

var str = '123'
var b = Array.isArray(str)
console.log(b)  //false

Array.of()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

参数： Array.of(item1, item2, …, itemX)

• item1, item2, …, itemX： 必需，任意个参数，将按顺序成为返回数组中的元素

返回值： 返回一个新的数组

var arr = Array.of(1, 2, 3)
console.log(arr)  //[1, 2, 3]

concat()方法用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本

参数： array1.concat(array2, array3…, arrayX)

• array2, array3…, arrayX： 必需，该参数可以是具体的值，也可以是数组对象，可以是任意多个

返回值： 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组

var arr1 = [1, 2]
var arr2 = [3, 4]
var arr3 = arr1.concat(arr2)
console.log(arr3)  //[1, 2, 3, 4]
console.log(arr1)  //[1, 2]（原数组不变）
console.log(arr2)  //[3, 4]（原数组不变）

join()方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的

参数： array.join(separator)

• separator： 可选，指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符

返回值： 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的

var arr = [1, 2, 3]
var str = arr.join('')
console.log(str)  //'123'
console.log(arr)  //[1, 2, 3]（原数组不变）

var arr = [1, 2, 3]
var str = arr.join('-')
console.log(str)  //'1-2-3'
console.log(arr)  //[1, 2, 3]（原数组不变）

pop()方法用于删除数组的最后一个元素

返回值： 返回删除的元素

var arr = [1, 2, 3]
var a = arr.pop()
console.log(a)  //3
console.log(arr)  //[1, 2]（原数组改变）

push()方法可向数组的末尾添加一个或多个元素

参数： array.push(item1, item2, …, itemX)

• item1, item2, …, itemX： 必需，要添加到数组的元素

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

var arr = [1, 2, 3]
var n = arr.push(4)
console.log(n)  //4
console.log(arr)  //[1, 2, 3, 4]（原数组改变）

var arr = [1, 2, 3]
var n = arr.push(4, 5)
console.log(n)  //5
console.log(arr)  //[1, 2, 3, 4, 5]（原数组改变）

shift()方法用于把数组的第一个元素从其中删除

返回值： 返回第一个元素的值

var arr = [1, 2, 3]
var a = arr.shift()
console.log(a)  //1
console.log(arr)  //[2, 3]（原数组改变）

unshift()方法可向数组的开头添加一个或更多元素

参数： array.unshift(item1, item2, …, itemX)

• item1, item2, …, itemX： 必需，向数组起始位置添加一个或者多个元素

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

var arr = [1, 2, 3]
var n = arr.unshift(4)
console.log(n)  //4
console.log(arr)  //[4, 1, 2, 3]（原数组改变）

var arr = [1, 2, 3]
var n = arr.unshift(4, 5)
console.log(n)  //4
console.log(arr)  //[4, 5, 1, 2, 3]（原数组改变）

reverse()方法用于颠倒数组中元素的顺序

返回值： 返回颠倒顺序后的数组

var arr1 = [1, 2, 3]
var arr2 = arr1.reverse()
console.log(arr2)  //[3, 2, 1]
console.log(arr1)  //[3, 2, 1]（原数组改变）

slice()方法可从已有的数组中返回选定的元素

参数： array.slice(start, end)

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

返回值： 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素

var arr1 = [1, 2, 3]
var arr2 = arr1.slice(1)
console.log(arr2)  //[2, 3]
console.log(arr1)  //[1, 2, 3]（原数组不变）

var arr1 = [1, 2, 3]
var arr2 = arr1.slice(1, 2)
console.log(arr2)  //[2]
console.log(arr1)  //[1, 2, 3]（原数组不变）

sort()方法用于对数组的元素进行排序

参数： array.sort(sortby)

• sortby： 可选，规定排序顺序。必须是函数

返回值： 对数组的引用。请注意，数组在原数组上进行排序，不生成副本

var arr1 = [1, 3, 2]
var arr2 = arr1.sort()
console.log(arr2)  //[1, 2, 3]
console.log(arr1)  //[1, 2, 3]（原数组改变）

var arr1 = [1, 3, 2]
var arr2 = arr1.sort((a, b) => {return a-b})  //升序
console.log(arr2)  //[1, 2, 3]
console.log(arr1)  //[1, 2, 3]（原数组改变）

var arr1 = [1, 3, 2]
var arr2 = arr1.sort((a, b) => {return b-a})  //降序
console.log(arr2)  //[3, 2, 1]
console.log(arr1)  //[3, 2, 1]（原数组改变）

splice()方法向/从数组中添加/删除项目，然后返回被删除的项目

参数： array.splice(index, howmany, item1, …, itemX)

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

返回值： 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组

var arr1 = [1, 2, 3]
var arr2 = arr1.splice(1, 2)
console.log(arr2)  //[2, 3]
console.log(arr1)  //[1]（原数组改变）

var arr1 = [1, 2, 3]
var arr2 = arr1.splice(1, 2, 4, 5)
console.log(arr2)  //[2, 3]
console.log(arr1)  //[1, 4, 5]（原数组改变）

toString()方法可把数组转换为字符串

返回值： 返回字符串，数组的所有值用逗号隔开

var arr = [1, 2, 3]
var str = arr.toString()
console.log(str)  //1,2,3
console.log(arr)  //[1, 2, 3]（原数组不变）

indexOf()方法可返回一个指定的元素在数组中第一次出现的位置，从该数组的前面向后查找，如果在数组中没找到指定元素则返回 -1

参数： array.indexOf(item, start)

• item： 必需，查找的元素
• start： 可选，整数参数。规定在数组中开始查找的位置。它的合法取值是 0 到 array.length - 1。如省略该参数，则将从数组的首个值开始查找

返回值： 返回元素在数组中第一次出现的位置，如果没有查找到则返回 -1

var arr = [1, 2, 2, 3]
var n = arr.indexOf(2)
console.log(n)  //1
console.log(arr)  //[1, 2, 2, 3]（原数组不变）

var arr = [1, 2, 2, 3]
var n = arr.indexOf(1, 2)
console.log(n)  //-1
console.log(arr)  //[1, 2, 2, 3]（原数组不变）

lastIndexOf()方法可返回一个指定的元素在数组中最后出现的位置，从该数组的后面向前查找，如果在数组中没找到指定元素则返回 -1

参数： array.lastIndexOff(item, start)

• item： 必需，查找的元素
• start： 可选，整数参数，规定在数组中开始查找的位置。它的合法取值是 0 到 array.length - 1。如省略该参数，则将从数组的最后一个值开始查找

返回值： 返回元素在数组中最后出现的位置，如果没有查找到则返回 -1

var arr = [1, 2, 2, 3]
var n = arr.lastIndexOf(2)
console.log(n)  //2
console.log(arr)  //[1, 2, 2, 3]（原数组不变）

var arr = [1, 2, 2, 3]
var n = arr.lastIndexOf(3, 2)
console.log(n)  //-1
console.log(arr)  //[1, 2, 2, 3]（原数组不变）

includes()方法用来判断一个数组是否包含一个指定的值

参数： array.includes(searchElement, fromIndex)

• searchElement： 必需，需要查找的元素值
• fromIndex： 可选，从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0

返回值： 如果找到指定值返回 true，否则返回 false

var arr = [1, 2, 3]
var b = arr.includes(2)
console.log(b)  //true
console.log(arr)  //[1, 2, 3]（原数组不变）

var arr = [1, 2, 3]
var b = arr.includes(2, 2)
console.log(b)  //false
console.log(arr)  //[1, 2, 3]（原数组不变）

fill()方法用于将一个固定值替换数组的元素

参数： array.fill(value, start, end)

• value： 必需，填充的值
• star： 可选，开始填充位置
• end： 可选，停止填充位置 (默认为 array.length)

返回值： 返回替换后的数组

var arr1 = [1, 2, 3]
var arr2 = arr1.fill(4)
console.log(arr2)  //[4, 4, 4]
console.log(arr1)  //[4, 4, 4]（原数组改变）

var arr1 = [1, 2, 3]
var arr2 = arr1.fill(4, 0, 2)
console.log(arr2)  //[4, 4, 3]
console.log(arr1)  //[4, 4, 3]（原数组改变）

copyWithin()方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中

参数： array.copyWithin(target, start, end)

• target： 必需，停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数
• star： 可选，元素复制的起始位置
• end： 可选，停止填充位置 (默认为 array.length)

返回值： 返回拷贝后的数组

var arr1 = [1, 2, 3, 4, 5]
var arr2 = arr1.copyWithin(2)
console.log(arr2)  //[1, 2, 1, 2, 3]
console.log(arr1)  //[1, 2, 1, 2, 3]（原数组改变）

var arr1 = [1, 2, 3, 4, 5]
var arr2 = arr1.copyWithin(2, 1)
console.log(arr2)  //[1, 2, 2, 3, 4]
console.log(arr1)  //[1, 2, 2, 3, 4]（原数组改变）

var arr1 = [1, 2, 3, 4, 5]
var arr2 = arr1.copyWithin(2, 1, 3)
console.log(arr2)  //[1, 2, 2, 3, 5]
console.log(arr1)  //[1, 2, 2, 3, 5]（原数组改变）

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

参数： array.map(function(currentValue, currentIndex, arr), thisValue)

• function(currentValue, currentIndex, arr)： 必需，数组每个元素需要执行的函数
  函数参数：
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • arr：可选，当前元素所属的数组对象
• thisValue： 可选，传递给函数的值一般用 “this” 值，如果这个参数为空， “undefined” 会传递给 “this” 值

返回值： 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

var arr1 = [1, 2, 3]
var arr2 = arr1.map(num => {
    return num+1
})
console.log(arr2)  //[2, 3, 4]
console.log(arr1)  //[1, 2, 3]（原数组不变）

forEach()方法用于调用数组的每个元素，并将元素传递给回调函数

参数： array.forEach(function(currentValue, currentIndex, arr), thisValue)

• function(currentValue, currentIndex, arr)： 必需，数组每个元素需要执行的函数
  函数参数：
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • arr：可选，当前元素所属的数组对象
• thisValue： 可选，传递给函数的值一般用 “this” 值，如果这个参数为空， “undefined” 会传递给 “this” 值

返回值： undefined

var arr1 = [1, 2, 3]
var total = 0
var arr2 = arr1.forEach(num => {
    total += num
})
console.log(total)  //6
console.log(arr2)  //undefined
console.log(arr1)  //[1, 2, 3]（原数组不变）

reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

参数： array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

• function(total, currentValue, index, arr)： 必需，用于执行每个数组元素的函数
  函数参数：
  • total：必需，初始值, 或者计算结束后的返回值
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • arr：可选，当前元素所属的数组对象
• initialValue： 可选，传递给函数的初始值

返回值： 返回计算结果（reduce() 对于空数组是不会执行回调函数的）

var arr = [1, 2, 3]
var n = arr.reduce(function(total, num) {
    return total + num
})
console.log(n)  //6
console.log(arr)  //[1, 2, 3]（原数组不变）

var arr = [1, 2, 3]
var n = arr.reduce(function(total, num) {
    return total + num
}, 2)
console.log(n)  //8
console.log(arr)  //[1, 2, 3]（原数组不变）

常见用法：

//求数组中最大值（最小值同理）
var arr = [1, 2, 3]
var max = arr.reduce(function(max, item) {
    return max > item ? max : item
})
console.log(max)  //3

//数组去重
var arr1 = [1, 2, 2, 3]
var arr2 = arr1.reduce(function(arr, item) {
    if(arr.indexOf(item) === -1) {
        arr.push(item)
    }
    return arr
}, [])
console.log(arr2)  //[1, 2, 3]

//统计数组中每一项重复数量
var arr = ['a', 'b', 'b', 'c', 'c', 'c']
var res = arr.reduce(function(obj, item) {
    obj[item] ? obj[item]++ : obj[item] = 1
    return obj
}, {})
console.log(res)  //{'a': 1, 'b': 2, 'c': 3}

//数组维度转换
var arr1 = [[1, 2], [3, 4], [5, 6]]
var arr2 = arr1.reduce(function(arr, item) {
    return arr.concat(item)
}, [])
console.log(arr2)  //[1, 2, 3, 4, 5, 6]

reduceRight()方法接收一个函数作为累加器，数组中的每个值（从右到左）开始缩减，最终计算为一个值

参数： array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

• function(total, currentValue, index, arr)： 必需，用于执行每个数组元素的函数
  函数参数：
  • total：必需，初始值, 或者计算结束后的返回值
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • arr：可选，当前元素所属的数组对象
• initialValue： 可选，传递给函数的初始值

返回值： 返回计算结果（reduceRight() 对于空数组是不会执行回调函数的）

var arr = [1, 2, 3]
var n = arr.reduceRight(function(total, num) {
    return total + num
}, 0)
console.log(n)  //6
console.log(arr)  //[1, 2, 3]（原数组不变）

var arr = [1, 2, 3]
var n = arr.reduceRight(function(total, num) {
    return total + num
}, 3)
console.log(n)  //9
console.log(arr)  //[1, 2, 3]（原数组不变）

find()方法返回通过测试（函数内判断）的数组的第一个元素的值

参数： array.find(function(currentValue, currentIndex, arr), thisValue)

• function(currentValue, currentIndex, arr)： 必需，数组每个元素需要执行的函数
  函数参数：
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • arr：可选，当前元素所属的数组对象
• thisValue： 可选，传递给函数的值一般用 “this” 值，如果这个参数为空， “undefined” 会传递给 “this” 值

返回值： 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined

var arr = [1, 2, 3]
var n = arr.find(num => {
    return num>1
})
console.log(n)  //2
console.log(arr)  //[1, 2, 3]（原数组不变）

var arr = [1, 2, 3]
var n = arr.find((num, index) => {
    return num>1 && index>1
})
console.log(n)  //3
console.log(arr)  //[1, 2, 3]（原数组不变）

findIndex()方法返回通过测试（函数内判断）的数组的第一个元素的位置

参数： array.findIndex(function(currentValue, currentIndex, arr), thisValue)

• function(currentValue, currentIndex, arr)： 必需，数组每个元素需要执行的函数
  函数参数：
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • arr：可选，当前元素所属的数组对象
• thisValue： 可选，传递给函数的值一般用 “this” 值，如果这个参数为空， “undefined” 会传递给 “this” 值

返回值： 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1

var arr = [1, 2, 3]
var n = arr.findIndex(num => {
    return num>1
})
console.log(n)  //1
console.log(arr)  //[1, 2, 3]（原数组不变）

var arr = [1, 2, 3]
var n = arr.findIndex((num, index) => {
    return num>1 && index>1
})
console.log(n)  //2
console.log(arr)  //[1, 2, 3]（原数组不变）

every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供）

参数： array.every(function(currentValue, currentIndex, arr), thisValue)

• function(currentValue, currentIndex, arr)： 必需，数组每个元素需要执行的函数
  函数参数：
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • arr：可选，当前元素所属的数组对象
• thisValue： 可选，传递给函数的值一般用 “this” 值，如果这个参数为空， “undefined” 会传递给 “this” 值

返回值： 如果所有元素都满足条件返回 true，有一个元素不满足返回 false（剩余的元素不会再进行检测）

var arr = [1, 2, 3]
var b = arr.every(num => {
    return num>0
})
console.log(b)  //true
console.log(arr)  //[1, 2, 3]（原数组不变）

var arr = [1, 2, 3]
var b = arr.every(num => {
    return num>1
})
console.log(b)  //false
console.log(arr)  //[1, 2, 3]（原数组不变）

some()方法用于检测数组中是否有元素满足指定条件（通过函数提供）

参数： array.some(function(currentValue, currentIndex, arr), thisValue)

• function(currentValue, currentIndex, arr)： 必需，数组每个元素需要执行的函数
  函数参数：
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • arr：可选，当前元素所属的数组对象
• thisValue： 可选，传递给函数的值一般用 “this” 值，如果这个参数为空， “undefined” 会传递给 “this” 值

返回值： 如果数组中有元素满足条件返回 true（剩余的元素不会再执行检测），否则返回 false

var arr = [1, 2, 3]
var b = arr.some(num => {
    return num>2
})
console.log(b)  //true
console.log(arr)  //[1, 2, 3]（原数组不变）

var arr = [1, 2, 3]
var b = arr.some(num => {
    return num>4
})
console.log(b)  //false
console.log(arr)  //[1, 2, 3]（原数组不变）

filter()方法返回一个新数组，新数组中的元素是通过检查指定数组中符合条件（通过函数提供）的所有元素

参数： array.filter(function(currentValue, currentIndex, arr), thisValue)

• function(currentValue, currentIndex, arr)： 必需，数组每个元素需要执行的函数
  函数参数：
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • arr：可选，当前元素所属的数组对象
• thisValue： 可选，传递给函数的值一般用 “this” 值，如果这个参数为空， “undefined” 会传递给 “this” 值

返回值： 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

var arr1 = [1, 2, 3]
var arr2 = arr1.filter(num => {
    return num>1
})
console.log(arr2)  //[2, 3]
console.log(arr1)  //[1, 2, 3]（原数组不变）

var arr1 = [1, 2, 3]
var arr2 = arr1.filter((num, index) => {
    return num>1 && index>1
})
console.log(arr2)  //[3]
console.log(arr1)  //[1, 2, 3]（原数组不变）