When we write business logic, often need to deal with a large amount of data, the processing, is not just to get the interface to render return data, in some cases, the data returned “incomplete”, can’t use them directly, therefore, we need to deal with processing and returns the new data, be what you want, this paper mainly aimed at the common json array, Why is a json array, mainly I want to, such as the mall class projects will have a classification list, product list, the store list, what other projects are comments list, list of articles, etc., the chances of getting a json array, read this article, hope can improve our ability for different data can be processed quickly.
The array needs to be sorted by directory
- Array addition –increase
- The first digit of the array is added
- The end of the array
- The middle of the array
- Array delete –delete
- The first digit of the array is removed
- The last bit of array is deleted
- Delete the middle of array
- Array substitution –change
- The first digit replacement of an array
- Substitution of the last bit of the array
- Middle substitution of an array
- Array query –check
- Query for values in an array
- A query for a value index in an array
- Array judgment
- Whether all the values in the array satisfy the given condition
- Whether the array contains values that satisfy the given condition
- Array processing
- Array value processing
- Array merging
- Array concatenation
- Sorting of arrays
- An array of reverse
- Arrays are sorted by condition
- Array traversal
- Array traversal
- A shallow copy of the array
- Deep copy of array
- Dynamic creation of arrays (variable value)
Adding an array
The first digit of the array is added
unshift
let arr = [1.2.3.4.5]
// insert 9,10 at the beginning of the array arr
arr.unshift(9.10)
arr / /,10,1,2,3,4,5 [9] Copy the code
splice
let arr = [1.2.3.4.5]
// insert 9,10 at the beginning of the array arr
arr.splice(0.0.9.10)
arr / /,10,1,2,3,4,5 [9] Copy the code
The last bit of the array is added
push
let arr = [1.2.3.4.5]
// Add a 6 to the end of the array arr
arr.push(6)
arr // [1, 2, 3, 4, 5, 6] Copy the code
splice
let arr = [1.2.3.4.5]
// Add a 6 to the end of the array arr
arr.splice(arr.length,0.6)
arr // [1, 2, 3, 4, 5, 6] Copy the code
The middle of the array
splice
let arr = [1.2.3.4.5]
// insert 9,10 in front of the arr index 1
lis.splice(1.0.9.10)
lis // [1, 9, 10, 2, 3, 4, 5] Copy the code
Array deletion
Array head deletion
shift
let arr = [1.2.3.4.5]
arr.shift()
arr / / 5-tetrafluorobenzoic [2]
Copy the code
splice
let arr = [1.2.3.4.5]
arr.splice(0.1)
arr / / 5-tetrafluorobenzoic [2]
Copy the code
End of array deleted
pop
let arr = [1.2.3.4.5]
arr.pop()
arr / / [1, 2, 3, 4]
Copy the code
splice
let arr = [1.2.3.4.5]
arr.splice(arr1.length- 1.1)
arr / / [1, 2, 3, 4]
Copy the code
Array middle deletion
splice
let arr = [1.2.3.4.5]
// Delete 1 from array index 1
arr.splice(1.1)
arr / / 5-tetrafluorobenzoic [1]
let arr1 = [1.2.3.4.5] // Delete two arrays from index 1 arr1.splice(1.2) arr1 / /].enlighened Copy the code
Array substitution
The first digit replacement of an array
splice
let arr = [1.2.3.4.5]
// Replace the arr prefix (1) with 8 and 9
arr.splice(0.1.8.9)
arr //[8, 9, 2, 3, 4, 5] Copy the code
Substitution of the last bit of the array
splice
let arr = [1.2.3.4.5]
// Replace (5) at the end of arr with 8 and 9
arr.splice(arr.length- 1.1.8.9)
arr / /,2,3,4,8,9 [1] Copy the code
Middle substitution of an array
splice
let lis1 = [1.2.3.4.5]
// Remove the value (4) with index 3 in lis array and replace it with 9 and 10
lis1.splice(3.1.9.10)
lis1 / /,2,3,9,10,5 [1] Copy the code
Array query
Query for values in an array
Query the first value in an array that matches a given condition
find
let jsonArr = [
{id:'1'.name:'lisi'.age:30},
{id:'2'.name:'zhangsan'.age:20},
{id:'3'.name:'lisi'.age:30}
]
// find the value of age 30 jsonArr.find(item= >item.age===30) //{id: "1", name: "lisi", age: 30} // Find the value whose age is 301 jsonArr.find(item= >item.age===301) //undefined Copy the code
Queries an array in reverse order for the first value that matches a given condition
LastFind (custom method)
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 Copy the code
Query all values in an array that match the given criteria
filter
let jsonArr = [
{id:'1'.name:'lisi'.age:30},
{id:'2'.name:'zhangsan'.age:20},
{id:'3'.name:'lisi'.age:30}
]
// Find all values whose age is 30 jsonArr.filter(item= >item.age===30) //[{id:'1',name:'lisi',age:30},{id:'3',name:'lisi',age:30}] // Find all values whose age is 301 jsonArr.filter(item= >item.age===301) / / [] Copy the code
A query for a value index in an array
Queries the index of the first value in an array that matches a given condition
findIndex
let jsonArr = [
{id:'1'.name:'lisi'.age:30},
{id:'2'.name:'zhangsan'.age:20},
{id:'3'.name:'lisi'.age:30}
]
// query the index of the first value whose age is 30 jsonArr.findIndex(item= >item.age===30)/ / 0 Copy the code
IndexOf (ordinary value)
let arr = [1.2.1.4]
arr.indexOf(1)/ / 0
Copy the code
Queries in reverse order the index of the first value in an array that matches a given condition
LastFindIndex (custom method)
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 Copy the code
LastIndexOf (normal value)
let arr = [1.2.1.4]
arr.lastIndexOf(1)/ / 2
Copy the code
Queries the index of all values in an array in reverse order that match the given criteria
AllFindIndex (custom method)
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}, ] // Find all indexes from the jsonArr array for values that match the given criteria 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)/ / [] Copy the code
Array judgment
Whether all the values in the array satisfy the given condition
every
let arr = [1.2.3.4.5]
// Check if each item in the array is greater than 0
arr.every(item= >item>0) //true
// Check if each item in the array is greater than 1
arr.every(item= >item>1) //false // List of users 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}, ] // Juvenile detection userList.every(item= >item.age>=18)//true Copy the code
Whether the array contains values that satisfy the given condition
Includes (common value)
let arr = [1.2.3.4.5]
// Check if the array contains 4
arr.includes(4) //true
arr.includes(6) //false
Copy the code
Find (for JSON arrays)
// List of users
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}, ] // Whether the user list contains the age of 20 !!!!! userList.find(item= >item.age===20) // true // Whether the user list contains age 201 !!!!! userList.find(item= >item.age===201)// false Copy the code
Some (for JSON arrays) :black_flag: recommended
// List of users
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}, ] // Whether the user list contains the age of 20 userList.some(item= >item.age===20) // true // Whether the user list contains age 201 userList.some(item= >item.age===201)// false Copy the code
Array processing
Array global processing
Array value stitching
join
let arr = [1.2.3.4.5]
arr.join(' ') / / '12345'
Copy the code
reduce
let arr = [1.2.3.4.5]
arr.reduce((pre,cur) = >pre+=cur,' ') / / '12345'
Copy the code
An array of merger
Extended operator.
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]
Copy the code
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]
Copy the code
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]
Copy the code
Array value processing
reduce
let list = [1.2.3.4.5] // => ["1%", "2%", "3%", "4%", "5%"]
// Array value processing output
list.reduce((pre,cur) = >pre.push(cur+The '%')&&pre,[])//["1%", "2%", "3%", "4%", "5%"]
Copy the code
**reduceRight **
let list = [1.2.3.4.5] // => ["1%", "2%", "3%", "4%", "5%"]
// Array value processing output
list.reduceRight ((pre,cur) = >pre.push(cur+The '%')&&pre,[])//["5%", "4%", "3%", "2%", "1%"]
Copy the code
ReduceRight and Reduce are in the opposite order
map
let list = [1.2.3.4.5] // => ["1%", "2%", "3%", "4%", "5%"]
list.map(item= >item +=The '%') //["1%", "2%", "3%", "4%", "5%"]
// Customize the return value of each item as [] JSON array value processing priority map
list.map(item= >[]) / / [[], [], [], [], []] Copy the code
Each map callback can be returned with three customizable parameters: item (each item), index (the index of each item), and ARR (the array traversed).
Sort an array
An array of reverse
reverse
let arr = [9.7.4.5.6.11]
arr.reverse()// [11, 6, 5, 4, 7, 9]
arr// [11, 6, 5, 4, 7, 9]
Copy the code
Arrays are sorted by condition
sort
let arr = [9.7.4.5.6.11]
arr.sort((pre,next) = >pre-next) // [4, 5, 6, 7, 9, 11]
Copy the code
Array traversal
forEach
let arr2 = [4.5.6]
arr2.forEach((item,index,arr) = >{
console.log('Current item:${item}, the corresponding index is:${index}, traversal the array:The ${JSON.stringify(arr)}`)
})
// Current item :4, corresponding index :0, traversal array: [4,5,6] // current item :5, corresponding index :1, traversal array: [4,5,6] // current item :6, corresponding index :2, traversal array: [4,5,6] Copy the code
The traversal method for the array itself: forEach
for
let arr2 = [4.5.6]
for(let i=0; i<arr2.length; i++){ console.log('Current item:${arr2[i]}, the corresponding index is:${i}, the array traversed is:The ${JSON.stringify(arr2)}`)
}
// Current item :4, corresponding index :0, traversal array: [4,5,6] // current item :5, corresponding index :1, traversal array: [4,5,6] // current item :6, corresponding index :2, traversal array: [4,5,6] Copy the code
Array type judgment
isArray
let arr = []
let str= ' '
Array.isArray(arr)//true
Array.isArray(str)//false
Copy the code
A shallow copy of the array
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] Copy the code
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] Copy the code
Deep copy of array
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}] Copy the code
Disadvantages: If there is a re in the object, directly parse the re into {}, time into a string, etc
Dynamic creation of arrays (variable value)
GenerateArr (Custom encapsulation)
// Dynamically generate an array of indeterminate length
function generateArr(len,val){
return Array(len).fill(val)
}
// Requirement 1: generate arrays of length 5 with values of []
generateArr(5[]),/ / [[], [], [], [], []] // Requirement 2: generate arrays of {} of length 3 generateArr(3, {})/ / / {}, {}, {} // Requirement 3: generate an array of 0 values of length 5 generateArr(5, 0)/ /,0,0,0,0 [0] Copy the code
conclusion
All roads lead to Rome, but there are also long roads. If you remember the above, it is not really a shortcut, but at least you can reduce unnecessary time, focus more on business, and improve your efficiency. Never put off till tomorrow what you can!
If you have a better idea, feel free to leave a comment
Please point out any inaccuracies or errors in the article
Previous articles:
Front-end code optimization utility
Practical tools and methods in front-end development
Common application scenarios for front-end promises
This article is formatted using MDNICE