JS:数组常用api

push

 // push 末尾新增
    const arr = [1, 2, 3, 4, 5]
    arr.push(6)
    console.log(arr, 'push末尾新增') // 1,2,3,4,5,6

pop

 // pop 末尾删除
    const arr = [1, 2, 3, 4, 5]
    arr.pop()
    console.log(arr, 'pop末尾删除')// 1,2,3,4

 

unshift

 // unshift 头部新增
    const arr = [1, 2, 3, 4, 5]
    arr.unshift(0)
    console.log(arr, 'unshift头部新增')// 0,1,2,3,4,5

shift

// shift 头部删除
    const arr = [1, 2, 3, 4, 5]
    arr.shift()
    console.log(arr, 'shift头部删除')// 2,3,4,5

reverse

 // reverse 翻转
    const arr4 = [1, 2, 3, 4, 5]
    arr4.reverse()
    console.log(arr4, 'reverse翻转')// 5,4,3,2,1

join

 // join 分隔符,将数组转为字符串  不能直接对原数组修改
    const arr = [1, 2, 3, 4, 5]
    const result = arr.join('')
    console.log(result, 'join转为字符串') //  12345

slice

 // slice 截取  不能直接对原数组修改
    const arr = [1, 2, 3, 4, 5]
    const res = arr.slice(1, 4)
    const res1 = arr.slice(1)
    const res2 = arr.slice(3)
    console.log(res, 'slice截取1-4')// 2,3,4
    console.log(res1, 'slice截取1')// 2,3,4,5
    console.log(res2, 'slice截取3')// 4,5

concat

  // concat 合并 不能直接对原数组修改
    const arr = [1, 2, 3, 4, 5]
    const arr1 = [6, 7, 8, 9]
    const res = arr.concat(arr1)
    console.log(res, 'concat合并')// 1,2,3,4,5,6,7,8,9

sort

 // sort 排序
    const arr = [2, 5, 6456, 1, 54, 765, 9, 4]
    const arr1 = [2, 5, 6456, 1, 54, 765, 9, 4]
    arr.sort()
    console.log(arr, 'sort根据ASCII码排序')// 1, 2, 4, 5, 54, 6456, 765, 9

    const res = arr.sort(function (a, b) {
      return a - b
    })

    const res1 = arr1.sort(function (a, b) {
      return b - a
    })
    console.log(res, 'sort根据数字大小升序')// 1, 2, 4, 5, 9, 54, 765, 6456
    console.log(res1, 'sort根据数字大小降序')// 6456, 765, 54, 9, 5, 4, 2, 1

splice

 // splice 删除,插入,替换
    const arr = [1, 2, 3, 4, 5]
    const res = arr.splice(2)
    console.log(arr, 'splice(2)原数组')// 1,2
    console.log(res, 'splice(2)返回数组')// 3, 4, 5

    const arr1 = [1, 2, 3, 4, 5]
    const res1 = arr1.splice(1, 3)
    console.log(arr1, 'splice(1,3)原数组')// 1,5
    console.log(res1, 'splice(1,3)返回数组')// 2,3,4

toString

 // toString 转为字符串 不能直接对原数组修改
    const arr = [1, 2, 3, 4, 5]
    const res = arr.toString()
    console.log(res, 'toString转为字符串')// 1,2,3,4,5(字符串型)

indexOf

 // indexOf 查询索引 不能直接对原数组修改
    const arr = [23, 334, 25, 6, 5]
    const res = arr.indexOf(25)
    const res1 = arr.indexOf(3)
    console.log(res, 'indexOf索引目标')// 2表示在数组里索引为2找到了25
    console.log(res1, 'indexOf没有索引目标-1')// -1表示在数组里没找到3

foreach

 // forEach 遍历 直接对原数组修改
    const arr = [1, 2, 3, 4, 5]
    arr.forEach(item => {
      item += 1
      console.log(item)// 2,3,4,5,6 返回本身
    })

map

  // map 遍历 不能直接对原数组修改
    const arr = [1, 2, 3, 4, 5]
    const res = arr.map(item => {
      return item + 1
    })
    console.log(res, 'map返回新数组')// 2,3,4,5,6

filter

// filter 过滤 不能直接对原数组修改 返回过滤数组
    const arr = [1, 2, 3, 4, 5]
    // 写法一
    const res = arr.filter(item => {
      return item > 4
    })
    console.log(res, 'filter过滤新数组')// 5

    // 写法二
    const res1 = arr.filter(item => item > 3)
    console.log(res1, 'filter过滤新数组')// 4,5

reduce

  // reduce 归并 不能直接对原数组修改
    const arr = [1, 2, 3, 4, 5]
    const res = arr.reduce((total, value, index, arr) => {
      return arr[2] + arr[3]
    })
    console.log(res, 'reduce累加器')// 7


上一篇文章, 

vue3+elementPlus:el-dialog弹窗内容在其内部滚动,自己位置不随内容改变_意初的博客-CSDN博客vue3+elementPlus:el-dialog弹窗内容在其内部滚动,自己位置不随内容改变https://blog.csdn.net/weixin_43928112/article/details/129301722

猜你喜欢

转载自blog.csdn.net/weixin_43928112/article/details/129936267