JS 之数组常用操作集锦

178 阅读2分钟

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