js 数组的常用方法

目录

数组关注是否改变原数组

操作

  会影响原数组

push()

unshift()

splice()

不会影响

concat()

会影响原数组

pop()

shift()

splice()

不会影响

slice()

splice()

indexOf()

includes()

find()

排序

reserve()

sort()

转换

join()

迭代方法

some()

every()

forEach()

filter()

map()


数组关注是否改变原数组

操作

  会影响原数组

  • push()

    • 接收任意数量的参数,将他们添加到数组末尾,放回数组最新长度
  • unshift()

    • 在数组头部添加任意多个值,返回新的数组长度
    • let arr = ['a', 'b', 'c']
      let len = arr.unshift(1, 0)
      console.log(arr) // ['1', '0', 'a', 'b', 'c']
      console.log(len) // 5
  • splice()

    • 传入三个参数,分别是开始位置,0(要删除的元素数量)、插入的元素,返回空数组
    • let arr = ['a', 'b', 'c']
      let add = arr.splice(1, 0, 'a', 'b')
      console.log(arr) // ['a', 'a', 'b', 'b', 'c']
      console.log(add) // []

不会影响

  • concat()

    • 创建一个当前数组的副本,再把它的参数添加到副本末尾,返回这个新构建的数组,不会影响原始数组
    • let arr = ['a', 'b', 'c']
      let add = arr.concat('e', ['f', 'g'])
      console.log(add) // ['a', 'b', 'c', 'e', 'f', 'g']
      console.log(arr) // ['a', 'b', 'c']

会影响原数组

  • pop()
    • 删除数组的最后一项,减少数组的length值,返回被删除的项
  • shift()
    • 用于删除数组的第一项,减少数组的length值,返回被删除项
  • splice()
    • 传入两个参数,开始位置及删除数量,返回包含删除元素
    • let letters = ['a', 'b', 'c', 'd', 'e']
      let letters1 = letters.splice(1,2) 
      console.log(letters) // ['a', 'd', 'e']
      console.log(letters1) //['b', 'c']

不会影响

  • slice()
    • 用于创建一个包含原有数组一个或者多个元素的新数组,不会改变原始数组
    • let letters = ['a', 'b', 'c', 'd', 'e']
      let letters1 = nums.slice(1) //['b', 'c', 'd', 'e']
      let letters2 = nms.slice(1,3) //['b', 'c']

splice()

  • 会修改原数组的内容
  • 传入三个参数,分别是开始位置,要删除的数量,要插入的任意多个元素,返回被删除元素的数组,对原数组产生影响
  • let arr = ['a', 'b', 'c']
    let remove = arr.splice(1,1, 'd', 'f')
    console.log(arr) // ['a', 'd', 'f', 'c']
    console.log(remove) // 'b'

查找元素返回元素坐标或者元素值

  • indexOf()

    • 查找元素在数组中的位置,没找到返回-1
    • let arr = [1,2,3]
      arr.indexOf(2) == 1
  • includes()

    • 查找的元素在数组中的位置,找到true,没找到false
    • let arr = ['xx', 'banana', 'hah']
      arr.includes('mm') //false
  • find()

    • 返回第一个匹配的元素
    • let stus =[
          {
              name: 'xx',
              age: '20'
          },{
              name: 'xx1',
              age: '18'
          },{
              name: 'xx2',
              age: '15'
          }
      ]
      stus.find((currentValue, index, arr) => {
          return currentValue.age > 18
      }) //{name: 'xx', age: '20'}

排序

reserve()

  • 改变原数组
  • 将数组反转
  • let arr = [1, 2, 3]
    let result = arr.reserve()
    console.log(result) // [3, 2, 1]

sort()

  • 改变原数组
  • 接受一个比较函数,用于判断哪个值排在前面
  • function compare(a, b) {
    	return b - a
    }
    let arr = [1, 2, 3]
    arr.sort(compare)

转换

join()

  • 接收一个参数(字符串分隔符),返回包含所有项的字符串
  • let arr = [1, 2, 3]
    let result = arr.join('.')
    console.log(result) //1.2.3

迭代方法

some()

  • 对数组的每一项都运行传入的函数,至少有一个元素返回true,这个方法就返回true
  • let arr = [1, 2, 3]
    let result = arr.reserve()
    console.log(result) // [3, 2, 1]

every()

  • 对数组的每一项都运行传入的函数,所有元素返回true,这个方法就返回true
  • let arr = [1, 2, 3]
    let result = arr.every((item, index, array) => {
        return item > 2
    })
    console.log(result) //false

forEach()

  • 对数组中的每一项都运行传入的函数,没有返回值

filter()

  • 对数组中的每一项都运行函数,返回为true会组成数组
  • let arr = [1, 2, 3]
    let result = arr.filter((item, index, array) => {
        return item > 1
    })
    console.log(result) // [2, 3]

map()

  • 对数组中每一项都运行函数,返回由每次函数调用的结果组成新数组
  • let arr = [1, 2, 3]
    let result = arr.map((item, index, array) => {
        return item*2
    })
    console.log(result) // [2, 4, 6]

相关推荐

  1. js 方法

    2024-04-23 23:48:03       29 阅读
  2. 方法

    2024-04-23 23:48:03       33 阅读
  3. 5、js关于方法(19种)

    2024-04-23 23:48:03       33 阅读
  4. js方法

    2024-04-23 23:48:03       33 阅读
  5. js关于方法

    2024-04-23 23:48:03       44 阅读
  6. 对象转,数组转对象方法

    2024-04-23 23:48:03       42 阅读
  7. js str字符串方法

    2024-04-23 23:48:03       51 阅读
  8. js对象转换为两种方法

    2024-04-23 23:48:03       58 阅读
  9. 【前端】处理函数

    2024-04-23 23:48:03       36 阅读
  10. jsDate对象方法总结

    2024-04-23 23:48:03       57 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-23 23:48:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-23 23:48:03       101 阅读
  3. 在Django里面运行非项目文件

    2024-04-23 23:48:03       82 阅读
  4. Python语言-面向对象

    2024-04-23 23:48:03       91 阅读

热门阅读

  1. 第二十七章:mybatis plus 如何自定义 SQL 查询条件

    2024-04-23 23:48:03       36 阅读
  2. arduino rc522

    2024-04-23 23:48:03       33 阅读
  3. Binlog、Redo 和 Undo 的概念与区别

    2024-04-23 23:48:03       36 阅读
  4. 详解Qt中的时间——QDateTime、QDate、QTime、QTimeZone

    2024-04-23 23:48:03       33 阅读
  5. Swift中的WebView

    2024-04-23 23:48:03       33 阅读
  6. AcWing 802. 区间和——算法基础课题解

    2024-04-23 23:48:03       38 阅读
  7. html实现点击按钮时下方展开一句话

    2024-04-23 23:48:03       31 阅读
  8. C++11中的智能指针

    2024-04-23 23:48:03       25 阅读
  9. Python小程序 - 文件类型统计

    2024-04-23 23:48:03       35 阅读