JavaScript数组操作方法详解-优快云博客

let foods = ['英雄联盟', '毒奶粉', 'qq飞车'];

console.log(foods.join());
// 输出: "英雄联盟,毒奶粉,qq飞车"

console.log(foods.join(''));
// 输出: "英雄联盟毒奶粉qq飞车"

console.log(foods.join('-'));
// 输出: "英雄联盟-毒奶粉-qq飞车"

push()

把一个或多个元素添加到数组的末尾，并返回新的数组长度

let foods = ['英雄联盟', '毒奶粉']
let length = foods.push('qq飞车')
console.log(length)
// 输出:3
console.log(foods)
// 输出: ["英雄联盟", "毒奶粉", "qq飞车"]
foods.push('CSGO', 'CS起源', '原神')
console.log(foods)
// 输出: ["英雄联盟", "毒奶粉", "qq飞车", "CSGO", "CS起源", "原神"]

pop()

从数组中删除最后一个元素，并返回该元素的值。注意：数组的长度会发生改变

let foods = ['英雄联盟', '毒奶粉']
let food = foods.pop()
console.log(food)
// 输出: 毒奶粉
console.log(foods)
// 输出: ['英雄联盟']

shift()

从数组中删除第一个元素，并返回该元素的值。注意：数组的长度会发生改变

let foods = ['英雄联盟', '毒奶粉']
let food = foods.shift()
console.log(food)
// 输出: 英雄联盟
console.log(foods)
// 输出: ['毒奶粉']

unshift()

将一个或者多个元素添加到数组的开头，并返回数组的新长度

let foods = ['英雄联盟', '毒奶粉']
let length = foods.unshift('qq飞车')
console.log(length)
// 输出: 3
console.log(foods)
// 输出: ["qq飞车", "英雄联盟", "毒奶粉"]
foods.unshift('CSGO', 'CS起源')
console.log(foods)
// 输出: ["CSGO", "CS起源", "qq飞车", "英雄联盟", "毒奶粉"]

sort()

对数组的元素进行排序，并返回数组。默认比较的数组元素转为字符串的utf-16的顺序，也可以传入函数进行排序

  let numArr = [6, 2, 7, 1, 4, 9]
  console.log(numArr.sort())
  // 输出: [1,2,4,6,7,9]
  let letterArr = ['e', 'c', 'z', 'd', 'f']
  console.log(letterArr.sort())
  // 输出 ['c','d','e','f','z']
  let personArr = [
    { name: 'jack', age: 25 },
    { name: 'rose', age: 13 },
    { name: 'lucy', age: 20 }
  ]
  console.log(
    // a 和 b 就是数组中比较的元素
    personArr.sort((a, b) => {
      // 返回的 小于 0 和等于0 a继续在b之前
      // 返回的 大于 0 a 和 b 的位置会调换
      return a.age - b.age
    })
  )
  // 按照 年龄 进行升序排列,如果希望倒序，可以调换位置

reverse()

将数组进行翻转，并返回该数组。注意：改变的是原始数组

let foods = ['英雄联盟', '毒奶粉']
foods.reverse()
console.log(foods)
// 输出: ['毒奶粉','英雄联盟']

concat()

用来合并两个或者多个数组，返回的是新数组，不会改变原始数组

let foods = ['英雄联盟', '毒奶粉']
let fruits = ['qq飞车', 'CSGO']
console.log(foods.concat(fruits))
// 输出:  ["英雄联盟", "毒奶粉", "qq飞车", "CSGO"]
let meats = ['CS起源', '原神']
console.log(foods.concat(fruits, meats))
// 输出: ["英雄联盟", "毒奶粉", "qq飞车", "CSGO", "CS起源", "原神"]

slice()

返回一个新的数组对象，值是有传入的起始索引和结束索引决定的

 let foods = ['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO']
  console.log(foods.slice(3))
  // 输出: ["CSGO"]
  console.log(foods.slice(1,3))
  // 输出:  ["毒奶粉", "qq飞车"]

splice()

根据给定的起始索引和结束索引删除指定个元素，会改变原数组

  let foods = ['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO']
  // 从索引1开始删除1个元素
  foods.splice(1,1)
  console.log(foods)
  // 输出:  ["英雄联盟", "qq飞车", "CSGO"]
  // 从索引2开始删除，删除所有
  foods.splice(2)
  console.log(foods)
  // 输出: ["英雄联盟", "qq飞车"]

indexOf()

返回在数组中可以找到的符合条件的第一个索引值，如果不存在，返回-1

let foods = ['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO']
console.log(foods.indexOf('英雄联盟'))
// 输出: 0
console.log(foods.indexOf('CS起源'))
// 输出: -1

lastIndexOf()

从后往前查找符合条件的元素，符合返回索引，如果不存在，返回-1

let foods = ['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO']
console.log(foods.lastIndexOf('毒奶粉'))
// 输出: 1
console.log(foods.lastIndexOf('CS起源'))
// 输出: -1

forEach()

将数组的每一个元素，挨个的传递给传入的回调函数

回调函数会接收三个参数，分别为

element 当前元素。
index 当前元素的索引。
array 调用findIndex的数组。

let foods =['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO']
foods.forEach(v=>{
console.log(v)
})
// 依次输出: 英雄联盟 毒奶粉 qq飞车 CSGO

map()

返回一个新的数组，新数组的元素，是数组中每个元素调用一个提供的函数后返回的结果

回调函数会接收三个参数，分别为

element 当前元素。
index 当前元素的索引。
array 调用findIndex的数组。

let foods = ['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO']
let newFoods = foods.map(v => {
return v + '上号'
})
console.log(foods)
// 输出: ['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO']
console.log(newFoods)
// 输出: ['英雄联盟上号', '毒奶粉上号', 'qq飞车上号', 'CSGO上号']

filter()

返回一个新的数组，新数组的元素是数组中每个元素调用一个提供的函数，根据返回值的真假决定是否保留

回调函数会接收三个参数，分别为

element 当前元素。
index 当前元素的索引。
array 调用findIndex的数组。

  let foods = ['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO', 'CS起源']
  console.log(
    foods.filter(v => {
      return v.indexOf('CS') == 0
    })
  )
  // 输出: ['CSGO', 'CS起源']

every()

检验数组中的每个值是否都满足回调函数的校验，都满足结果为true，反之为false

回调函数会接收三个参数，分别为

element 当前元素。
index 当前元素的索引。
array 调用findIndex的数组。

let numArr = [2, 5, 6, 7, 8, 9]
  console.log(
    numArr.every(v => {
      return v > 2
    })
  )
  // 输出: false
  console.log(
    numArr.every(v => {
      return v >= 2
    })
  )
  // 输出: true

some()

和every类似，只需要有任意一个元素满足回调函数的校验条件结果就是true，都不满足就是false

回调函数会接收三个参数，分别为

element 当前元素。
index 当前元素的索引。
array 调用findIndex的数组。

let numArr = [2, 5, 6, 7, 8, 9]
  console.log(
    numArr.some(v => {
      return v == 1
    })
  )
  // 输出: false
  console.log(
    numArr.some(v => {
      return v == 2
    })
  )
  // 输出: true

find()

返回满足提供的回调函数校验的第一个元素的值，如果都不满足，返回undefined

回调函数会接收三个参数，分别为

element 当前元素。
index 当前元素的索引。
array 调用findIndex的数组。

let foods = ['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO']
console.log(
  foods.find(v => {
    return v.indexOf('英雄') != -1
  })
)
// 输出: 英雄联盟
console.log(
  foods.find(v => {
    return v.indexOf('穿越火线') != -1
  })
)
// 输出: undefined

findIndex()

返回数组中满足提供的回调函数校验的第一个元素的索引，否则返回-1

回调函数会接收三个参数，分别为

element 当前元素。
index 当前元素的索引。
array 调用findIndex的数组。

let foods = [
  { name: '英雄联盟', color: '灰' },
  { name: '毒奶粉', color: '黑' },
  { name: 'CSGO', color: '金' }
]
console.log(
  foods.findIndex(v => {
     return v.color == '灰'
   })
 )
 // 输出: 0
 console.log(
   foods.findIndex(v => {
     return v.color == '黄'
   })
 )
 // 输出: -1

includes()

返回数组中是否存在指定的值，如果存在返回true，否则返回false

let foods = ['英雄联盟', '毒奶粉', 'qq飞车', 'CSGO']
console.log(foods.includes('毒奶粉'))
// 输出: true
console.log(foods.includes('穿越火线'))
// 输出: false

js数组的常用方法整理

join()

push()

pop()

shift()

unshift()

sort()

reverse()

concat()

slice()

splice()

indexOf()

lastIndexOf()

forEach()

map()

filter()

every()

some()

find()

findIndex()

includes()