The background,

Today, the extraction of data in the data operated on the original array, encountered a series of pits, to record the exploration record;

Second, the details

The requirement is that you do three attributes on the list, one in green, two in red, and then any 0 or NULL in the list is removed and placed at the bottom, not sorted. And then there’s the culling step, where you run into some problems with the original array that you’ve ignored before.

Code first, sort first, then add identification properties. Display control through solt slot in HTML, style into the line of future description display ~

let length = this.gridData.length; this.gridData.sort((a,b)=>{ return parseInt(a.totalRank) - parseInt(b.totalRank) }); this.gridData[0].color0 = 'blue'; this.gridData[1].color0 = 'blue'; this.gridData[2].color0 = 'blue'; this.gridData.sort((a,b)=>{ return parseInt(a.warehouseRank) - parseInt(b.warehouseRank) }); <el-table-column label=" prop="warehouseRank" :min-width="45"> <template slot-scope="props"> <div v-if="props.row.color1 == 'red'" style="background:#e93b64; border-radius: 50%; width: 24px; color: #fff;" >{{props.row.warehouseRank}}</div> <div v-else>{{props.row.warehouseRank}}</div> </template> </el-table-column>Copy the code

Third, explore

Let arr =,2,3,4,5,6,7,8 [1]; let arrs = []; for (const item of arr) { if (item<4) { let index = arr.indexOf(item); arr.splice(index,1) }else{ arrs.push(item) } } console.log(arr); / /,3,4,5,6,7,8 [2]Copy the code

Surprisingly, it’s not possible to operate directly on an array in a for of loop,

So let’s do it another way

for (const item of arr) { if (item<4) { let index = arr.indexOf(item); arr.splice(index,1); Console. log(arr)}else{arrs.push(item)}} // output [4, 5, 6, 7, Arr.foreach ((item) => {if (item<4) {let index = arr.indexof (item); arr.splice(index,1); }else{ arrs.push(item) } })console.log(arr) //[2, 4, 5, 6, 7, Arr. ForEach ((item) => {if (item<4) {let index = arr. IndexOf (item); arr.splice(index,1); Console. log(arr)}else{arrs.push(item)}}) vm290:5 (7) [2, 3, 4, 5, 6, 7, 8] vm290:5 (6) [2, 4, 5, 6, 7, 8] The result is different againCopy the code

ForEach does not support return break, which implicitly increments the index after iterating through the callback function, like this:

arr.forEach((item, index) => { arr.splice(index, 1); console.log(1); // set index increment by 1; });Copy the code

arr.filter((item) => { return item >= 4 }); (5) [4, 5, 6, 7, 8] // Simple convenient correct, if the original array use filterCopy the code

Conclusion:

ForEach deleting its index element will not be reset, it will implicitly increment the index, and the array will not be deleted

The for offorEach loop returns an array that is not accurate: it automatically changes the index.

Point!! Please do not operate the original array except filter loop, or deep copy separate operation!!

What happens when you manipulate a primitive array in a WEBGL JS loop? React ShoudComponentUpdate React ShoudComponentUpdate Stop rendering vue why don’t you use 11 methods for deep copy shallow copy Vue vue $nextTick Deep parsing Deep Revealing Promise microtask registration and execution Process How does the V8 engine execute a section of JS code? Http3.0 2.0 1.0 compare macro tasks and micro tasks in detail