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

Question

我通过在 Stack 上进行全面搜索，包括本页右侧面板上的一些建议类似问题，尽最大努力避免 post 重复主题但找不到可以帮助我的像样的 post。这是我的搜索查询的部分列表：

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

Javascript collection

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

javascript access chain with nested object literals

) 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 访问对象文字的嵌套属性

Javascript accessing nested properties of an object literal

javascript

javascript-objects

object-literal

destructuring

client-side-scripting