后端给我的数据不能用，我该怎么办

回复 交流 ，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

我们写业务逻辑的时候，常常需要处理大量的数据，这种处理，不仅仅是拿到接口返回数据进行渲染，有些时候，返回的数据“残缺”的，是不能直接拿来用的，因此，我们需要处理加工返回新的数据，成为自己想要的样子，本篇主要针对常见的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] 

结语

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

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

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

关于本文

作者：rookie_fly

https://juejin.cn/post/6844904166683328525

最后

欢迎关注「 三分钟学前端 」，回复「 交流 」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

号内回复：

「 网络 」，自动获取三分钟学前端网络篇小书（90+页）

「 JS 」，自动获取三分钟学前端 JS 篇小书（120+页）

「 算法 」，自动获取 github 2.9k+ 的前端算法小书

「 面试 」，自动获取 github 23.2k+ 的前端面试小书

「 简历 」，自动获取程序员系列的  120 套模版

》》面试官也在看的前端面试资料《《

“在看和转发” 就是最大的