JS数组常用操作(包含ES6语法)

基础Api

let arr = []

// push 加入数组尾部 返回长度
arr.push('a') 
// pop 从数组尾部移除
arr.pop()

// unshift 追加到数组头部  返回长度
arr.unshift('b')
// shift 从数组头部移除
arr.shift()

数组操作中间位置的元素

• fill 数组指定位置替换数据

let arr = [1,2,3,4].fill('空指针',1,4)
// 运行结果 [1, "空指针", "空指针", "空指针"]
console.log(arr)

• slice 截取指定位置的数组 返回新数组 不会改变原数组

let arr = ['a','b','c','d']
// 运行结果 ["b", "c"]
console.log(arr.slice(1,3))

• splice 指定开始位置与需要截取几个元素 删除元素 会改变原数组

let arr = ['a','b','c','d']
let tmp = arr.splice(1,1)
// 运行结果已删除 ["b"]  原的数组 ["a", "c", "d"]
console.log(tmp,arr)

• splice 指定定开始位置与需要截取几个元素 替换元素 会改变原数组

let arr = [1,2,3,4]
let tmp = arr.splice(1,2,'a')
// 运行结果 [2, 3]  [1, "a", 4]
console.log(tmp,arr)

• splice 指定某个位置开始 增加元素

let arr = [1,2,3,4]
let tmp = arr.splice(2,0,'a')
// 运行结果[] [1, 2, "a", 3, 4]
console.log(tmp,arr)

• split 字符串拆分数组

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

• join 按指定格式 将字符串合并成数组

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

• … 两个数组合并 小栗子1

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

• push 两个数组合并 小栗子2

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

• concat 两个数组合并 小栗子3

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

• copyWithin 将数组元素移动到指定位置 参数1 复制到指定元素的位置 参数2 要复制元素的开始位置 参数 要复制元素的结束位置

let arr = ['a','b','c','d','e']
console.log(arr.copyWithin(3,1,3))

数组查找

• indexOf 从左侧开始查找'c' 返回元素下标

let arr = ['a','b','c','d','e']
// 运行结果 c
console.log(arr.indexOf('c'))

• includes 查找数组中是否包含元素 返回true || false

let arr = ['a','b','c','d','e']
// 运行结果 true
console.log(arr.includes('c'))

• find 查找对象

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

• findIndex 返回元素下标

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

• 遍历对象数组拼接返回想要的元素

let arr = [{name:'小白',age:18},{name:'小黑',age:20}]
let res = arr.map((v) => v.name)
// 运行结果 ["小白", "小黑"]
console.log(res)

排序

• sort 按价格从小到大排序

let order = [
  {name:'iphone',price:8000},
  {name:'小米',price:5000},
  {name:'华为',price:6000}
]
order = order.sort((a,b)=>{
      // b在前a在后从大到小排,a前b在后从小到大排
    return a.price - b.price
})
console.table(order)

循环

• 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"

• iterator 迭代器 arr.values() 返回一个值迭代器对象

let arr = ['a','b','c']
let values = arr.values()
while(({value,done} = values.next() )&& done === false){
      console.log(value)
}
// 运行结果
> "a"
> "b"
> "c"

• iterator 迭代器 arr.keys() 返回一个下标迭代器对象

let arr = ['a','b','c']
let keys = arr.keys()
while(({value,done} = keys.next() )&& done === false){
      console.log(value)
}
// 运行结果
> 0
> 1
> 2

判断

• every 用于判断数组元素是否全部符合条件

let user = [{name:'a',js:99},{name:'b',js:66},{name:'c',js:89}]
// every 用于判断数组元素是否全部符合条件
let res = user.every(function(item) {
    return item.js >= 60
})
// 运行结果 true
console.log(res)

• some 数组中一个值为真 则返回真

let user = [{name:'a',js:99},{name:'b',js:66},{name:'c',js:89}]
// some 用于判断数组元素是否全部符合条件
let res = user.some((item)=>{
    return item.js >= 60
})
// 运行结果 true
console.log(res)

• filter 过滤 查询不等于'b'的数据

let arr = ['a','b','b','d']
let newArr = arr.filter((item)=>{
     return item != 'b'
})
// 运行结果  ["a", "d"]
console.log(newArr)

• 自己实现filter

function filter(array,callback){
    let newArray = []
    for(const v of array){
        if(callback(v) === true){
            newArray.push(v)
        }    
    }
  return newArray
}
let arr = ['a','b','c','a','d','a']
let tmp = filter(arr,(item)=>{return item != 'a'})
// 运行结果 ["b", "c", "d"]
console.log(tmp)

• reduce 小栗子1 统计a字符出现的次数

let arr = ['a','b','c','a','a']
// 使用reduce 统计某字符出现的字数
let res = arr.reduce((total,cur)=>{
    total += 'a' === cur ? 1:0
      return total
},0)
// 运行结果 3
console.log(res)

• reuce 小栗子2 计算订单总数

let order = [
  {name:'iphone',price:8000},
  {name:'小米',price:5000},
  {name:'华为',price:6000}
]
// 计算订单总数
let sum = order.reduce(((total,cur)=>{
  return (total += cur['price'])
}),0)
// 运行结果 19000
console.log(sum)