Javascript訪問對象字面量的嵌套屬性

Question

我通過在 Stack 上進行完整搜索，包括本頁面右側面板上的一些建議的類似問題，盡力不發布重復的主題，但找不到可以幫助我的體面帖子。 這是我的搜索查詢的部分列表：

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

Javascript 集合

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

帶有嵌套對象字面量的 javascript 訪問鏈

在 for 循環中訪問嵌套 Javascript 文字的屬性) Javascript - 在變量聲明中使用花括號將多個變量分配給對象屬性

現在開始我的問題：

我在一個數組中有一個嵌套定義對象的集合，我無法訪問這些對象，以便我可以從中為導航欄構建一個錨點列表。 我創建了一個函數來提升數組，這樣我就可以把它放在我的代碼中的任何地方，但這不是問題（我不認為？）。

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