常用的JS数组对象API

ES5及以前的Api

  1. ECMAScript5为数组定义了5个迭代方法，每个方法接收两个参数， 一个是每项运行的函数，一个是运行该函数的作用域对象(可选项)，传入这些方法的函数会接收三个参数：数组项的值，该项在数组中的位置，数组对象本身。
//  1. Array.every()
//  全真为真  
//  示例用途：全选+单选逻辑
const number = [1, 2, 3, 4, 5]
const result = number.every((item,index,array)=>{
  return item > 0
})
console.log(result) // true

//  2. Array.some()
//  一真为真，与every()相反  
//  示例用途：用于检测数组中是否有满足条件的项
const number = [1, 2, 3, 4, 5]
const result = number.some((item,index,array)=>{
  return item > 2
})
console.log(result) // true

//  3. Array.filter()
//  数据筛选，返回 条件成立的项组成的数组
//  示例用途： 可以适用于 前端的搜索功能
const number = [1, 2, 3, 4, 5]
const result = number.filter((item,index,array)=>{
  return item > 2
})
console.log(result) // [3, 4, 5]


//  4. Array.map()
//  对数组中的每一项运行改定的函数，返回每次函数调用的结果组成的数组
//  示例用途：for循环遍历操作数组中的每一项。
const number = [1, 2, 3, 4, 5]
const result = number.map((item,index,array)=>{
  return item * index
})
console.log(result) // [0, 2, 6, 12, 20]


//  5. Array.forEach()
//  对数组中的每一项运行改定的函数，这个方法没有返回值
//  示例用途：for循环遍历操作数组中的每一项。
const number = [1, 2, 3, 4, 5]
const result = number.forEach((item,index,array)=>{
   item * index
})
console.log(result) // [0, 2, 6, 12, 20]


//  1. Array.every()
//  全真为真  
//  示例用途：全选+单选逻辑
const number = [1, 2, 3, 4, 5]
const result = number.every((item,index,array)=>{
  return item > 0
})
console.log(result) // true

//  2. Array.some()
//  一真为真，与every()相反  
//  示例用途：用于检测数组中是否有满足条件的项
const number = [1, 2, 3, 4, 5]
const result = number.some((item,index,array)=>{
  return item > 2
})
console.log(result) // true

//  3. Array.filter()
//  数据筛选，返回 条件成立的项组成的数组
//  示例用途： 可以适用于 前端的搜索功能
const number = [1, 2, 3, 4, 5]
const result = number.filter((item,index,array)=>{
  return item > 2
})
console.log(result) // [3, 4, 5]


//  4. Array.map()
//  对数组中的每一项运行改定的函数，返回每次函数调用的结果组成的数组
//  示例用途：for循环遍历操作数组中的每一项。
const number = [1, 2, 3, 4, 5]
const result = number.map((item,index,array)=>{
  return item * index
})
console.log(result) // [0, 2, 6, 12, 20]


//  5. Array.forEach()
//  对数组中的每一项运行改定的函数，这个方法没有返回值
//  示例用途：for循环遍历操作数组中的每一项。
const number = [1, 2, 3, 4, 5]
const result = number.forEach((item,index,array)=>{
   item * index
})
console.log(result) // [0, 2, 6, 12, 20]
  1. 归并方法 reduce()
// 示例：实现数组元素累加求和
const number = [1, 2, 3, 4, 5]
const result = number.reduce((prev,next,index,array) => {
  return prev + next
})
console.log(result) // 15

// 示例：实现数组元素累加求和
const number = [1, 2, 3, 4, 5]
const result = number.reduce((prev,next,index,array) => {
  return prev + next
})
console.log(result) // 15
  • 回调函数的参数：
  • accumulate:  前一项，
  • currentValue: 后一项，
  • currentIndex:  项的索引(如果有初始值，从0开始，否则从1开始)
  • arry: 数组对象
  1. 语法: array.reduce(callBack(accumulate,currentValue,currentIndex,array),initialValue)
  2. 概念: 方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。

  4. initialValue: (可选参数)作为归并基础的初始值
  5. reduce() 可以作为一个高阶函数，用于函数的 compose。
  6. 注意: reduce() 对于空数组是不会执行回调函数的。

reduceRight() 方法的功能和 reduce() 功能是一样的， 不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

数组变异方法(含义：改变原数组本身，并且不需要重新赋值给原数组)

