文章序

一直以来对于JS的数组操作都是囫囵吞枣，知道大概有什么功能的数组，然后面向百度编程，今天在这里自我梳理一下JS数组的所有方法， 便于记忆和以后查询

汇总

JS所有数组方法整理图如下：

图源自summer_zhh的CSDN帖子，链接如下
https://blog.csdn.net/summer_zhh/article/details/108856373

详解

Array.isArray()

描述：判断对象是否为数组
代码：

    console.log('----Array.isArray方法----')
    let array = [1,2,3]
    let obj = {type: 'obj'}
    let num = 666
    let string = 'string'
    let fun = function() {console.log('我是函数')}
    console.log(Array.isArray(array))
    console.log(Array.isArray(obj))
    console.log(Array.isArray(num))
    console.log(Array.isArray(string))
    console.log(Array.isArray(fun))

结果：

----Array.isArray方法----
true
false
false
false
false

Array.from()

描述：将类似数组的对象和可遍历的对象转为真正的数组
代码：

    console.log('----Array.from方法----')
    let NodeList = document.querySelectorAll('li')
    let string = 'abcdefg'
    let num = 666
    let arrayFromList = Array.from(NodeList)
    let arrayFromString = Array.from(string)
    let arrayFromNum = Array.from(num)
    console.log(NodeList)
    console.log(arrayFromList)
    console.log(arrayFromString)
    console.log(arrayFromNum)

结果：

----Array.from方法----
NodeList(3) [li, li, li]
(3) [li, li, li]
(7) ["a", "b", "c", "d", "e", "f", "g"]
[]

Array.of()

描述：将一组值转换为数组
代码：

    console.log('----Array.of方法----')
    let newArraySignle = new Array(4)
    let newArrayMulti = new Array(4, 5, 6)
    let ofArraySignle = Array.of(4)
    let ofArrayMulti = Array.of(4, 5, 6)
    console.log(newArraySignle)
    console.log(newArrayMulti)
    console.log(ofArraySignle)
    console.log(ofArrayMulti)

结果：

----Array.of方法----
(4) [empty × 4]
(3) [4, 5, 6]
[4]
(3) [4, 5, 6]

Array.push()、Array.pop()、Array.unshift()、Array.shift()

描述：在数组最后一位添加数据，返回数组长度
删除数组最后一位，返回被删除的数据
在数组第一位添加数据，返回数组长度
删除数组第一位，返回被删除的数据
代码：

    console.log('----Array.push pop unshift shift方法----')
    let array = [1,2,3,4,5,6]
    let res = null
    console.log(array)
    res = array.push(7,8)
    console.log(array, res)
    res = array.pop()
    console.log(array, res)
    res = array.unshift(-1, 0)
    console.log(array, res)
    res = array.shift()
    console.log(array, res)

结果：

----Array.push pop unshift shift方法----
(6) [1, 2, 3, 4, 5, 6]
(8) [1, 2, 3, 4, 5, 6, 7, 8] 8
(7) [1, 2, 3, 4, 5, 6, 7] 8
(9) [-1, 0, 1, 2, 3, 4, 5, 6, 7] 9
(8) [0, 1, 2, 3, 4, 5, 6, 7] -1

Array.join()

描述：指定分隔符，将数组转为字符串并返回，元素之间通过分隔符连接，不改变原数组
代码：

    console.log('----Array.join方法----')
    let array = [1,2,3,4,5,6, 'apple', 'banana', 'chery']
    console.log(array.join())
    console.log(array.join('--'))
    console.log(array.join('||'))
    console.log(array)

结果：

----Array.join方法----
1,2,3,4,5,6,apple,banana,chery
1--2--3--4--5--6--apple--banana--chery
1||2||3||4||5||6||apple||banana||chery
(9) [1, 2, 3, 4, 5, 6, "apple", "banana", "chery"]

Array.concat()

描述：合并数组，返回合并之后的新数组，不改变原数组
代码：

    console.log('----Array.concat方法----')
    let array1 = [1, 2, 3]
    let array2 = [4, 5, 6]
    let array3 = ['a', 'b', 'c']
    let array4 = ['d', 'e', 'f']
    console.log(array1.concat(array3).concat(array2).concat(array4))
    console.log(array1)
    console.log(array2)
    console.log(array3)
    console.log(array4)

结果：

----Array.concat方法----
(12) [1, 2, 3, "a", "b", "c", 4, 5, 6, "d", "e", "f"]
(3) [1, 2, 3]
(3) [4, 5, 6]
(3) ["a", "b", "c"]
(3) ["d", "e", "f"]

Array.reverse()

描述：反转数组，返回结果，改变原数组
代码：

    console.log('----Array.concat方法----')
    let array1 = [1, 2, 3]
    let array2 = [4, 5, 6]
    let array3 = ['a', 'b', 'c']
    let array4 = ['d', 'e', 'f']
    console.log(array1.concat(array3).concat(array2).concat(array4))
    console.log(array1)
    console.log(array2)
    console.log(array3)
    console.log(array4)

结果：

