Javascript 访问对象字面量的嵌套属性

Question

我已尽力不发布重复的主题，方法是在 Stack 上进行完整搜索，包括此页面右侧面板上的一些建议 类似问题，但找不到合适的帖子可以帮我。以下是我的搜索查询的部分列表：

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

Javascript collection

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);
}