後端給我的資料不能用，我該怎麼辦

回覆 交流 ，加入前端程式設計面試演算法每日一題群

面試官也在看的前端面試資料

我們寫業務邏輯的時候，常常需要處理大量的資料，這種處理，不僅僅是拿到介面返回資料進行渲染，有些時候，返回的資料“殘缺”的，是不能直接拿來用的，因此，我們需要處理加工返回新的資料，成為自己想要的樣子，本篇主要針對常見的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

http://juejin.cn/post/6844904166683328525

最後

歡迎關注「 三分鐘學前端 」，回覆「 交流 」自動加入前端三分鐘進階群，每日一道程式設計演算法面試題（含解答），助力你成為更優秀的前端開發！

號內回覆：

「 網路 」，自動獲取三分鐘學前端網路篇小書（90+頁）

「 JS 」，自動獲取三分鐘學前端 JS 篇小書（120+頁）

「 演算法 」，自動獲取 github 2.9k+ 的前端演算法小書

「 面試 」，自動獲取 github 23.2k+ 的前端面試小書

「 簡歷 」，自動獲取程式設計師系列的  120 套模版

》》面試官也在看的前端面試資料《《

“在看和轉發” 就是最大的