----Array.reverse方法----
(5) [5, 4, 3, 2, 1]
(5) [5, 4, 3, 2, 1]

Array.slice()

描述：传入两个参数，开始截取下标和结束截取下标，返回截取结果，原数组不变，类似于复制
代码：

    console.log('----Array.slice方法----')
    let array = [1, 2, 3, 4, 5]
    let sliceArray = array.slice(2, 4)
    console.log(sliceArray)
    console.log(array)

结果：

----Array.slice方法----
 (2) [3, 4]
 (5) [1, 2, 3, 4, 5]

Array.splice()

描述：传入两个参数，开始截取下标和结束截取下标，返回截取结果，原数组该下标区间内数据被删除，类似于剪切
代码：

    console.log('----Array.splice方法----')
    let array = [1, 2, 3, 4, 5]
    let spliceArray = array.splice(1, 3)
    console.log(spliceArray)
    console.log(array)

结果：

----Array.splice方法----
(3) [2, 3, 4]
(2) [1, 5]

Array.sort()

描述：对数组进行排序，默认排序顺序按照UniCode码。可选参数为回调函数，用于指定排序方法，改变原数组
代码：

    console.log('----Array.sort方法----')
    let array1 = [3, 20, 32, 4, 45, 80, 10, 6]
    let array2 = ['tom', 'john', 'charlie', 'david', 'louis']
    console.log(array1.sort())
    console.log(array2.sort())
    console.log(array1.sort((a, b) => a - b))
    console.log(array1.sort((a, b) => b - a))
    console.log(array1)
    console.log(array2)

结果：

----Array.sort方法----
(8) [10, 20, 3, 32, 4, 45, 6, 80]
(5) ["charlie", "david", "john", "louis", "tom"]
(8) [3, 4, 6, 10, 20, 32, 45, 80]
(8) [80, 45, 32, 20, 10, 6, 4, 3]
(8) [80, 45, 32, 20, 10, 6, 4, 3]
(5) ["charlie", "david", "john", "louis", "tom"]

Array.toString()

描述：直接转成字符串，返回结果，不改变原数组
代码：

    console.log('----Array.toString方法----')
    let array = [1, 2, 3, 4, 5]
    console.log(array.toString())
    console.log(array)

结果：

----Array.toString方法----
1,2,3,4,5
(5) [1, 2, 3, 4, 5]

Array.valueOf()

描述：返回原数组，不改变原数组，一般不用
代码：

    console.log('----Array.valueOf方法----')
    let array = [1, 2, 3, 4, 5]
    console.log(array.valueOf())
    console.log(array)

结果：

----Array.valueOf方法----
(5) [1, 2, 3, 4, 5]
(5) [1, 2, 3, 4, 5]

Array.forEach()

描述：遍历数组，将元素传给回调函数，不改变原数组，无返回值
代码：

    console.log('----Array.forEach方法----')
    let array = [1, 2, 3, 4, 5]
    array.forEach(item => {
      item = item + 10
      console.log(item)
    })
    console.log(array)

结果：

----Array.forEach方法----
11
12
13
14
15
(5) [1, 2, 3, 4, 5]

Array.filter()

