数组（Array)常用方法

Posted 2021-10-04 王——小喵

 实例方法

arr.forEach(callback)遍历数组，没有返回值

callback的参数： item--当前元素   index --当前元素对应的索引号    array --原数组

 let arr = [1, 2, 3, 4, 5]
    arr.forEach((item, index, array) => {
      item = item * 2
      console.log(`item:${item}    index:${index}     array:${array}`)
    })
    // item:2    index:0     array:1,2,3,4,5
    // item:4    index:1     array:1,2,3,4,5
    // item:6    index:2     array:1,2,3,4,5
    // item:8    index:3     array:1,2,3,4,5
    // item:10   index:4     array:1,2,3,4,5

arr.find(callback)遍历查找首次满足条件的值，并返回值

callback的参数： item--当前元素   index --当前元素对应的索引号    array --原数组

let arr = [7, 8, 9, 10, 5]
    let a = arr.find((item, index, array) => item > 3)
    console.log(a)  // 0

arr.findIndex(callback)遍历查找首次满足条件的值，并返回索引号

callback的参数： item--当前元素   index --当前元素对应的索引号    array --原数组

 let arr = [7, 8, 9, 10, 5]
    let a = arr.findIndex((item, index, array) => item > 3)
    console.log(a)  // 7

arr.some(callback)遍历查找是否存在满足条件的值，存在就返回true，否则就返回false

callback的参数： item--当前元素   index --当前元素对应的索引号    array --原数组

let arr = [7, 8, 9, 10, 5]
    let a = arr.some((item, index, array) => item > 11)
    console.log(a)  // false
    let b = arr.some((item, index, array) => item < 11)
    console.log(b)  // true

arr.every(callback)遍历查找是否所有元素都满足条件，都满足返回true，否则返回false

callback的参数： item--当前元素   index --当前元素对应的索引号    array --原数组

let arr = [7, 8, 9, 10, 5]
    let a = arr.every((item, index, array) => item > 6)
    console.log(a)  // false
    let b = arr.every((item, index, array) => item < 11)
    console.log(b)  // true

arr.filter(callback) 用于遍历筛选满足条件的元素(过滤数组)，把所有满足条件的元素返回到新数组

callback的参数： item--当前元素   index --当前元素对应的索引号    array --原数组

let arr = [7, 8, 9, 10, 5]
    let a = arr.filter((item, index, array) => item > 6)
    console.log(a)  // [7, 8, 9, 10]
    let b = arr.filter((item, index, array) => item < 10)
    console.log(b)  //[7, 8, 9, 5]

arr.map(callback)用于遍历数组每个元素让其执行一遍回调函数，把所有结果放到新数组返回

callback的参数： item--当前元素   index --当前元素对应的索引号    array --原数组

 let arr = [1, 2, 3, 4, 5]
    let a = arr.map((item, index, array) => {
      item = item * 3
    })
    console.log(a)//[3,6,9,12,15]

arr.reduce(callback)用于将数组中的每个元素执行一遍回调函数，并返回计算结果

callback的参数： acc--累计器（累计回调的返回值; 它是上一次调用回调时返回的累积值，或者是提供的初始值）   cur--当前元素  index--当前索引值  array --原数组

 let arr = [1, 2, 3, 4]
    let arr1 = arr.reduce((acc, cur, index, array) => { return acc + cur })
    console.log(arr1)//10
    //callback 被调用三次，每次调用的参数和返回值如下表
    // 第一次调用     acc=1    cur=2    index=1  arr=[1, 2, 3, 4]   return=3
    // 第二次调用     acc=3    cur=3    index=2  arr=[1, 2, 3, 4]   return=6
    // 第三次调用     acc=6    cur=4    index=3  arr=[1, 2, 3, 4]   return=10

    let arr2 = arr.reduce((acc, cur, index, array) => { return acc + cur }, 10)
    console.log(arr2)//20
    //callback 被调用四次，每次调用的参数和返回值如下表
    // 第一次调用     acc=10    cur=1    index=0  arr=[1, 2, 3, 4]   return=11
    // 第二次调用     acc=11    cur=2    index=1  arr=[1, 2, 3, 4]   return=13
    // 第三次调用     acc=13    cur=3    index=2  arr=[1, 2, 3, 4]   return=16
    // 第四次调用     acc=16    cur=4    index=3  arr=[1, 2, 3, 4]   return=20

