当前位置:网站首页>ES6 real case deconstruction (multidimensional array object) new case:

ES6 real case deconstruction (multidimensional array object) new case:

2022-07-19 05:12:00 Create splendid -- hand in hand with you

Obtained project data value :

const  msg={
                "code":200,
                "msg":" Get the news list successfully ",
                "data":[
                    {
                        "id":1,
                        "title":"5G Commercial own , The income of the three major operators fell ",
                        "count":58,
                    },
                    {
                            "id":2,
                            "title":" A quick look at international media headlines ",
                            "count":56,
                    },
                    {
                        "id":3,
                        "title":" Ukraine and Russia continue to conflict ",
                        "count":1669,
                    },
                ]
            }

Through the real data above , Many friends will have questions , How to deconstruct this , Now we will give you a detailed explanation according to your needs . 

    // demand 1: Please send the above msg object   Use object deconstruction Just choose data
            // The rendering page is used after the aspect
          
            // const {data} = msg
            // console.log(data);
            // It's worth it   [{…}, {…}, {…}]

            
            // demand 2: above msg 10. Data transferred from the background , We need to take data Select as a parameter to pass to the function
            
            // The old way of writing it
            // const {data} = msg
            // function render(arr){
            //     // All we have to do is data data
            //     // Internal processing
            //     console.log(arr)
            // }
            // render(data)
            // The output is  [{…}, {…}, {…}]

            
            // Now it is written as
            // function render({data}){
            //     console.log(data)
            // }
            // render(msg)
            // The result is  [{…}, {…}, {…}]
            // analysis :function render({data}) This is deconstructed while passing parameters
            // Now the writing becomes more gradual   It only needs data So we just need to deconstruct data that will do

                        

            // demand 3: To place msg Inside data Name confusion , The data name in the demand rendering function is changed to myData
            // function render({data:myData}){
            //     // Demand will Get it data data Renamed myData
            //     // Internal processing
            //     console.log(myData)
            // }
            // render(msg)
            // The printed result is  [{…}, {…}, {…}]
             // msg Although many properties , It only needs data, By deconstructing, we get the corresponding

原网站

版权声明
本文为[Create splendid -- hand in hand with you]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/200/202207170502599819.html