//  1.  默认排序顺序为按字母升序
  const array1 = [6, 8, 4, 3, 5, 7, 9, 11, 2]
  array1.sort()

  console.log(array1) // [11, 2, 3, 4, 5, 6, 7, 8, 9]

  //  2.  若要按照number形式进行排序，需要传一个函数作为参数
  const array1 = [6, 8, 4, 3, 5, 7, 9, 11, 2]
  array1.sort((a, b)=>{
    // return b - a  // 降序
    return a - b  // 升序
  })

  console.log(array1) // [2, 3, 4, 5, 6, 7, 8, 9, 11]

  //  3.  随机排序
  const array1 = [6, 8, 4, 3, 5, 7, 9, 11, 2]
  array1.sort((a, b)=>{
    return Math.random() > 0.5 ? -1 : 1
  })

  console.log(array1) // [4, 9, 8, 5, 6, 2, 7, 11, 3]

  //  1.  默认排序顺序为按字母升序
  const array1 = [6, 8, 4, 3, 5, 7, 9, 11, 2]
  array1.sort()

  console.log(array1) // [11, 2, 3, 4, 5, 6, 7, 8, 9]

  //  2.  若要按照number形式进行排序，需要传一个函数作为参数
  const array1 = [6, 8, 4, 3, 5, 7, 9, 11, 2]
  array1.sort((a, b)=>{
    // return b - a  // 降序
    return a - b  // 升序
  })

  console.log(array1) // [2, 3, 4, 5, 6, 7, 8, 9, 11]

  //  3.  随机排序
  const array1 = [6, 8, 4, 3, 5, 7, 9, 11, 2]
  array1.sort((a, b)=>{
    return Math.random() > 0.5 ? -1 : 1
  })

  console.log(array1) // [4, 9, 8, 5, 6, 2, 7, 11, 3]
const array = [1, 2, 3, 4, 5]
  console.log(array.join())     //  1,2,3,4,5
  console.log(array.join(""))   //  12345
  console.log(array.join("-"))  //  1-2-3-4-5

  const array = [1, 2, 3, 4, 5]
  console.log(array.join())     //  1,2,3,4,5
  console.log(array.join(""))   //  12345
  console.log(array.join("-"))  //  1-2-3-4-5
const array = [1, 2, 3, 4, 5]
  array.reverse()
  console.log(array)  //  [5, 4, 3, 2, 1]

  const array = [1, 2, 3, 4, 5]
  array.reverse()
  console.log(array)  //  [5, 4, 3, 2, 1]
// 1. 传一个参数时，从当前位置开始，一直删除到最后，返回被删除元素所组成的数组
  const array1 = [1, 2, 3, 4, 5]
  const result = array1.splice(1)
  console.log(result) // [2, 3, 4, 5]
  console.log(array1) // [1]

// 2. 传两个参数时，从下标为 1 位置开始删除，删除 2 个 返回被删除元素所组成的数组
  const array2 = [1, 2, 3, 4, 5]
  const result = array2.splice(1 , 2)
  console.log(result) // [2 ,3]
  console.log(array2) // [1 ,4, 5]

// 3. 传三个参数时，从下标为 1 位置开始删除，删除 2 个 
// ，用1替换被删除的元素 返回被删除元素所组成的数组
  const array3 = [1, 2, 3, 4, 5]
  const result = array3.splice(1 , 2 , 1)
  console.log(result) // [2 ,3]
  console.log(array3) // [1, 1, 1, 4, 5]

// 1. 传一个参数时，从当前位置开始，一直删除到最后，返回被删除元素所组成的数组
  const array1 = [1, 2, 3, 4, 5]
  const result = array1.splice(1)
  console.log(result) // [2, 3, 4, 5]
  console.log(array1) // [1]

// 2. 传两个参数时，从下标为 1 位置开始删除，删除 2 个 返回被删除元素所组成的数组
  const array2 = [1, 2, 3, 4, 5]
  const result = array2.splice(1 , 2)
  console.log(result) // [2 ,3]
  console.log(array2) // [1 ,4, 5]

