The question of why all the data in the list loop are displayed in arrays.

  • in a background management system, there is a sidebar. The items of the sidebar are obtained at the beginning of loading, and the data is passed to a nested array
  • .
  • the sidebar will not increase or decrease during the user"s operation
  • Click on the sidebar to add the corresponding item to the label of the header. The label of the header is not hierarchical, that is, an array of layers
  • the scene is the click of the sidebar, the click and close of the header tag, and the routing change of the address bar, all of which are linked
< hr >

there is a question

Why is this scenario not in the form of objects? Or is there something I haven"t considered the inevitability of using arrays
  • the list data of the sidebar obtained before is passed to the front end in the form of an array, and this has never been thought of before,
  • recently, when I was doing business, I tried to use the data in the form of an object at home. The attribute name of each layer is the corresponding title name, which is progressive layer by layer.
  • I personally think that since there will be no change in this list, at least it will be much faster to find objects from the outside. I feel that if you click on the array, you need to find the corresponding one in the list of the sidebar when you hit the head tag. It is difficult to find the outermost layer from the inside to the outside, but it is very convenient for the object to control the attribute name. It feels good and operates a lot
  • .
Nov.24,2021

the two are not contradictory, they can be used together

if you don't use an array, then at the first level, you need to assign a key, to each element, and in this case, assigning key is not necessary, just use an array

.
var tree = [
    {
        id: 1,
        label: '',
        children: [
            {
                id: 11,
                label: 'sdfs'
            },
            {
                id: 12,
                label: 'sdfs'
            }
        ]
    },
    {
        id: 2,
        label: ''
    },
    {
        id: 3,
        label: ''
    },
    {
        id: 4,
        label: ''
    },
    {
        id: 5,
        label: ''
    }
]
Menu