Js数组经常用到的一些方法

最新推荐文章于 2025-04-27 11:34:34 发布

原创最新推荐文章于 2025-04-27 11:34:34 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

3 篇文章

订阅专栏

本文深入讲解JavaScript中常用的数组操作方法，包括元素的增删改查、遍历、筛选及拼接等功能，通过实例演示每种方法的具体应用，帮助开发者提高编程效率。

数组的方法异常之多，现在罗列的是我项目中经常用到的方法

1、unshift 将指定元素插入数组的第一个位置

let arr = [22, 33, 44]
arr.unshift(11)
console.log(arr) // [11, 22, 33, 44]

2、shift 删除数组的第一个元素

let arr = [11, 22, 33, 44]
arr.shift()
console.log(arr) // [22, 33, 44]

3、push 将指定元素添加到数组的最后一个位置

let arr = [11, 22, 33, 44]
arr.push(55)
console.log(arr) // [11, 22, 33, 44, 55]

4、pop 删除数组的最后一个元素

let arr = [11, 22, 33, 44]
arr.pop()
console.log(arr) // [11, 22, 33]

5、join 将数组以指定符号拼接成字符串

let arr = [11, 22, 33]
let str1 = arr.join('-')
let str2 = arr.join('')
let str3 = arr.join('+')
console.log(str1)  // 11-22-33
console.log(str2)  // 112233
console.log(str3)  // 11+22+33

6、indexOf 判断数组中是否存在指定的元素

let arr = [11, 22, 33]
let index1 = arr.indexOf(22)
let index2 = arr.indexOf(55)
console.log(index1) // 若存在，返回指定元素所在下标
console.log(index2) // 若不存在， 返回-1

7、concat 将两个数组拼接合并成一个数组

let arr1 = [11, 22, 33]
let arr2 = [44, 55, 66]
let arr3 = arr1.concat(arr2)
console.log(arr3)  // [ 11, 22, 33, 44, 55, 66 ]

8、slice 可用于截取指定范围的数据

let arr = [11, 22, 33, 44, 55, 66]
// 第一个参数：要开始截取的元素下标  第二个参数： 要截取的位数
let arr1 = arr.slice(0, 2)
console.log(arr1)  // [11, 22]

// 只有一个参数时，表示从要开始截取的元素开始，一直截取到最后一个元素
let arr2 = arr.slice(3)
console.log(arr2) // [ 44, 55, 66 ]

// 当参数是负数时，会自动转成正数截取
let arr3 = arr.slice(-3, -1)
console.log(arr3) // [44, 55]

9、foreach 遍历数组，我一般都是把数据处理下push到其他数组中

let arr = [11, 22, 33, 44]
arr.forEach((e, index, arr) => {
  console.log(e)  // 每次遍历对应的元素
  console.log(index)  // 对应元素的下标
  console.log(arr)  // 原数组
})

10、map 遍历数组，可以处理每个元素并返回新的值（比foreach好用）

// 数组对象
let arr = [
  {name: 'lily', age: '18'},
  {name: 'jack', age: '20'},
  {name: 'lucy', age: '28'},
  {name: 'rose', age: '32'},
]

// 可以处理每一项元素的数据，返回自己想要的结构
let newArr = arr.map(item => {
  return {
    realName: item.name + '000'
  }
})
console.log(newArr)
// [
//   { realName: 'lily000' },
//   { realName: 'jack000' },
//   { realName: 'lucy000' },
//   { realName: 'rose000' }
// ]

// 数组
let arr = [11, 22, 33, 44, 55]
let arr2 = arr.map(e => {
  return e + 10
})
console.log(arr2) // [ 21, 32, 43, 54, 65 ]

11、filter 可以当作过滤器使用

let arr = [
  {name: 'lily', age: '18'},
  {name: 'jack', age: '20'},
  {name: 'lucy', age: '28'},
  {name: 'rose', age: '32'},
]

let newArr = arr.filter((item, index) => {
  console.log(item)  // 每一项元素
  console.log(index) // 对应元素下标
  return parseInt(item.age) > 18  // 返回符合条件的数据
})
console.log(newArr)
// [
//   { name: 'jack', age: '20' },
//   { name: 'lucy', age: '28' },
//   { name: 'rose', age: '32' }
// ]

12、 splice 删除指定下标的元素

// 该方法会改变原数组
let arr = [1, 2, 3, 4, 5]
arr.splice(1,1) // 下标1 开始 删除1个元素
arr.splice(2,1) // 下标2 开始 删除1个元素
arr.splice(1,2) // 下标1 开始 删除2个元素

还有some、every等一些方法，但我基本上没用过，上面差不多能满足我的需求了

至于一些比较复杂的数据逻辑要处理的，推荐大家可以去看看lodash.js，封装了系列的方法，简直很棒