其乐的博客

常用的JS数组对象API

2019/12/27 javascript

Js基础知识...

# 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

  1. 归并方法 reduce()

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

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

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

    • array.push() 在数组末尾添加一个或多个元素，返回数组的长度
    • array.pop() 删除数组末尾的一个元素，返回被删除的元素
    • array.unshift() 在数组头部添加一个或多个元素，返回数组的长度
    • array.shift() 删除数组头部的一个元素，返回被删除的元素
    • array.indexOf() 查找数组元素，找到返回下标，找不到返回 -1
    • array.sort() 数组排序
      //  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
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    • array.join() 将数组按照特定的连接方式转换为字符串
      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
    1
    2
    3
    4
    • array.reverse() 倒序操作
      const array = [1, 2, 3, 4, 5]
  array.reverse()
  console.log(array)  //  [5, 4, 3, 2, 1]
    1
    2
    3
    • array.splice(start,deleteCount,items)
      这个方法很 🐂 🍺 能对数组进行增删改， 返回一个新的数组
    // 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
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

  4. 数组非变异方法 （含义：不改变原数组本身，需要重新赋值给原数组）

    • arr.concat(arr1, arr2) 组合数组
      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]
    1
    2
    3
    4
    • arr.slice(start, end) 数组截取
      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]
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

# 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']
    1
    2
    3
    4
    5
    6
    7
    8

  2. 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]
    1
    2
    3
    4
    5
    6
    7
    8
    9

  3. 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
    1
    2
    3
    4
    5

  4. 拓展运算：...

    //  数组的展开操作
    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
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

  5. Array.find((item,index,arry)=>{})

    //  查找，第一个符合条件的数组成员，如果没有找到，返回undefined
    const arr  = [1,2,3,4,5,6]
    const arr1 = arr.find((item,index,arry)=>{
        // return item < 0
        return  item > 1
    })

    //  console.log(arr1) // undefined
        console.log(arr1) // 2
    1
    2
    3
    4
    5
    6
    7
    8
    9

  6. Array.findIndex((item,index,arry)=>{})

    //  查找，第一个符合条件的数组成员，返回其下标，没有找到则返回 -1 
    const arr  = [1,2,3,4,5,6]
    const arr1 = arr.findIndex((item,index,arry)=>{
        // return item < 0
        return  item > 3
    })

    //  console.log(arr1) // -1
        console.log(arr1) // 4
    1
    2
    3
    4
    5
    6
    7
    8
    9

  7. 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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
Last Updated: 2022/9/6 上午8:44:27

JS函数的四种调用方式