// 3. 传三个参数时，从下标为 1 位置开始删除，删除 2 个 
// ，用1替换被删除的元素 返回被删除元素所组成的数组
  const array3 = [1, 2, 3, 4, 5]
  const result = array3.splice(1 , 2 , 1)
  console.log(result) // [2 ,3]
  console.log(array3) // [1, 1, 1, 4, 5]
  • array.splice(start,deleteCount,items)这个方法很 :ox: :beer: 能对数组进行增删改， 返回一个新的数组
  • array.reverse()   倒序操作
  • array.join()      将数组按照特定的连接方式转换为字符串
  • array.push()       在数组末尾添加一个或多个元素，返回数组的长度
  • array.pop()        删除数组末尾的一个元素，返回被删除的元素
  • array.unshift()    在数组头部添加一个或多个元素，返回数组的长度
  • array.shift()      删除数组头部的一个元素，返回被删除的元素
  • array.indexOf()    查找数组元素，找到返回下标，找不到返回 -1
  • array.sort()       数组排序

数组非变异方法 (含义：不改变原数组本身，需要重新赋值给原数组)

const arr1 = [1, 2, 3]
  const arr2 = [-1, -2, -3]
  const arr3 = [11, 22, 33]
  console.log(arr1.concat(arr2, arr3)) // [1, 2, 3, -1, -2, -3, 11, 22, 33]

  const arr1 = [1, 2, 3]
  const arr2 = [-1, -2, -3]
  const arr3 = [11, 22, 33]
  console.log(arr1.concat(arr2, arr3)) // [1, 2, 3, -1, -2, -3, 11, 22, 33]
const arr1 = [1, 2, 3, 4, 5, 6]

  //  传两个参数，包括开始，不包括结束
  const result = arr1.slice(0, 5)
  console.log(result) // [1, 2, 3, 4, 5,]

  //  传一个参数，slice(n)---> 从当前项到数组的最后一项截取
  const result = arr1.slice(1)
  console.log(result) // [2, 3, 4, 5, 6]

  //  参数为负数：表示 arr1.length + 负数
  //  或者理解为倒序截取
  const result = arr1.slice(-5, -2)
  console.log(result) //  [2, 3, 4,]

  // 原数组
  console.log(arr1)   //  [1, 2, 3, 4, 5, 6]

  const arr1 = [1, 2, 3, 4, 5, 6]

  //  传两个参数，包括开始，不包括结束
  const result = arr1.slice(0, 5)
  console.log(result) // [1, 2, 3, 4, 5,]

  //  传一个参数，slice(n)---> 从当前项到数组的最后一项截取
  const result = arr1.slice(1)
  console.log(result) // [2, 3, 4, 5, 6]

  //  参数为负数：表示 arr1.length + 负数
  //  或者理解为倒序截取
  const result = arr1.slice(-5, -2)
  console.log(result) //  [2, 3, 4,]

  // 原数组
  console.log(arr1)   //  [1, 2, 3, 4, 5, 6]
  • arr.slice(start, end)     数组截取
  • arr.concat(arr1, arr2)    组合数组

ES6

  1. Array.from()
//  概念： 将伪数组转成真正的数组，将伪数组对象或可遍历对象转换为真数组
    const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}
    const arr1 = Array.from(arrayLike)
    console.log(arr1)             //  ['a','b','c']

// 当然也可以用Es6之前的方法
    const arr2 = Array.protoype.slice.call(arrayLike)
    console.log(Array.from(arr2)) //  ['a','b','c']

//  概念： 将伪数组转成真正的数组，将伪数组对象或可遍历对象转换为真数组
    const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}
    const arr1 = Array.from(arrayLike)
    console.log(arr1)             //  ['a','b','c']

// 当然也可以用Es6之前的方法
    const arr2 = Array.protoype.slice.call(arrayLike)
    console.log(Array.from(arr2)) //  ['a','b','c']
  1. Array.of()
//  将一系列数据生成一个数组
    const arr1 =  new Array(3)
    console.log(arr1)   //  [empty × 3]

    const arr2 =  new Array(3,4)
    console.log(arr2)   //  [3,4]

    const arr3 =  Array.of(3)
    console.log(arr3)   //  [3]

//  将一系列数据生成一个数组
    const arr1 =  new Array(3)
    console.log(arr1)   //  [empty × 3]

    const arr2 =  new Array(3,4)
    console.log(arr2)   //  [3,4]

    const arr3 =  Array.of(3)
    console.log(arr3)   //  [3]
  1. Array.isArray(obj)
//  判断变量是否为数组
    console.log(Array.isArray([]))              //  true
    console.log(Array.isArray([1]))             //  true
    console.log(Array.isArray(new Array()))     //  true
    console.log(Array.isArray(Array.prototype)  //  true

//  判断变量是否为数组
    console.log(Array.isArray([]))              //  true
    console.log(Array.isArray([1]))             //  true
    console.log(Array.isArray(new Array()))     //  true
    console.log(Array.isArray(Array.prototype)  //  true
  1. 拓展运算：...
//  数组的展开操作
    const arr1 = [1,2,3]
    const arr2 = [...arr1]
    arr2.push(4)
    console.log(arr2)   //  [1,2,3,4]

//  函数定义的时候 等同于 argument的作用 ...变量名 得到真正的数组
    function foo(...arr) {
      console.log(...a)  //  数组的展开操作 11 22 33
      foo1.apply(null,a)
    }

    function foo1(a,b,c) {
      console.log(a,b,c) //   11 22 33
    }
    foo(11,22,33)

//  数组的展开操作
    const arr1 = [1,2,3]
    const arr2 = [...arr1]
    arr2.push(4)
    console.log(arr2)   //  [1,2,3,4]

//  函数定义的时候 等同于 argument的作用 ...变量名 得到真正的数组
    function foo(...arr) {
      console.log(...a)  //  数组的展开操作 11 22 33
      foo1.apply(null,a)
    }

    function foo1(a,b,c) {
      console.log(a,b,c) //   11 22 33
    }
    foo(11,22,33)
  1. Array.find((item,index,arry)=>{})
//  查找，第一个符合条件的数组成员，如果没有找到，返回undefined
    const arr  = [1,2,3,4,5,6]
    const arr1 = arr.find((item,index,arry)=>{
        // return item return  item > 1
    })//  console.log(arr1) // undefinedconsole.log(arr1) // 2
//  查找，第一个符合条件的数组成员，如果没有找到，返回undefined
    const arr  = [1,2,3,4,5,6]
    const arr1 = arr.find((item,index,arry)=>{
        // return item return  item > 1
    })//  console.log(arr1) // undefinedconsole.log(arr1) // 2
  1. Array.findIndex((item,index,arry)=>{})
//  查找，第一个符合条件的数组成员，返回其下标，没有找到则返回 -1 
    const arr  = [1,2,3,4,5,6]
    const arr1 = arr.findIndex((item,index,arry)=>{
        // return item return  item > 3
    })//  console.log(arr1) // -1console.log(arr1) // 4
//  查找，第一个符合条件的数组成员，返回其下标，没有找到则返回 -1 
    const arr  = [1,2,3,4,5,6]
    const arr1 = arr.findIndex((item,index,arry)=>{
        // return item return  item > 3
    })//  console.log(arr1) // -1console.log(arr1) // 4
  1. Array.includes(searchElement[,fromIndex = 0])
//  概念：找到返回true ， 找不到返回 false (可以和数组的filter方法搭配使用)
//  参数：(要找的元素[,开始查找的索引])
//  从该索引处开始查找 searchElement。 如果为负值。则按升序从
//  array.length + fromIndex 的索引开始搜索。默认为0

    const arr  = [1,2,3,4,5,6]

    const arr1 = arr.includes(3)
    console.log(arr1) //  true

    const arr2 = arr.includes(3,-1)
    // 从下标 6 - 1 = 5 开始查找3
    console.log(arr2) //  false

    const arr3 = arr.includes(3,-10)
    // 从下标 6 - 10 = -4 
    // 如果计算出的索引小于 0 ， 则整个数组都会被搜索
    console.log(arr3) //  true

//  概念：找到返回true ， 找不到返回 false (可以和数组的filter方法搭配使用)
//  参数：(要找的元素[,开始查找的索引])
//  从该索引处开始查找 searchElement。 如果为负值。则按升序从
//  array.length + fromIndex 的索引开始搜索。默认为0

    const arr  = [1,2,3,4,5,6]

    const arr1 = arr.includes(3)
    console.log(arr1) //  true

    const arr2 = arr.includes(3,-1)
    // 从下标 6 - 1 = 5 开始查找3
    console.log(arr2) //  false

    const arr3 = arr.includes(3,-10)
    // 从下标 6 - 10 = -4 
    // 如果计算出的索引小于 0 ， 则整个数组都会被搜索
    console.log(arr3) //  true