arr.sort() 对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的，根据公式可按照降序和升序比较

let arr = [2, 10, 6, 1, 4, 22, 3]
    console.log(arr.sort())   // [1, 10, 2, 22, 3, 4, 6]
    let arr1 = arr.sort((a, b) => a - b)
    console.log(arr1)   // [1, 2, 3, 4, 6, 10, 22]
    let arr2 = arr.sort((a, b) => b - a)
    console.log(arr2)  // [22, 10, 6, 4, 3, 2, 1]

arr.indexOf()查找在数组中首次出现的索引位置，如果找到就会返回首次出现的索引值，找不到就会返回-1

arr.lastIndexOf()查找在数组中最后一次出现的索引位置，如果找到就会返回首次出现的索引值，找不到就返回-1

let arr = ['a', 'b', 'c', 'a', 'b', 'c', 'd']
    console.log(arr.indexOf('a'))   // 0
    console.log(arr.indexOf('f'))   // -1
    console.log(arr.lastIndexOf('a'))   //3

arr.pop()删除数组的最后一项，并返回删除的元素

arr.shift()删除数组的第一项，并返回删除的元素

let arr = [1, 2, 3, 4, 5]
    console.log(arr.pop())     // 5
    console.log(arr)  //[1,2,3,4]
    console.log(arr.shift())//1
    console.log(arr)//[2,3,4]

arr.splice(）删除或替换数组中一项或几项元素，并返回删除或替换的元素
第一个参数：从哪个索引值开始；第二个参数：删除或替换几个；第三个参数：替换为什么

let arr = [1, 2, 3, 4, 5]
    let re = arr.splice(1, 1, 'aaa')//替换
    console.log(re);//[2]
    console.log(arr);//[1,'aaa',3,4,5]
    let res = arr.splice(1, 1)//删除
    console.log(res);//['aaa']
    console.log(arr)//[1,3,4,5]

arr.push(要添加的元素)从数组最后的位置追加元素，并返回新数组的长度

arr.unshift(要添加的元素)从数组最前面追加元素，并返回新数组的长度

let arr = [1, 2, 3, 4, 5]
    console.log(arr.push(5))   // 6
    console.log(arr) // [1,2,3,4,5,5]
    console.log(arr.unshift(1))   // 7
    console.log(arr) // [1,1,2,3,4,5,5]

arr.reverse() 将数组反转,返回反转后的数组

let arr = [1,2,3,4,5]
console.log(arr.reverse())    // [5,4,3,2,1]
console.log(arr)    // [5,4,3,2,1]

arr.concat() 连接两个数组 返回值为连接后的新数组

let arr = [1,2,3,4,5]
console.log(arr.concat([1,2]))  // [1,2,3,4,5,1,2]
console.log(arr)   // [1,2,3,4,5]

静态方法

Array.isArray（）判断是否为数组，返回布尔值

    let arr = [1, 2, 3, 4, 5]
    let a = Array.isArray(arr)//true
    let str = 'aaa'
    let b = Array.isArray(str)//false

Array.from（）把有length属性的伪数组转成真数组

let o = {
      0: 'a',
      1: 'b',
      2: 'c',
      3: 'd',
      length: 4
    }
    let arr = Array.from(o)
    console.log(arr);//['a','b','c','d']
    let lis = document.querySelectorAll('li')
    let array = Array.from(lis)
    console.log(array);//[li,li,li]