如何在Javscript中解构JSON数据

Question

提供此json数据，如何修改它以使用对象解构来获取参数对象的dob属性，请麻烦理解

{  
   "results":[  
      {  
         "gender":"female",
         "name":{  
            "title":"ms",
            "first":"emily",
            "last":"simmons"
         },
         "location":{  
            "street":"1514 preston rd",
            "city":"mackay",
            "state":"victoria",
            "postcode":3943,
            "coordinates":{  
               "latitude":"-82.6428",
               "longitude":"99.3586"
            },
            "timezone":{  
               "offset":"-5:00",
               "description":"Eastern Time (US & Canada), Bogota, Lima"
            }
         },
         "email":"emily.simmons@example.com",
         "login":{  
            "uuid":"4db43a8c-f811-4f66-9063-8de9af1b7ff4",
            "username":"brownlion857",
            "password":"girls",
            "salt":"Fff9zzxa",
            "md5":"4eb010fc1f3e9f72b6298b75cec001a1",
            "sha1":"086f0a1c0db596967033a77df62e21e6d407f647",
            "sha256":"d7f99aae053957d788fe17a80922877d04a491bd7ea00d7b6b41c94329468e12"
         },
         "dob":{  
            "date":"1992-10-20T03:47:03Z",
            "age":26
         },
         "registered":{  
            "date":"2012-02-25T19:05:12Z",
            "age":7
         },
         "phone":"09-1749-9293",
         "cell":"0490-139-057",
         "id":{  
            "name":"TFN",
            "value":"338334455"
         },
         "picture":{  
            "large":"https://randomuser.me/api/portraits/women/64.jpg",
            "medium":"https://randomuser.me/api/portraits/med/women/64.jpg",
            "thumbnail":"https://randomuser.me/api/portraits/thumb/women/64.jpg"
         },
         "nat":"AU"
      }
   ],
   "info":{  

   }
}

我做了这样的事情：

const displayBirthdate = ( {results: [{dob: {date, age } }]}) => 
{
}

有没有一种方法可以使获取函数的dob参数更简单？

Answer 1

您可以使用Destructuring assignment声明变量：

const json = {"results": [{"gender": "female","name": {"title": "ms","first": "emily","last": "simmons"},"location": {"street": "1514 preston rd","city": "mackay","state": "victoria","postcode": 3943,"coordinates": {  "latitude": "-82.6428",  "longitude": "99.3586"},"timezone": {  "offset": "-5:00",  "description": "Eastern Time (US & Canada), Bogota, Lima"}},"email": "emily.simmons@example.com","login": {"uuid": "4db43a8c-f811-4f66-9063-8de9af1b7ff4","username": "brownlion857","password": "girls","salt": "Fff9zzxa","md5": "4eb010fc1f3e9f72b6298b75cec001a1","sha1": "086f0a1c0db596967033a77df62e21e6d407f647","sha256": "d7f99aae053957d788fe17a80922877d04a491bd7ea00d7b6b41c94329468e12"},"dob": {"date": "1992-10-20T03:47:03Z","age": 26},"registered": {"date": "2012-02-25T19:05:12Z","age": 7},"phone": "09-1749-9293","cell": "0490-139-057","id": {"name": "TFN","value": "338334455"},"picture": {"large": "https://randomuser.me/api/portraits/women/64.jpg","medium": "https://randomuser.me/api/portraits/med/women/64.jpg","thumbnail": "https://randomuser.me/api/portraits/thumb/women/64.jpg"},"nat": "AU"}],"info": {}};
const {results: [{dob: {date, age}}]} = json;

console.log('date:', date);
console.log('age:', age);

根据评论：

• 我如何使其成为函数参数，例如dob？

