js中常用的数组方法总结

目录

forEach()

map()

join()

reverse()

sort()

slice()

splice()

push()

pop()

unshift()

indexOf()

lastIndexOf()

includes()

concat()

---

forEach()

forEach可以替代for循环进行数组的遍历。个人建议使用forEach替代for循环进行正序的数组遍历

let arr = [1,2,3,4,5]
for (let i = 0; i < arr.length; i++) {
  // arr[i] 是数组中的每一个值 i是下标
}

arr.forEach(function (item, index, arr) {
  // 这里的item index arr三个参数的名字可以随便改
  // item表示对应的值 index表示下标 arr表示遍历的数组本身
  // 一般这里的参数只需要写 item 最多再写index arr基本不用
})

相信看到这里都会有一个疑问？为什么我们声明的函数function (item, index, arr) {}我们没有调用也执行了？因为js的内部帮我们进行了调用了。不需要我们自己调用。下面是forEach的原理，因为涉及到了一些高级的用法，所以看看就行。

function forEach(arr, callbackfn) {
  for (let i = 0; i < arr.length; i++) {
    callbackfn(arr[i], i, arr)
  }
}

forEach([1,2,3,4,5], function (item, index, arr) {
  
})

map()

他和forEach类似，也会产生一个遍历，但是，他有自己固定的功能，在我们想要从一个数组中遍历出某些数据时使用

let arr = [
  {name: "张三", age: 18},
  {name: "李四", age: 20}
]

// 获取到对应的一个新的数组 ["张三", "李四"]
let names = arr.map(function (item) {
  return item.name
})

console.log(names) // ['张三', '李四']

map的语法和forEach一致。不一样的在于return，map在对应的函数中return会作为新数组中的值。

map的返回值是一个和原数组长度一致的数组，通过改变map内部的函数的返回值，可以得到不同的数组。

应用场景：在一个数组中，获取到我们想要的数据信息

const potatoes = [{weight: 400}, {weight: 300}, {weight: 599}]

// [400, 300, 599]
let weights = potatoes.map(function (potato) {
  return potato.weight
})


let arr = [{a: 1, b: 2, c: 3}, {a: 1, b: 2, c: 3}, {a: 1, b: 2, c: 3}, {a: 1, b: 2, c: 3}]

// 只要数组中的a和c属性 [{a: 1, c: 3}, {a: 1, c: 3}, {a: 1, c: 3}, {a: 1, c: 3}]
arr.map(function (item) {
  return {a: item.a, c: item.c}
})

join()

把数组按照规则转换为字符串，不会改变原数组，返回值是一个字符串

let arr = [1,2,3,4,5,6]
arr.join("字符串") // 1字符串2字符串3字符串4字符串5字符串6

arr.join("")表示直接讲数组中的值连接在一起变成字符串

arr.join()表示用,连接，和toString效果一致。

reverse()

反向，将数组直接变成一个倒序排列的数组

let arr = [1,2,3]

arr.reverse() // 返回值为倒序的数组 

console.log(arr) // 原数组也会变成倒序的数组

sort()

用于数组中的值的排序，升序或者降序。返回值是排序后的数组，原数组也会改变。

默认的排序规则按照对应的查词典的方式，首位先比较大小（按ASCII码进行比较）小的在前，大的在后，相同则比较下一位。依次类推。

// 对数字进行排序
let arr = [24235,5,264,3,532,56,4367,34,65324]

arr.sort(function (a, b) {
  return a - b // 升序排列
})

arr.sort(function (a, b) {
  return b - a // 降序排列
})

函数中，我们的核心代码，就是在判断a和b中的值谁大谁小的问题。

我们要判断谁大的问题

arr.sort(function (a, b) {
  if (a > b) {
    return 负数 // 如果是负数 b放前面 a放后面  如果是正数相反
  }

  if (a < b) {
    return 正数 // b放在前面 a在后面
  }
  
  if (a === b) {
    return 0 // 位置不动
  }
})

