前端如何快速处理数据成想要的样子(数组篇)

4,199 阅读9分钟

我们写业务逻辑的时候,常常需要处理大量的数据,这种处理,不仅仅是拿到接口返回数据进行渲染,有些时候,返回的数据“残缺”的,是不能直接拿来用的,因此,我们需要处理加工返回新的数据,成为自己想要的样子,本篇主要针对常见的json数组展开,为什么是json数组呢,主要我想的是,比如商城类项目会有 分类列表、商品列表、店铺列表等,其它项目中有什么评论列表、文章列表等,json数组出现的几率多,阅读完此篇,希望可以提升我们针对不同的数据可以快速处理的能力。

数组需求分类目录

  • 数组的添加 -
    • 数组的首位添加
    • 数组的末尾添加
    • 数组的中间添加
  • 数组的删除 -
    • 数组的首位删除
    • 数组的末位删除
    • 数组的中间删除
  • 数组的替换 -
    • 数组的首位替换
    • 数组的末位替换
    • 数组的中间替换
  • 数组的查询 -
    • 数组中值的查询
    • 数组中值索引的查询
  • 数组的判断
    • 数组中的所有值是否都满足给定条件
    • 数组中是否包含满足给定条件的值
  • 数组的加工
    • 数组值的加工
    • 数组的合并
    • 数组的拼接
  • 数组的排序
    • 数组倒序
    • 数组按条件排序
  • 数组的遍历
    • 数组遍历
  • 数组的浅拷贝
  • 数组的 深拷贝
  • 数组的动态创建(值不定)

数组的添加

数组的首位添加

unshift

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

//在数组arr首位插入9,10两个值
arr.unshift(9,10)

arr // [9,10,1,2,3,4,5]

splice

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

//在数组arr首位插入9,10两个值
arr.splice(0,0,9,10)

arr // [9,10,1,2,3,4,5]

数组的末位添加

push

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

//在数组arr末尾添加一个6
arr.push(6)

arr // [1, 2, 3, 4, 5, 6]

splice

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

//在数组arr末尾添加一个6
arr.splice(arr.length,0,6)

arr // [1, 2, 3, 4, 5, 6]

数组的中间添加

splice

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

//在数组arr索引为1的值前面插入9,10两个值
lis.splice(1,0,9,10) 

lis // [1, 9, 10, 2, 3, 4, 5]

数组的删除

数组首位删除

shift

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

splice

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

数组末位删除

pop

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

splice

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

数组中间删除

splice

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

//从数组索引 为 1 的开始,删除 1 个
arr.splice(1,1)
arr //[1,3,4,5]

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

//从数组索引 为 1 的开始,删除 2 个
arr1.splice(1,2)
arr1 //[1,4,5]

数组的替换

数组的首位替换

splice

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

//在数组arr首位(1) 替换成 8和9
arr.splice(0,1,8,9)

arr //[8, 9, 2, 3, 4, 5]

数组的末位替换

splice

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

//在数组arr末位 (5) 替换成 8和9
arr.splice(arr.length-1,1,8,9)

arr //[1,2,3,4,8,9]

数组的中间替换

splice

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

//删除了lis数组中索引为 3 的值(4),同时用9和10替换了其位置
lis1.splice(3,1,9,10)

lis1 // [1,2,3,9,10,5]

数组的查询

数组中值的查询

查询数组中符合给定条件的第一个值

find

let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'lisi',age:30}
]
//找到 age 为 30的值
jsonArr.find(item=>item.age===30)  //{id: "1", name: "lisi", age: 30}
//找到 age为 301的值
jsonArr.find(item=>item.age===301) //undefined

倒序查询数组中符合给定条件的第一个值

lastFind (自定义方法)

function lastFind(jsonArr,callback){
    let _jsonArr = jsonArr.reverse()
    let obj = _jsonArr.find(callback)
    return obj
}
let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
lastFind(jsonArr,item=>item.age==30) //  {id: "5", name: "wuming", age: 30}
lastFind(jsonArr,item=>item.age==18) //  {id: "4", name: "xiaoming", age: 18}
lastFind(jsonArr,item=>item.age==188)//  undefined

