8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何访问和处理嵌套对象、数组或 JSON?

user2657189 1月前

61 0

我有一个包含对象和数组的嵌套数据结构。如何提取信息,即访问特定或多个值(或键)?例如:var data = { code: 42, i...

我有一个包含对象和数组的嵌套数据结构。如何提取信息,即访问特定值或多个值(或键)?

例如:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

我如何访问 name 中的第二项 items

帖子版权声明 1、本帖标题:如何访问和处理嵌套对象、数组或 JSON?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由user2657189在本站《dictionary》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 像 JavaScript 一样在 Python 中访问嵌套对象和数组

    • 以下 OLD_JSObject 的类片段 https://pypi.org/project/jsobject/
    • 此软件包在 3.4 版后不再有效
    • 但是这个包需要一些额外的修改才能适合我
    • Object 允许访问嵌套对象值和打印对象的函数
    class OLD_JSObject(dict):
        def __getattr__(self, k):
            try:
                return self[k]
            except:
                return self.__getitem__(k)
    
        def __setattr__(self, k, v):
            if type(v) == dict:
                self[k] = self.__class__(v)
            else:
                self[k] = v
    
        def merge(self, mapping):
            for key in mapping:
                if key not in self:
                    self[key] = mapping[key]
                    continue
    
                if isinstance(self[key], dict) and isinstance(mapping[key], dict):
                    self[key].merge(mapping[key])
                elif isinstance(self[key], list) and isinstance(mapping[key], list):
                    self[key].extend(mapping[key])
                elif self[key] == mapping[key]:
                    pass
                else:
                    self[key] = mapping[key]
                    # raise Exception('Conflict')
    
    
    def Object(data):
        if isinstance(data, dict):
            attrs = {}
            for key, value in data.items():
                attrs[key] = Object(value)
            return OLD_JSObject(attrs)
        else:
            return data
    

    enter image description here enter image description here

  • 这个问题是关于 JavaScript 的,而不是 Python。不确定是否有针对 Python 的同等问题。

  • 一种 Python 式、递归式和函数式的方法来解开任意 JSON 树:

    handlers = {
        list:  iterate,
        dict:  delve,
        str:   emit_li,
        float: emit_li,
    }
    
    def emit_li(stuff, strong=False):
        emission = '<li><strong>%s</strong></li>' if strong else '<li>%s</li>'
        print(emission % stuff)
    
    def iterate(a_list):
        print('<ul>')
        map(unravel, a_list)
        print('</ul>')
    
    def delve(a_dict):
        print('<ul>')
        for key, value in a_dict.items():
            emit_li(key, strong=True)
            unravel(value)
        print('</ul>')
    
    def unravel(structure):
        h = handlers[type(structure)]
        return h(structure)
    
    unravel(data)
    

    其中 数据 是一个 Python 列表(从 JSON 文本字符串解析而来):

    data = [
        {'data': {'customKey1': 'customValue1',
               'customKey2': {'customSubKey1': {'customSubSubKey1': 'keyvalue'}}},
      'geometry': {'location': {'lat': 37.3860517, 'lng': -122.0838511},
                   'viewport': {'northeast': {'lat': 37.4508789,
                                              'lng': -122.0446721},
                                'southwest': {'lat': 37.3567599,
                                              'lng': -122.1178619}}},
      'name': 'Mountain View',
      'scope': 'GOOGLE',
      'types': ['locality', 'political']}
    ]
    
  • 另一个有用的小型 JS 库,可以以熟悉的方式操作和访问对象,非常有用。npmjs.com/package/selectql.js

  • 您需要做的事情非常简单,可以通过递归来实现:

    const json_object = {
            "item1":{
                "name": "apple",
                "value": 2,
            },
            "item2":{
                "name": "pear",
                "value": 4,
            },
            "item3":{
                "name": "mango",
                "value": 3,
                "prices": {
                    "1": "9$",
                    "2": "59$",
                    "3": "1$"
                }
            }
        }
        
        function walkJson(json_object){
            for(obj in json_object){
                if(typeof json_object[obj] === 'string'){
                    console.log(`${obj}=>${json_object[obj]}`);
                }else{
                    console.log(`${obj}=>${json_object[obj]}`);
                    walkJson(json_object[obj]);
                }
            }           
        }
        
        walkJson(json_object);
    
  • @JonathanJ.Pecany 我已经编辑了该示例以使其可运行并展示如何在浏览器中使用它。

  • 你绝对可以 .com/q/49562978/1030413 - 我喜欢的这个包可以做很多事情。所以根据你的使用情况,最好有这个包。我知道设置它可能需要一些工作

  • node.js 是服务器端,javascript 是客户端。不,你不能在 \'浏览器 javascript\' 中使用 npm 包,只有我试过。我主要是为了好玩才尝试的。但即使是 node.js,你基本上也是在说一种漫长而复杂的方法。@timnavigate 的答案实际上可以解决问题。

  • Nodejs 是 javascript。但如果我理解你的评论正确的话:我以为你可以使用 babel 等在“浏览器 javascript”中使用任何 npm 包?

  • 我非常确定那是 node.js,他想知道如何在 javascript 中做到这一点。如果他确实想使用 node.js,他会把它放在他的标签中。但这对我有帮助,因为我正在尝试寻找在 node.js 中执行此操作的答案。

  • 对象扫描的 object-scan .

    当访问单个条目时,此答案实际上并没有比 vanilla javascript 提供太多好处。但是,同时与多个字段交互时,此答案的性能会更高。

    以下是如何与单个字段进行交互的方法

    // const objectScan = require('object-scan');
    
    const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] };
    
    const get = (haystack, needle) => objectScan([needle], {
      abort: true,
      rtn: 'value'
    })(haystack);
    
    const set = (haystack, needle, value) => objectScan([needle], {
      abort: true,
      rtn: 'bool',
      filterFn: ({ parent, property }) => {
        parent[property] = value;
        return true;
      }
    })(haystack);
    
    console.log(get(data, 'items[1].name'));
    // => bar
    
    console.log(set(data, 'items[1].name', 'foo2'));
    // => true
    console.log(data);
    // => { code: 42, items: [ { id: 1, name: 'foo' }, { id: 2, name: 'foo2' } ] }
    .as-console-wrapper {max-height: 100% !important; top: 0}
    <script src="https://bundle.run/[email protected]"></script>

    免责声明 的作者 object-scan

    以下是如何同时与多个字段进行交互的方法

    // const objectScan = require('object-scan');
    
    const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] };
    
    const get = (haystack, ...needles) => objectScan(needles, {
      joined: true,
      rtn: 'entry'
    })(haystack);
    
    const set = (haystack, actions) => objectScan(Object.keys(actions), {
      rtn: 'count',
      filterFn: ({ matchedBy, parent, property }) => {
        matchedBy.forEach((m) => {
          parent[property] = actions[m];
        })
        return true;
      }
    })(haystack);
    
    console.log(get(data, 'items[0].name', 'items[1].name'));
    // => [ [ 'items[1].name', 'bar' ], [ 'items[0].name', 'foo' ] ]
    
    console.log(set(data, {
      'items[0].name': 'foo1',
      'items[1].name': 'foo2'
    }));
    // => 2
    console.log(data);
    // => { code: 42, items: [ { id: 1, name: 'foo1' }, { id: 2, name: 'foo2' } ] }
    .as-console-wrapper {max-height: 100% !important; top: 0}
    <script src="https://bundle.run/[email protected]"></script>

    免责声明 的作者 object-scan


    以下是如何通过 id 搜索在深度嵌套的对象中找到实体的方法(如评论中所问)

    // const objectScan = require('object-scan');
    
    const myData = { code: 42, items: [{ id: 1, name: 'aaa', items: [{ id: 3, name: 'ccc' }, { id: 4, name: 'ddd' }] }, { id: 2, name: 'bbb', items: [{ id: 5, name: 'eee' }, { id: 6, name: 'fff' }] }] };
    
    const findItemById = (haystack, id) => objectScan(['**(^items$).id'], {
      abort: true,
      useArraySelector: false,
      rtn: 'parent',
      filterFn: ({ value }) => value === id
    })(haystack);
    
    console.log(findItemById(myData, 5));
    // => { id: 5, name: 'eee' }
    .as-console-wrapper {max-height: 100% !important; top: 0}
    <script src="https://bundle.run/[email protected]"></script>

    免责声明 的作者 object-scan

  • 引用 13
    // const path = 'info.value[0].item'
    // const obj = { info: { value: [ { item: 'it works!' } ], randominfo: 3 }  }
    // getValue(path, obj)
    
    export const getValue = ( path , obj) => {
      const newPath = path.replace(/\]/g, "")
      const arrayPath = newPath.split(/[\[\.]+/) || newPath;
    
      const final = arrayPath.reduce( (obj, k) => obj ?  obj[k] : obj, obj)
      return final;
    }
    
  • 如果您尝试在 JSON 字符串中查找路径,则可以将数据转储到工具中以确定路径。

    如果需要, JSON.parse(json) 可以使用 JSON 进行解析

    chrome console hovering an object key shows the path to get there on hover

    您也可以将路径复制到剪贴板:

    chrome console about to copy property path for object to clipboard using the context menu on a node

    一旦剪贴板上有了路径,您通常需要通过像 [0] 循环一样替换偏移索引器来迭代数组。然后,您可以 [i] 在其位置使用循环索引,或使用 forEach 样式函数替换整个属性和索引。

    另一个工具是 https://jsonpathfinder.com ,您可以在其中单击 GUI 元素。它将像 Chrome 一样为元素的路径生成 JS 语法。

    我编写了一个简单的工具,您可以在此处或 https://ggorlen.github.io/json-dive/ 。将您的 JSON 字符串粘贴到文本区域中,然后单击节点将其路径复制到剪贴板。它有一个选项,可以使用括号而不是点来生成 Python/PHP 样式的索引。

    /* code minified to make the tool easier to run without having to scroll */                                                         let bracketsOnly=!1,lastHighlighted={style:{}};const keyToStr=t=>!bracketsOnly&&/^[a-zA-Z_$][a-zA-Z$_\d]*$/.test(t)?`.${toHTML(t)}`:`[&quot;${toHTML(t)}&quot;]`,pathToData=t=>`data-path="data${t.join("")}"`,htmlSpecialChars={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;","\t":"\\t","\r":"\\r","\n":"\\n"," ":"&nbsp;"},toHTML=t=>(""+t).replace(/[&<>"'\t\r\n ]/g,t=>htmlSpecialChars[t]),makeArray=(t,e)=>`\n  [<ul ${pathToData(e)}>\n    ${t.map((t,a)=>{e.push(`[${a}]`);const n=`<li ${pathToData(e)}>\n        ${pathify(t,e).trim()},\n      </li>`;return e.pop(),n}).join("")}\n  </ul>]\n`,makeObj=(t,e)=>`\n  {<ul ${pathToData(e)}>\n    ${Object.entries(t).map(([t,a])=>{e.push(keyToStr(t));const n=`<li ${pathToData(e)}>\n        "${toHTML(t)}": ${pathify(a,e).trim()},\n      </li>`;return e.pop(),n}).join("")}\n  </ul>}\n`,pathify=(t,e=[])=>Array.isArray(t)?makeArray(t,e):"object"==typeof t&&t!=null?makeObj(t,e):toHTML("string"==typeof t?`"${t}"`:t),defaultJSON='{\n  "corge": "test JSON... \\n   asdf\\t asdf",\n  "foo-bar": [\n    {"id": 42},\n    [42, {"foo": {"baz": {"ba  r<>!\\t": true, "4quux": "garply"}}}]\n  ]\n}',$=document.querySelector.bind(document),$$=document.querySelectorAll.bind(document),resultEl=$("#result"),pathEl=$("#path"),tryToJSON=t=>{try{resultEl.innerHTML=pathify(JSON.parse(t)),$("#error").innerText=""}catch(t){resultEl.innerHTML="",$("#error").innerText=t}},copyToClipboard=t=>{const e=document.createElement("textarea");e.textContent=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)},flashAlert=(t,e=2e3)=>{const a=document.createElement("div");a.textContent=t,a.classList.add("alert"),document.body.appendChild(a),setTimeout(()=>a.remove(),e)},handleClick=t=>{t.stopPropagation(),copyToClipboard(t.target.dataset.path),flashAlert("copied!"),$("#path-out").textContent=t.target.dataset.path},handleMouseOut=t=>{lastHighlighted.style.background="transparent",pathEl.style.display="none"},handleMouseOver=t=>{pathEl.textContent=t.target.dataset.path,pathEl.style.left=`${t.pageX+30}px`,pathEl.style.top=`${t.pageY}px`,pathEl.style.display="block",lastHighlighted.style.background="transparent",(lastHighlighted=t.target.closest("li")).style.background="#0ff"},handleNewJSON=t=>{tryToJSON(t.target.value),[...$$("#result *")].forEach(t=>{t.addEventListener("click",handleClick),t.addEventListener("mouseout",handleMouseOut),t.addEventListener("mouseover",handleMouseOver)})};$("textarea").addEventListener("change",handleNewJSON),$("textarea").addEventListener("keyup",handleNewJSON),$("textarea").value=defaultJSON,$("#brackets").addEventListener("change",t=>{bracketsOnly=!bracketsOnly,handleNewJSON({target:{value:$("textarea").value}})}),handleNewJSON({target:{value:defaultJSON}});
    /**/                                                                                       *{box-sizing:border-box;font-family:monospace;margin:0;padding:0}html{height:100%}#path-out{background-color:#0f0;padding:.3em}body{margin:0;height:100%;position:relative;background:#f8f8f8}textarea{width:100%;height:110px;resize:vertical}#opts{background:#e8e8e8;padding:.3em}#opts label{padding:.3em}#path{background:#000;transition:all 50ms;color:#fff;padding:.2em;position:absolute;display:none}#error{margin:.5em;color:red}#result ul{list-style:none}#result li{cursor:pointer;border-left:1em solid transparent}#result li:hover{border-color:#ff0}.alert{background:#f0f;padding:.2em;position:fixed;bottom:10px;right:10px}
    <!-- -->                                                                                                    <div class="wrapper"><textarea></textarea><div id="opts"><label>brackets only: <input id="brackets"type="checkbox"></label></div><div id="path-out">click a node to copy path to clipboard</div><div id="path"></div><div id="result"></div><div id="error"></div></div>

    未压缩版本(也可在 GitHub ):

    let bracketsOnly = false;
    let lastHighlighted = {style: {}};
    
    const keyToStr = k =>
      !bracketsOnly && /^[a-zA-Z_$][a-zA-Z$_\d]*$/.test(k) 
        ? `.${toHTML(k)}`
        : `[&quot;${toHTML(k)}&quot;]`
    ;
    const pathToData = p => `data-path="data${p.join("")}"`;
    
    const htmlSpecialChars = {
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      '"': "&quot;",
      "'": "&#039;",
      "\t": "\\t",
      "\r": "\\r",
      "\n": "\\n",
      " ": "&nbsp;",
    };
    const toHTML = x => ("" + x)
      .replace(/[&<>"'\t\r\n ]/g, m => htmlSpecialChars[m])
    ;
    
    const makeArray = (x, path) => `
      [<ul ${pathToData(path)}>
        ${x.map((e, i) => {
          path.push(`[${i}]`);
          const html = `<li ${pathToData(path)}>
            ${pathify(e, path).trim()},
          </li>`;
          path.pop();
          return html;
        }).join("")}
      </ul>]
    `;
    const makeObj = (x, path) => `
      {<ul ${pathToData(path)}>
        ${Object.entries(x).map(([k, v]) => {
          path.push(keyToStr(k));
          const html = `<li ${pathToData(path)}>
            "${toHTML(k)}": ${pathify(v, path).trim()},
          </li>`;
          path.pop();
          return html;
        }).join("")}
      </ul>}
    `;
    
    const pathify = (x, path=[]) => {
      if (Array.isArray(x)) {
        return makeArray(x, path);
      }
      else if (typeof x === "object" && x !== null) {
        return makeObj(x, path);
      }
      
      return toHTML(typeof x === "string" ? `"${x}"` : x);
    };
    
    const defaultJSON = `{
      "corge": "test JSON... \\n   asdf\\t asdf",
      "foo-bar": [
        {"id": 42},
        [42, {"foo": {"baz": {"ba  r<>!\\t": true, "4quux": "garply"}}}]
      ]
    }`;
    
    const $ = document.querySelector.bind(document);
    const $$ = document.querySelectorAll.bind(document);
    const resultEl = $("#result");
    const pathEl = $("#path");
    
    const tryToJSON = v => {
      try {
        resultEl.innerHTML = pathify(JSON.parse(v));
        $("#error").innerText = "";
      }
      catch (err) {
        resultEl.innerHTML = "";
        $("#error").innerText = err;
      }
    };
    
    const copyToClipboard = text => {
      const ta = document.createElement("textarea");
      ta.textContent = text;
      document.body.appendChild(ta);
      ta.select();
      document.execCommand("copy");
      document.body.removeChild(ta);
    };
    
    const flashAlert = (text, timeoutMS=2000) => {
      const alert = document.createElement("div");
      alert.textContent = text;
      alert.classList.add("alert");
      document.body.appendChild(alert);
      setTimeout(() => alert.remove(), timeoutMS);
    };
    
    const handleClick = e => {
      e.stopPropagation();
      copyToClipboard(e.target.dataset.path);
      flashAlert("copied!");
      $("#path-out").textContent = e.target.dataset.path;
    };
    
    const handleMouseOut = e => {
      lastHighlighted.style.background = "transparent";
      pathEl.style.display = "none";
    };
    
    const handleMouseOver = e => {
      pathEl.textContent = e.target.dataset.path;
      pathEl.style.left = `${e.pageX + 30}px`;
      pathEl.style.top = `${e.pageY}px`;
      pathEl.style.display = "block";
      lastHighlighted.style.background = "transparent";
      lastHighlighted = e.target.closest("li");
      lastHighlighted.style.background = "#0ff";
    };
    
    const handleNewJSON = e => {
      tryToJSON(e.target.value);
      [...$$("#result *")].forEach(e => {
        e.addEventListener("click", handleClick);
        e.addEventListener("mouseout", handleMouseOut);
        e.addEventListener("mouseover", handleMouseOver);
      });
    };
    $("textarea").addEventListener("change", handleNewJSON);
    $("textarea").addEventListener("keyup", handleNewJSON);
    $("textarea").value = defaultJSON;
    $("#brackets").addEventListener("change", e => {
      bracketsOnly = !bracketsOnly;
      handleNewJSON({target: {value: $("textarea").value}});
    });
    handleNewJSON({target: {value: defaultJSON}});
    * {
      box-sizing: border-box;
      font-family: monospace;
      margin: 0;
      padding: 0;
    }
    
    html {
      height: 100%;
    }
    
    #path-out {
      background-color: #0f0;
      padding: 0.3em;
    }
    
    body {
      margin: 0;
      height: 100%;
      position: relative;
      background: #f8f8f8;
    }
    
    textarea {
      width: 100%;
      height: 110px;
      resize: vertical;
    }
    
    #opts {
      background: #e8e8e8;
      padding: 0.3em;
    }
    #opts label {
      padding: 0.3em;
    }
    
    #path {
      background: black;
      transition: all 0.05s;
      color: white;
      padding: 0.2em;
      position: absolute;
      display: none;
    }
    
    #error {
      margin: 0.5em;
      color: red;
    }
    
    #result ul {
      list-style: none;
    }
    
    #result li {
      cursor: pointer;
      border-left: 1em solid transparent;
    }
    #result li:hover {
      border-color: #ff0;
    }
    
    .alert {
      background: #f0f;
      padding: 0.2em;
      position: fixed;
      bottom: 10px;
      right: 10px;
    }
    <div class="wrapper">
      <textarea></textarea>
      <div id="opts">
        <label>
          brackets only: <input id="brackets" type="checkbox">
        </label>
      </div>
      <div id="path-out">click a node to copy path to clipboard</div>
      <div id="path"></div>
      <div id="result"></div>
      <div id="error"></div>
    </div>

    这并不能代替 学习如何钓鱼 ,但一旦你学会了,可以节省时间。

  • 这就是我所做的事情。

     let groups = [
            {
                id:1,
                title:"Group 1",
                members:[
                    {
                        id:1,
                        name:"Aftab",
                        battry:'10%'
                    },
                    {
                        id:2,
                        name:"Jamal",
                    },
                    {
                        id:3,
                        name:"Hamid",
                    },
                    {
                        id:4,
                        name:"Aqeel",
                    },
                ]
            },
            {
                id:2,
                title:"Group 2",
                members:[
                    {
                        id:1,
                        name:"Aftab",
                        battry:'10%'
                    },
                    {
                        id:2,
                        name:"Jamal",
                        battry:'10%'
                    },
                    {
                        id:3,
                        name:"Hamid",
                    },
                   
                ]
            },
            {
                id:3,
                title:"Group 3",
                members:[
                    {
                        id:1,
                        name:"Aftab",
                        battry:'10%'
                    },
                    
                    {
                        id:3,
                        name:"Hamid",
                    },
                    {
                        id:4,
                        name:"Aqeel",
                    },
                ]
            }
        ]
        
        groups.map((item) => {
          //  if(item.id == 2){
            item.members.map((element) => {
                 if(element.id == 1){
                     element.battry="20%"
                 }
             })
            //}
        })
        
        groups.forEach((item) => {
            item.members.forEach((item) => {
                console.log(item)
        })
        })
    
  • MRX 1月前 0 只看Ta
    引用 16

    您可以使用语法 jsonObject.key 来访问该值。如果您想从数组中访问值,则可以使用语法 jsonObjectArray[index].key .

    以下是访问各种值的代码示例,以便让您了解。

    var data = {
        code: 42,
        items: [{
            id: 1,
            name: 'foo'
        }, {
            id: 2,
            name: 'bar'
        }]
    };
    
    // if you want 'bar'
    console.log(data.items[1].name);
    
    // if you want array of item names
    console.log(data.items.map(x => x.name));
    
    // get the id of the item where name = 'bar'
    console.log(data.items.filter(x => (x.name == "bar") ? x.id : null)[0].id);
  • jQuery 的 grep 函数允许您过滤数组:

    var data = {
        code: 42,
        items: [{
            id: 1,
            name: 'foo'
        }, {
            id: 2,
            name: 'bar'
        }]
    };
    
    $.grep(data.items, function(item) {
        if (item.id === 2) {
            console.log(item.id); //console id of item
            console.log(item.name); //console name of item
            console.log(item); //console item object
            return item; //returns item object
        }
    
    });
    // Object {id: 2, name: "bar"}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  • 动态方法

    在下面的 deep(data,key) 函数中,您可以使用任意 key 字符串 - 在您的情况下 items[1].name (您可以在任何级别使用数组符号 [i] ) - 如果键无效,则返回未定义。

    let deep = (o,k) => k.split('.').reduce((a,c,i) => {
        let m=c.match(/(.*?)\[(\d*)\]/);
        if(m && a!=null && a[m[1]]!=null) return a[m[1]][+m[2]];
        return a==null ? a: a[c];
    },o);
    
    // TEST
    
    let key = 'items[1].name' // arbitrary deep-key
    
    let data = {
        code: 42,
        items: [{ id: 11, name: 'foo'}, { id: 22, name: 'bar'},]
    };
    
    console.log( key,'=', deep(data,key) );
  • 在 2020 年,您可以使用 @babel/plugin-proposal-optional-chaining 非常容易地访问对象中的嵌套值。

     const obj = {
     foo: {
       bar: {
         baz: class {
       },
      },
     },
    };
    
    const baz = new obj?.foo?.bar?.baz(); // baz instance
    
    const safe = new obj?.qux?.baz(); // undefined
    const safe2 = new obj?.foo.bar.qux?.(); // undefined
    

    https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

    https://github.com/tc39/proposal-optional-chaining

  • 我觉得提问者应该不只关心单层嵌套的对象,所以我给出了下面的示例来演示如何访问深层嵌套的 json 对象的节点。好吧,让我们找到 id 为 '5' 的节点。

    var data = {
      code: 42,
      items: [{
        id: 1,
        name: 'aaa',
        items: [{
            id: 3,
            name: 'ccc'
          }, {
            id: 4,
            name: 'ddd'
          }]
        }, {
        id: 2,
        name: 'bbb',
        items: [{
            id: 5,
            name: 'eee'
          }, {
            id: 6,
            name: 'fff'
          }]
        }]
    };
    
    var jsonloop = new JSONLoop(data, 'id', 'items');
    
    jsonloop.findNodeById(data, 5, function(err, node) {
      if (err) {
        document.write(err);
      } else {
        document.write(JSON.stringify(node, null, 2));
      }
    });
    <script src="https://rawgit.com/dabeng/JSON-Loop/master/JSONLoop.js"></script>
返回
作者最近主题: