1. Find the data in one array that matches the second array

In the processing of data, the back end often returns us an array, and we process the array on this basis to get the value we need.

Var arr1 = [{title:'in progress', value: 'running'}, 
    {title: '开始', value: 'start'}, 
    {title: 'complete', value: 'completed'}]Copy the code
Var arr2 = [{status:'running', count: 1},
    {status: 'completed', count: 2}
]
Copy the code

Data processing purpose: To obtain matching data from ARR1 and ARR2, for example, value in ARR1 and status in ARR2 are equal, then relevant data processing ideas can be found according to this connection:

  1. Loop through arR2, take out each of its values.
  2. During the loop loop, find the data configured with the array arr1 and use a variable to receive it
  3. Push the returned array into an empty array so that the array contains the values we need

Code:

var temp = []
_.forEach(arr2, item => {
    const arrF = _.find(arr1, {value: item.status})
    temp.push(arrF)
})
console.log(temp) // 0: {title: "In progress", value: "running"} 1: {title: "Complete", value: "completed"}

Copy the code

Simplified version code:

var newArr = _.filter(arr1, item => {
    return _.find(arr2, { status: item.value})
})
console.log(newArr)  // {title: "In progress", value: "running"} {title: "Complete", value: "completed"}
Copy the code

2. Find the matching value in an array

How do you find a matching item in an array based on a value? Here, the matching conditions are divided into two kinds, one is certain, known invariant, the other is uncertain.

  • Determined value: Keyward is equal to value in each entry in the ARR
  • Application scenario: according to the different state of the button to do different styles, text display.
var keyward = 'success'
var arr = [{value: 'success', title: 'success', color: red}, {value: 'fail', title: 'failure', color: orange}, { value: 'running', title: 'Running', color: blue}]
var newArr = _.find(arr, { value: keyward})
console.log(newArr) // {value: "success", title: "Success", color: red}
Copy the code
  • Unknown value: Keyward is equal to some value in each arR item, which could be value, color, etc
  • Usage scenario: Users search for information
var keyward = 'success'
var arr = [{value: 'success', title: 'success', color: red}, {value: 'fail', title: 'failure', color: orange}, { value: 'running', title: 'Running', color: blue}]
var newArr = _.filter(arr, item => { return Object.keys(item).some(el => item[el] == keyward) })
console.log(newArr)  // {value: "success", title: "Success"}  {value: "running", title: "success"}
Copy the code

3. Add the number of times that duplicate values in an array and deduplicate the array

Var arr = [{status:'running'},{status: 'start'}, {status: 'running'},{status: 'completed'},{status: 'completed'}]
Copy the code

Objective: Duplicate arr values such as status:’running’ twice in the array, count the number of occurrences, and then de-duplicate the array. Implementation idea:

  • You need to use summation to count the number of repetitions, by using _reduce
  • Prepare an empty object for deweighting
  • Determine whether the current status is present in the array

Code:

var arr = [{status: 'running'},{status: 'start'}, {status: 'running'},{status: 'completed'},{status: 'completed'}]
var temp = {}
const result = _.reduce(arr, (acc, cur)=> {
    if (temp[cur.status]) {
        _.map(acc, (e, i) => {
            cur.status === e.status ? acc[i].num++ : ' '})}else {
       cur.num = 1
       temp[cur.status] = true
       acc.push(cur)
    }
    return acc
}, [])
console.log(result)  //{status: "running", sum: 2}  {status: "start", sum: 1} {status: "completed", sum: 2}
Copy the code

Here’s another way to optimize it (emphasis)

var arr = [{status: 'running'}, {status: 'failed'}, {status: 'running'}, {status: 'completed'}]
var Obj = _.reduce(arr, (acc, cur) => {
    acc[cur.status] = acc[cur.status] || 0
    acc[cur.status]++
    return acc
}, {})
console.log(Obj) //{running: 2, failed: 1, completed: 1}
Copy the code
Var arr = [{status:'running'}, {status: 'failed'}, {status: 'running'}, {status: 'completed'}]
var Obj = arr.reduce((acc, cur) => {
    acc[cur.status] = acc[cur.status] ? ++acc[cur.status] : 1
    return acc
}, {})
console.log(Obj) // {running: 2, failed: 1, completed: 1}
Copy the code
 var hash = {}
      var acc = this.rightData.reduce(function(acc, cur){
        hash[cur.type] ? ' ' : (hash[next.type] = true && acc.push(cur))
        return acc
      }, [])
Copy the code

4. Remove the same value from both arrays

var arr1 = [{name: 'zs', age: 18}, {name: 'ls', age: 22}, {name: 'ww', age: 19}]
var arr2 = [{name: 'zs', age: 18}, {name: 'ls', age: 22}]
Copy the code

Object: equivalent to the difference between two arrays, remove the same implementation idea:

  • The filter filter arr1
  • Find every value in the second array that is not the same as the first array and return Boolean as the filter condition code:
var temp = _.filter(arr1, item => _.every(arr2, ele => item.name ! == ele.name)) console.log(temp) // [{name:"ww", age: 19}]

Copy the code

Application scenario: This parameter is used for batch deletion. If you select the item to be deleted, the item in both arrays will be deleted.

values

5.pick

When submitting some forms recently, I found that some values in the final submit did not need to be submitted with the backend. Before, I usually deleted the key in the object, but now I found pick, as the name implies, the key needed by pick from the object

let obj = {
    name: 'zs'.age: 18.height: 180};let pickAfter = _.pick(obj, ['name'.'age']);
console.log(pickAfter) // { name: 'zs', age: 18 }
Copy the code

6.omit

8. Omit anything you need and omit anything you want. Omit anything you need and omit anything you want

let obj = {
    name: 'zs'.age: 18.height: 180};let omitAfter = _.omit(obj, ['name'.'age']);
console.log(omitAfter) // { height: 180 }
Copy the code

7.truncate

Intercepting is often needed when dealing with long headings using ‘… ‘instead of

_.truncate('Here's the headline too long too long', { length: 5.omission: '... ' })
// "here..." Tag: This length includes... The length of the
Copy the code