无法将对象作为参数传递

Posted 2023-05-09

【中文标题】无法将对象作为参数传递

【英文标题】：Unable to pass object as an argument

【发布时间】：2021-07-29 04:28:48

【问题描述】：

html 和内联 JS 代码：

<a onclick='show(user)'>$user.firstName + " " + user.lastName</a>

在这个显示函数中，我传递了一个具有 5-6 个属性的对象用户，但是当我使用调试器时，它没有将我显示为一个对象。

我也试过这个，这在调试器中显示为用户作为对象，但我收到未捕获的语法错误。

<a onclick='show($user)'>$user.firstName + " " + user.lastName</a>

我想将它作为对象传递，以便我可以利用它的属性。

const displayUsers = (users) => 
    const htmlString = users
        .map((user) => 
            debugger;
            return `
            <li>
                <a onclick='show(user)'>$user.firstName + " " + user.lastName</a>
                
            </li>
        `;
        )
        .join('');
    usersList.innerHTML = htmlString;

    console.log(users, 'list')
    // console.log(htmlString)
;
function show(user)

    alert(user);
 console.log( user.aonId);

;

【问题讨论】：

这是使用 HTML 字符串的缺点：您不能轻松地将复杂数据序列化到其中。我建议学习如何使用 DOM API 创建 DOM 元素和绑定事件处理程序。

是用户一个数组或一个对象。您可以在数组上使用 map 函数。

【参考方案1】：

如果你在按钮中设置数据属性，json字符串化，然后为你的所有按钮添加一个监听器，点击解析数据属性并访问它。

例子：

const displayUsers = (users) => 
  const htmlString = users
    .map((user) => 
      return `
            <li>
                <a data-user=$JSON.stringify(user)>$user.firstName + " " + user.lastName</a>  
            </li>
        `;
    )
    .join('');
  document.getElementById('content').innerHTML = htmlString;

;

displayUsers([
  firstName: 'George',
  lastName: 'Michael'
, 
  firstName: 'Bruce',
  lastName: 'Springsteen'
]);

const buttons = document.querySelectorAll('[data-user]');

buttons.forEach(function(button) 
  button.addEventListener("click", function show(event) 
    console.log(JSON.parse(event.currentTarget.dataset.user)); // <---- Use data 
  );
)

<div id="content">
</div>

【参考方案2】：

当您需要使用元素的方法或属性时，您应该求助于使用 DOM 方法创建元素，例如 Document.createElement()。

这将使您能够添加事件侦听器、引用值等。

以下示例循环遍历 users 数组中的每个用户，并创建您当前在字符串中具有的结构。附加了一个事件监听器，设置了文本并构建了元素。

最后，所有内容都收集在 DocumentFragment 实例中，它允许您在一次扫描中附加所有创建的用户元素以提高性能。

因为所有节点都一次插入到文档中，所以只会触发一次重排和渲染，而不是每个单独插入的节点都可能触发一次。

片段随后会附加到您的 usersList 元素中。

const displayUsers = (users) => 
  const fragment = new DocumentFragment();

  users.forEach(user => 
    const  firstName, lastName  = user;

    const listItem = document.createElement('li');
    const anchor = document.createElement('a');

    anchor.addEventListener('click', event => show(user, event));
    anchor.textContent = `$firstName $lastName`;

    listItem.append(anchor);
    fragment.append(listItem);
  );

  usersList.append(fragment);
;

【讨论】：

点击答案左上角的复选标记即可接受答案。这将使未来有相同问题的读者知道正确答案是什么，并给我们虚假的互联网积分作为奖励。