查询数组中符合给定条件的所有值

filter

let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'lisi',age:30}
]
//找到 age 为 30的所有值
jsonArr.filter(item=>item.age===30) //[{id:'1',name:'lisi',age:30},{id:'3',name:'lisi',age:30}]
//找到 age为 301的所有值
jsonArr.filter(item=>item.age===301) //[]

数组中值索引的查询

查询数组中符合给定条件的第一个值的索引

findIndex

let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'lisi',age:30}
]
// 查询age为30的第一个值的索引
jsonArr.findIndex(item=>item.age===30)//0

indexOf(普通值)

let arr = [1,2,1,4]
arr.indexOf(1)//0

倒序查询数组中符合给定条件的第一个值的索引

lastFindIndex(自定义方法)

function lastFindIndex(jsonArr,callback){
    let _jsonArr = jsonArr.reverse()
    let index = _jsonArr.findIndex(callback)
    return index>-1?_jsonArr.length-index-1:-1
}
let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]

lastFindIndex(jsonArr,item=>item.age==18) //3
lastFindIndex(jsonArr,item=>item.age==30) //4

lastIndexOf(普通值)

let arr = [1,2,1,4]
arr.lastIndexOf(1)//2

倒序查询数组中符合给定条件的所有值的索引

allFindIndex (自定义方法)

function allFindIndex(jsonArr,callback){
    let res= []
    for(let i=0;i<jsonArr.length;i++){
        if(callback(jsonArr[i])){
            res.push(i)
        }
    }
    return res
}

let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
//从jsonArr数组中  找到符合给定条件的值的所有索引

allFindIndex(jsonArr,item=>item.age==30)//  [0, 2, 4]
allFindIndex(jsonArr,item=>item.age==18)//  [3]
allFindIndex(jsonArr,item=>item.age==20)//  [1]
allFindIndex(jsonArr,item=>item.age==201)// []

数组的判断

数组中的所有值是否都满足给定条件

every

let arr = [1,2,3,4,5]
//检测数组的每一项是否都大于0
arr.every(item=>item>0) //true

//检测数组的每一项是否都大于1
arr.every(item=>item>1) //false

//用户列表
let userList = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
//未成年检测
userList.every(item=>item.age>=18)//true

数组中是否包含满足给定条件的值

includes(普通值)

let arr = [1,2,3,4,5]
//检测数组中是否包含 4
arr.includes(4) //true
arr.includes(6) //false

