Question

我尽力不通过在Stack上进行完整搜索来发布重复的主题，包括本页右侧面板中的一些建议的类似问题，但找不到可以发布的文章帮我。以下是我的搜索查询的部分列表：

https://stackoverflow.com/search?q=javascript+access+deep+object+literals（第一次搜索查询）

https://stackoverflow.com/search?q=javascript+access+nested+object+literals（第二次搜索查询）

javascript access chain with nested object literals

Accessing Properties of nested Javascript literals in a for loop ） Javascript - Assigning multiple variables to object properties using curly braces in variable declaration

现在问我的问题：

我在数组中有一组嵌套定义对象，我很难访问，因此我可以为我的导航栏构建一个锚点列表。我创建了一个提升数组的函数，所以我可以把它放在我的代码中的任何地方，但这不是问题（我不这么认为？）。

function hoistNav() {
    const nav = [];
    nav[0] = {text: 'HOME', att: {href: 'home.html', class: 'nav', id: 'zero'}};
    nav[1] = {text: 'POSTS', att: {href: 'posts.html', class: 'nav', id: 'one'}};
    nav[2] = {text: 'CONTACT', att: {href: 'con.html', class: 'nav', id: 'two'}};
    return nav;
}

我想通过访问obj.att中的所有属性来创建链接，如下所示：

function createAnchor(obj) {
    let el = document.createElement('a');
    el.textContent = obj.text;
    for(let key in obj.att){
        el.setAttribute(key, [key]);
    }
    return el;
}

我还需要创建一个包含其他函数的链接列表，但为简单起见，将忽略这些链接。典型的样本运行应该是这样的：

let nav = hoistNav();// returns an array of nested objects

let obj = nav[0];// a sample run

createAnchor(obj);// should return: <a href="home.html" class="nav" id="zero">HOME</a>

现在上面的代码对我来说并不适用。我究竟做错了什么？还有最佳实践列出和解构所有属性的方法，包括与此类似的对象的嵌套属性吗？

Answer 1

该行

el.setAttribute(key, [key]);

尝试将属性设置为包含键作为其唯一条目的数组（因此将href设置为"href"，因为数组将被强制转换为字符串）。你可能意味着

el.setAttribute(key, obj.att[key]);
// ------------------^^^^^^^

直播示例：

function hoistNav() {
    const nav = [];
    nav[0] = {text: 'HOME', att: {href: 'home.html', class: 'nav', id: 'zero'}};
    nav[1] = {text: 'POSTS', att: {href: 'posts.html', class: 'nav', id: 'one'}};
    nav[2] = {text: 'CONTACT', att: {href: 'con.html', class: 'nav', id: 'two'}};
    return nav;
}

function createAnchor(obj) {
    let el = document.createElement('a');
    el.textContent = obj.text;
    for(let key in obj.att){
        el.setAttribute(key, obj.att[key]);
    }
    return el;
}

let nav = hoistNav();

let obj = nav[0];

let anchor = createAnchor(obj);
document.body.appendChild(anchor);
console.log(anchor.outerHTML);

附注：不太确定hoistNav是什么，你可以让nav全局代码（但实际上不是全局代码）：

"use strict"; // Strict mode to ensure correct handling of function decl in block

// Scoping block to avoid creating globals
{

  // Note use of literal notation
  const nav = [
    {text: 'HOME', att: {href: 'home.html', class: 'nav', id: 'zero'}},
    {text: 'POSTS', att: {href: 'posts.html', class: 'nav', id: 'one'}},
    {text: 'CONTACT', att: {href: 'con.html', class: 'nav', id: 'two'}}
  ];

  function createAnchor(obj) {
      let el = document.createElement('a');
      el.textContent = obj.text;
      for (let key in obj.att) {
          el.setAttribute(key, obj.att[key]);
      }
      return el;
  }

  // Sample run
  let obj = nav[0];
  let anchor = createAnchor(obj);
  document.body.appendChild(anchor);
  console.log(anchor.outerHTML);
}

Javascript访问对象文字的嵌套属性

1 个答案: