JS 之数组常用操作集锦

【基础Api】

let arr = []

// push 加入数组尾部 
arr.push('a')

// pop 从数组尾部删除
arr.pop()

// unshift 追加到数组头部
arr.unshift('b')

// shift 从数组头部移除
arr.shift()

【字符串拆分数组】

let tmp = 'a,b,c,d'.split(',')
console.log(tmp)
// 运行结果 ["a","b","c","d"]

【数组转字符串】

let str = ['a','b','c'].join('-')
console.log(str)
// 运行结果"a-b-c"

【数组合并】

// 1.0
let arr1 = ['a','b']
let arr2 = ['c','d']
let arr3 = [...arr1, ...arr2]

// 2.0
let arr1 = ['a','b']
let arr2 = ['c','d']
arr1.push(...arr2)

// 3.0
let arr1 = ['a','b']
let arr2 = ['c','d']
arr1 = arr1.concat(arr2)

【数组查找】

// indexOf 从左侧开始查找'c' 返回元素下标
let arr = ['a','b','c','d','e']
console.log(arr.indexOf('c'))
// 运行结果  2

// includes 查找数组中是否包含元素 返回true || false
let arr = ['a','b','c','d','e']
console.log(arr.includes('c'))
// 运行结果 true

// find 查找对象
let arr = [{name:'小白',age:18},{name:'小黑',age:20}]
let res = arr.find((item)=>{
    return item.name === '小白'
})
console.log(res)
// 运行结果 { name: "小白", age: 18 }

// findIndex 返回元素下标
let arr = [{name:'小白',age:18},{name:'小黑',age:20}]
let res = arr.findIndex((item)=>{
    return item.name === '小白'
})
console.log(res)
// 运行结果 0

// 遍历对象数组拼接返回想要的元素
let arr = [{name:'小白',age:18},{name:'小黑',age:20}]
let res = arr.map((v) => v.name)
// 运行结果 ["小白", "小黑"]
console.log(res)

【数组循环】

• Of 返回值

  let arr = ['a','b','c']
  // of 返回值 底层是用迭代器 iterator
  for(let v of arr){
      console.log(v)
  }
  // 运行结果  
  > "a"  
  > "b"  
  > "c"
  

• in返回索引

  let arr = ['a','b','c']
  for(let v in arr){
      console.log(v)
  }
  // 运行结果 
  > "0"  
  > "1"  
  > "2"
  

• forEach item返回元素 index 返回下标

  let arr = ['a','b','c']
  arr.forEach((item,index) => {
      console.log(index,item)
  })
  // 运行结果 
  > 0 "a"
  > 1 "b"
  > 2 "c"
  

  map() => 返回一个新的数组

  let arr = [1, 2, 3];
  let newArr = arr.map((item, index, arr) => {
      return item * 2;
  })
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 4, 6]
  

  Filter() => 可以过滤数组，包含满足条件的数组项，返回一个新数组

  let arr = [1, 2, 3];
  let newArr = arr.filter((item, index, arr) => {
      return item <= 2;
  })
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [1, 2]
  

  Some() => 返回布尔值，如果所有数组项都满足条件则返回true

  let arr = [1, 2, 3];
  let result = arr.every((item, index, arr) => {
      return item < 2;
  })
  console.log(result) // false
  

  Every() => 返回布尔值，如果所有数组项都满足条件则返回true

  let arr = [1, 2, 3];
  let result = arr.every((item, index, arr) => {
      return item < 2;
  })
  console.log(result) // false