const json = {"results": [{"gender": "female","name": {"title": "ms","first": "emily","last": "simmons"},"location": {"street": "1514 preston rd","city": "mackay","state": "victoria","postcode": 3943,"coordinates": {  "latitude": "-82.6428",  "longitude": "99.3586"},"timezone": {  "offset": "-5:00",  "description": "Eastern Time (US & Canada), Bogota, Lima"}},"email": "emily.simmons@example.com","login": {"uuid": "4db43a8c-f811-4f66-9063-8de9af1b7ff4","username": "brownlion857","password": "girls","salt": "Fff9zzxa","md5": "4eb010fc1f3e9f72b6298b75cec001a1","sha1": "086f0a1c0db596967033a77df62e21e6d407f647","sha256": "d7f99aae053957d788fe17a80922877d04a491bd7ea00d7b6b41c94329468e12"},"dob": {"date": "1992-10-20T03:47:03Z","age": 26},"registered": {"date": "2012-02-25T19:05:12Z","age": 7},"phone": "09-1749-9293","cell": "0490-139-057","id": {"name": "TFN","value": "338334455"},"picture": {"large": "https://randomuser.me/api/portraits/women/64.jpg","medium": "https://randomuser.me/api/portraits/med/women/64.jpg","thumbnail": "https://randomuser.me/api/portraits/thumb/women/64.jpg"},"nat": "AU"}],"info": {}};
const getDate = dob => ({date, age} = dob);

console.log('displayBirthdate:', getDate(json.results[0].dob));

Answer 2

U可以通过递归搜索道具名称来做到这一点

function getObject(theObject) {
        var result = null;
        if(theObject instanceof Array) {
            for(var i = 0; i < theObject.length; i++) {
                result = getObject(theObject[i]);
                if (result) {
                    break;
                }   
            }
        }
        else
        {
            for(var prop in theObject) {
                console.log(prop + ': ' + theObject[prop]);
                if(prop == 'dob') {

                        return theObject[prop];
                }
                if(theObject[prop] instanceof Object || theObject[prop] instanceof Array) {
                    result = getObject(theObject[prop]);
                    if (result) {
                        break;
                    }
                } 
            }
        }
        return result;
    }

Answer 3

您可以将解构与映射结合起来以获取更具可读性的代码：

const data = {
    "results": [{
        "gender": "female",
        "name": {
            "title": "ms",
            "first": "emily",
            "last": "simmons"
        },
        "location": {
            "street": "1514 preston rd",
            "city": "mackay",
            "state": "victoria",
            "postcode": 3943,
            "coordinates": {
                "latitude": "-82.6428",
                "longitude": "99.3586"
            },
            "timezone": {
                "offset": "-5:00",
                "description": "Eastern Time (US & Canada), Bogota, Lima"
            }
        },
        "email": "emily.simmons@example.com",
        "login": {
            "uuid": "4db43a8c-f811-4f66-9063-8de9af1b7ff4",
            "username": "brownlion857",
            "password": "girls",
            "salt": "Fff9zzxa",
            "md5": "4eb010fc1f3e9f72b6298b75cec001a1",
            "sha1": "086f0a1c0db596967033a77df62e21e6d407f647",
            "sha256": "d7f99aae053957d788fe17a80922877d04a491bd7ea00d7b6b41c94329468e12"
        },
        "dob": {
            "date": "1992-10-20T03:47:03Z",
            "age": 26
        },
        "registered": {
            "date": "2012-02-25T19:05:12Z",
            "age": 7
        },
        "phone": "09-1749-9293",
        "cell": "0490-139-057",
        "id": {
            "name": "TFN",
            "value": "338334455"
        },
        "picture": {
            "large": "https://randomuser.me/api/portraits/women/64.jpg",
            "medium": "https://randomuser.me/api/portraits/med/women/64.jpg",
            "thumbnail": "https://randomuser.me/api/portraits/thumb/women/64.jpg"
        },
        "nat": "AU"
    }],
    "info": {}
}

const [ dob ] = data.results.map(item => item.dob)

console.log(dob)
// {date: "1992-10-20T03:47:03Z", age: 26}