find(针对json数组

//用户列表
let userList = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
//用户列表中是否包含年龄20岁的
!!userList.find(item=>item.age===20) // true
//用户列表中是否包含年龄201岁的
!!userList.find(item=>item.age===201)// false

some(针对json数组):black_flag:推荐

//用户列表
let userList = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
//用户列表中是否包含年龄20岁的
userList.some(item=>item.age===20) // true
//用户列表中是否包含年龄201岁的
userList.some(item=>item.age===201)// false

数组的加工

数组整体加工

数组值拼接

join

let arr = [1,2,3,4,5]
arr.join('') //'12345'

reduce

let arr = [1,2,3,4,5]
arr.reduce((pre,cur)=>pre+=cur,'') //'12345'

数组合并

扩展运算符...

let arr11 = [1,2,3]
let arr22 = [4,5,6]
let arr33 = [7,8,9]
let res = [...arr11,...arr22,...arr33]
res //[1, 2, 3, 4, 5, 6, 7, 8, 9]

concat

let arr11 = [1,2,3]
let arr22 = [4,5,6]
let arr33 = [7,8,9]
let res = arr11.concat(arr22,arr33)
res //[1, 2, 3, 4, 5, 6, 7, 8, 9]

push

let res = [1,2,3]
let arr11 = [4,5,6]
let arr22 = [7,8,9]
res.push(...arr11,...arr22)
res //[1, 2, 3, 4, 5, 6, 7, 8, 9]

数组值加工

reduce

let list = [1,2,3,4,5] // => ["1%", "2%", "3%", "4%", "5%"]

//数组值加工输出
list.reduce((pre,cur)=>pre.push(cur+'%')&&pre,[])//["1%", "2%", "3%", "4%", "5%"]

**reduceRight **

let list = [1,2,3,4,5] // => ["1%", "2%", "3%", "4%", "5%"]

//数组值加工输出
list.reduceRight ((pre,cur)=>pre.push(cur+'%')&&pre,[])//["5%", "4%", "3%", "2%", "1%"]

reduceRight 和 reduce相比顺序相反

map

let list = [1,2,3,4,5] // => ["1%", "2%", "3%", "4%", "5%"]

list.map(item=>item +='%') //["1%", "2%", "3%", "4%", "5%"]

//自定义返回的每一项的值 为 [] json数组值加工 优先考虑map
list.map(item=>[]) //[[],[],[],[],[]]

可以自定义返回的每一项 map回调参数有3个,item(每一项)、index(每一项对应的索引)、arr(遍历的数组)

数组排序

数组倒序

reverse

let arr = [9,7,4,5,6,11]
arr.reverse()// [11, 6, 5, 4, 7, 9]
arr// [11, 6, 5, 4, 7, 9]

数组按条件排序

sort

let arr = [9,7,4,5,6,11]

arr.sort((pre,next)=>pre-next) // [4, 5, 6, 7, 9, 11]

数组的遍历

forEach

let arr2 = [4,5,6]

arr2.forEach((item,index,arr)=>{
 console.log(`当前项:${item},对应的索引是:${index},遍历的数组:${JSON.stringify(arr)}`)
})

//当前项:4,对应的索引是:0,遍历的数组是:[4,5,6]
//当前项:5,对应的索引是:1,遍历的数组是:[4,5,6]
//当前项:6,对应的索引是:2,遍历的数组是:[4,5,6]

数组自身的遍历方法:forEach

for

let arr2 = [4,5,6]

for(let i=0;i<arr2.length;i++){
 console.log(`当前项:${arr2[i]},对应的索引是:${i},遍历的数组是:${JSON.stringify(arr2)}`)
}
//当前项:4,对应的索引是:0,遍历的数组是:[4,5,6]
//当前项:5,对应的索引是:1,遍历的数组是:[4,5,6]
//当前项:6,对应的索引是:2,遍历的数组是:[4,5,6]

数组类型判断

isArray

let arr = []
let str= ''
Array.isArray(arr)//true
Array.isArray(str)//false

数组的浅拷贝

slice

let lis = [1,2,3,4,5]
let cloneLis = lis.slice()

lis.push(6)

lis      //[1, 2, 3, 4, 5, 6]
cloneLis //[1,2,3,4,5]

concat

let lis = [1,2,3,4,5]
let cloneLis = [].concat(lis)

lis.push(6) 

lis      //[1, 2, 3, 4, 5, 6]
cloneLis //[1,2,3,4,5]

数组的深拷贝

JSON.parse(JSON.stringify( ))

let lis = [{a:1},{a:2}]
let cloneLis = JSON.parse(JSON.stringify(lis))

lis[0].a=10
lis      //[{a:10},{a:2}]
cloneLis //[{a:1},{a:2}]

缺点:如果对象里有正则,直接把 正则 解析成 { },时间 转换成 字符串等

数组的动态创建(值不定)

generateArr (自定义封装)

//动态生成 一个长度 不定  值 不定的 数组
function generateArr(len,val){
    return Array(len).fill(val)
}
//需求1:生成长度为5的值都是[]的数组
generateArr(5,[])//[[],[],[],[],[]]

//需求2:生成长度为3的值都是{}的数组
generateArr(3,{})//[{},{},{}]

//需求3:生成长度为5的值都是0的数组
generateArr(5,0)//[0,0,0,0,0]

结语

条条大路通罗马,但也有路途长远之分,可能记住了以上,也算不上真正的捷径,但是至少可以减少不必浪费的时间,更多的专注于业务,提高了自我的效率。毕!

如果你有更好的点子,欢迎留言

文中若有不准确或错误的地方,欢迎指出

往期文章 :

前端代码优化实用篇

前端开发中实用的工具方法

前端 Promise 常见的应用场景

本文使用 mdnice 排版