描述：遍历数组，回调函数需返回布尔值，为true时返回本次数组数据，将所有返回值组成新数组返回，即过滤方法，不改变原数组
代码：

    console.log('----Array.filter方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6]
    let res = array.filter((item => {
      return item > 15
    }))
    console.log(array)
    console.log(res)

结果：

----Array.filter方法----
(8) [3, 20, 32, 4, 45, 80, 10, 6]
(4) [20, 32, 45, 80]

Array.every()

描述：遍历数组，所有结果都为true则返回true，不改变原数组
代码：

    console.log('----Array.every方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6]
    let res1 = array.every((item => {
      return item > 15
    }))
    let res2 = array.every((item => {
      return item > 0
    }))
    console.log(array)
    console.log(res1)
    console.log(res2)

结果：

----Array.every方法----
(8) [3, 20, 32, 4, 45, 80, 10, 6]
false
true

Array.some()

描述：遍历数组，结果有一个为true则返回true，不改变原数组
代码：

    console.log('----Array.some方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6]
    let res1 = array.some((item => {
      return item > 15
    }))
    let res2 = array.some((item => {
      return item < 0
    }))
    console.log(array)
    console.log(res1)
    console.log(res2)

结果：

----Array.some方法----
(8) [3, 20, 32, 4, 45, 80, 10, 6]
true
false

Array.map()

描述：遍历数组元素传给回调函数处理，返回处理后的数据，不改变原数组，与forEach对比
代码：

    console.log('----Array.map方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6]
    let res = array.map(item => {
      return item + 10
    })
    console.log(array)
    console.log(res)

结果：

----Array.map方法----
(8) [3, 20, 32, 4, 45, 80, 10, 6]
(8) [13, 30, 42, 14, 55, 90, 20, 16]

Array.reduce()

描述：从数组第一项开始遍历，接收一个函数作为累加器迭代数组的所有项，构建一个最终的返回值
回调函数function(total, currentValue, currentIndex, arr)必需，用于执行每个数组元素的函数
total， 必需，初始值，或者计算结束后的返回值
currentValue，必需，当前元素
currentIndex，可选，当前元素的索引
arr，可选，当前元素所属的数组对象
代码：

    console.log('----Array.reduce方法----')
    //一同学期末成绩如下，各科权重如下，因作弊从总分中扣除50分，求总分和平均分
    var result = [{
        subject: 'math',
        score: 88
      },{
        subject: 'chinese',
        score: 95
      },{
        subject: 'english',
        score: 80
      }]
    var dis = {
      math: 0.5,
      chinese: 0.3,
      english: 0.2
    }
    var sum = result.reduce(function(prev, cur) {
      return cur.score + prev
    }, -50)
    var qsum = result.reduce(function(prev, cur) {
      return cur.score * dis[cur.subject] + prev
    }, 0)
    console.log(sum, qsum)

结果：

----Array.reduce方法----
213 88.5

Array.reduceRight()

描述：功能同上，从数组最后一位开始遍历
代码：略
结果：略

Array.indexOf()

描述：查询数组中的元素，并返回它第一次出现的位置（索引）
代码：

    console.log('----Array.indexOf方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6, 22, 32, 20]
    let res = array.indexOf(32)
    console.log(res)

结果：

----Array.indexOf方法----
2

Array.lastIndexOf()

描述：查询数组中的元素，返回最后一次出现的位置（索引）
代码：

    console.log('----Array.indexOf方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6, 22, 32, 20]
    let res = array.lastIndexOf(32)
    console.log(res)

结果：

----Array.lastIndexOf方法----
9

Array.copyWithIn()

描述：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组，会改变原数组
代码：

    console.log('----Array.copyWithIn方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6, 22, 32, 20]
    array.copyWithin(4, 0, 3)
    console.log(array)

结果：

----Array.copyWithIn方法----
(11) [3, 20, 32, 4, 3, 20, 32, 6, 22, 32, 20]

Array.find()

描述：所有数组成员依次执行回调函数，直到找出第一个返回值为true的成员并返回该成员值
代码：

    console.log('----Array.find方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6, 22, 32, 20]
    let res = array.find(item => {
      return item > 30
    })
    console.log(res)

结果：

----Array.find方法----
32

Array.findIndx()

描述：返回第一个符合条件的数组成员的索引
代码：

    console.log('----Array.findIndx方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6, 22, 32, 20]
    let res = array.findIndex(item => {
      return item > 30
    })
    console.log(res)

结果：

----Array.findIndx方法----
2

Array.fill()

描述：使用给定值，填充一个数组
代码：

    console.log('----Array.fill方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6, 22, 32, 20]
    array.fill(-1)
    console.log(array)

结果：

----Array.fill方法----
(11) [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1]

Array.entries()、Array.keys()、Array.values()

描述：返回一个新的Array Iterator对象，该对象包含数组中每个索引对应的键/值对
描述：返回数组的可迭代对象，是对键名的遍历
描述：返回数组的可迭代对象，是对键值的遍历
代码：

    console.log('----Array.entries keys values方法----')
    let array = ['tom', 'john', 'charlie', 'david', 'louis']
    let res1 = array.entries()
    let res2 = array.keys()
    let res3 = array.values()
    console.log(res1)
    for(let item of res1){
      console.log(item)
    }
    console.log(res2)
    for(let item of res2){
      console.log(item)
    }
    console.log(res3)
    for(let item of res3){
      console.log(item)
    }

结果：

----Array.entries keys values方法----
Array Iterator {}
(2) [0, "tom"]
(2) [1, "john"]
(2) [2, "charlie"]
(2) [3, "david"]
(2) [4, "louis"]
Array Iterator {}
0
1
2
3
4
Array Iterator {}
tom
john
charlie
david
louis

Array.includes()

描述：返回一个布尔值，表示某个数组是否包含给定的值
代码：

    console.log('----Array.includes方法----')
    let array = [3, 20, 32, 4, 45, 80, 10, 6, 22, 32, 20]
    let res = array.includes(32)
    console.log(res)

结果：

----Array.includes方法----
true

Array.flat()

描述：将嵌套的数组“拉平”，变成一维的数组，返回一个新数组
代码：

    console.log('----Array.flat方法----')
    let array = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 0]]
    let res = array.flat()
    console.log(res)

结果：

----Array.flat方法----
(10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

Array.flatmap()

描述：对原数组的每个成员执行一个函数，然后对返回值组成的数组执行flat()方法，返回一个新数组
代码：

    console.log('----Array.flatmap方法----')
    let array = [1, 2, 3, 4, 5]
    let res1 = array.flatMap(x => x * x)
    let res2 = array.flatMap(x => [x * x])
    let res3 = array.flatMap(x => [[x * x]])
    console.log(res1)
    console.log(res2)
    console.log(res3)

结果：

----Array.flatmap方法----
(5) [1, 4, 9, 16, 25]
(5) [1, 4, 9, 16, 25]
(5) [[1], [4], [9], [16], [25]]