How the front end can quickly process the data as desired

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

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

How the front end can quickly process the data as desired

Adding an array

The first digit of the array is added

The last bit of the array is added

The middle of the array

Array deletion

Array head deletion

End of array deleted

Array middle deletion

Array substitution

The first digit replacement of an array

Substitution of the last bit of the array

Middle substitution of an array

Array query

Query for values in an array

Query the first value in an array that matches a given condition

Queries an array in reverse order for the first value that matches a given condition

Query all values in an array that match the given criteria

A query for a value index in an array

Queries the index of the first value in an array that matches a given condition

Queries in reverse order the index of the first value in an array that matches a given condition

Queries the index of all values in an array in reverse order that match the given criteria

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 global processing

Array value stitching

An array of merger

Array value processing

Sort an array

An array of reverse

Arrays are sorted by condition

Array traversal

Array type judgment

A shallow copy of the array

Deep copy of array

Dynamic creation of arrays (variable value)

conclusion

Related Posts

Separate front and back SSO SSO can be used for vue React JSP JQ, cross-domain dedicated IFrame + postMessage secondary domain name master domain name maximum SSO SSO combat

Js detects whether a domain name is blocked by wechat

SwaggerUI based on vuE3 implementation