let stus = [
  {
    name: "张三",
    age: 18,
    sex: "男"
  }, {
    name: "李四",
    age: 20,
    sex: "男"
  }, {
    name: "王五",
    age: 18,
    sex: "女"
  }, {
    name: "小花",
    age: 19,
    sex: "女"
  }
]

// 请对学生进行排序，按照年龄从小到大进行排列
stus.sort(function (a, b) {
  return a.age - b.age
})

slice()

用来裁切数组，我们如果想要获取到数组中某一部分的数组片段，可以使用slice方法

[1,2,3,4,5,6,7,8]想要得到[4,5,6]

slice不会改变原数组，slice返回值为裁切下来的数组片段

let arr = [1,2,3,4,5,6,7]
arr.slice(2, 3) // [3]
arr.slice(2) // [3, 4, 5, 6, 7]
arr.slice(-3) // -1指最后一位，-3指倒数第三位 [5, 6, 7]

splice()

会改变原数组，将原数组中的值进行修改，有三个功能：插入，删除，修改

删除   使用两个参数即可，得到的返回值，是删除的值组成的数组

let arr = [1,2,3,4]
arr.splice(下标, 数量) 

添加   需要使用三个参数，第一个参数为下标，表示插入到这个下标的前面，第二个参数为固定的0，后面的参数为要插入的值。

let arr = [1,2,3,4]

arr.splice(下标, 0, 插入的值1, 插入的值2, 插入的值n) // [] 返回值为空，因为没有删除
console.log(arr) // arr改变了

修改   所谓修改就是删除原本的值，然后再添加的新的值

let arr = [1,2,3,4]
// arr.splice(1, 1, 5)
arr.splice(1, 2, 5)

push()

向数据的末尾插入新的值

let arr = []
arr.push(值) 
// 数组就会变成 [值]

// 也可以同时插入多个值
arr.push(值1, 值2, 值3, 值n)

let arr = [8， 9， 7]
let length = arr.push(5) // 一般不会没事获取到它的返回值
console.log(length) // 4 

pop()

删除数组的末尾最后一个值

let arr = [1, 2, 3]
arr.pop()
console.log(arr) // [1, 2]

pop有返回值，是被删除的那个值

let arr = [1, 2, 3]
let item = arr.pop() // 3

unshift()

在数组的首位添加一个值

let arr = []
arr.unshift(值)
arr.unshift(值1, 值2, 值3, 值n)

他的返回值是被删除的值

indexOf()

根据目标值查找数组中对应的值的下标。如果有返回下标，如果没有返回-1

let arr = [1, 2, 3, 4, 5, 3, 3]

console.log(arr.indexOf(3)) // 2 找到第一个出现的3 就结束
console.log(arr.indexOf(3, 4) // 5 跳1 2 3 4 的遍历直接从下标为4的元素开始

lastIndexOf()

和indexOf功能相同，找到最后一个出现的目标值的下标

let arr = [1, 2, 3, 4, 5, 6, 5]
console.log(arr.lastIndexOf(5)) // 6
console.log(arr.lastIndexOf(5, 5) // 4

和indexOf的方向刚好相反，所以第二个参数写好之后，表示向前查找

includes()

ES6中新增的方法，兼容性差，IE浏览器不支持，用来判断数组中是否存在某个值，返回结果为布尔值

let arr = [1,2,3,4,5]

console.log(arr.includes(3)) // true
console.log(arr.includes(6)) // false

该属性也支持第二个参数，和indexOf的第二个参数一样

let arr = [1,2,3,4,5]
console.log(arr.includs(2, 3)) // false 从下标为3的元素开始往后找。没有2，所以为false

concat()

想要把两个数组拼接成一个数组时，可以使用concat,它的返回值是拼接后的数组，原数组不变

let arr = [1,2,3]
arr.concat([4,5,6]) // 这个操作的返回值就是拼接后的数组 [1,2,3,4,5,6]
console.log(arr) // [1,2,3] 不变

arr.concat([4,5,6], [7, 8, 9], 10) // 这个操作的返回值就是拼接后的数组 [1,2,3,4,5,6,7,8,9,10] 里边的值可以直接是数字

      看到最后有收获就点个赞吧