ES6 deletes an attribute in all array objects through map, deconstruction and extension operators

First of all, demand

There are two drop-down boxes in a form , All access the same interface to get the tree structure List Data is dynamically bound to their respective drop-down boxes , The difference lies in A The drop-down box shows only the root node ,B The drop-down box displays all the data of the tree structure .

For performance reasons , The front end must only send one ajax request , The back end only writes one acquisition TreeList Interface of structure , It is used to meet the dynamic assignment of two drop-down boxes .

Pictured ： The left figure shows the root node item , The right figure shows all tree structure items

 

 

Paste the returned data structure

 

 

 

 

 

  Ideas ： From the perspective of data structure, it contains all the root node and child node data treeList Array objects .B The drop-down box can be assigned unchanged ,A The drop-down box needs to put children Attribute is deleted .

Here are a few knowledge points ： Deep copy ,map、 Deconstruction and extension operators     adopt ES6 The syntax of is elegant to delete the attributes in the array

Post code directly ：

 

 

  Finally, the root node data printed is compared as follows ：