javascript - 使用数组将预期事件参数解构为仅目标属性。查找方法

Question

我是一名新手，正在接受挑战，但我陷入了困境。下面是问题

创建一个 getSelectedUser 箭头函数。它应该采用 userId 参数并在 users 集合上使用 Array.find 函数来查找并返回选定的用户对象。 .find 调用应采用内联箭头函数并对其参数进行解构以获取 Users 数组中的 id 属性。

displaySelectedUser 是事件处理程序，我需要该函数将预期的事件参数解构为目标属性。

接下来，displaySelectedUser 应使用 target 的某个属性调用 getSelectedUser，该属性表示更改事件中 SELECT 元素的选定值。最后，将 .getSelectedUser 调用的结果分配给用户变量。

接下来，使用Object.keys(..)获取用户的属性集合。将其分配给属性变量。

使用数组 .forEach 函数迭代属性，并在 UI 中显示属性。给定的属性(例如 *Age)具有相应的带有 data-age-value 属性的 SPAN 元素。您可以使用 ES6 模板字符串构建针对该属性的 SPAN 的查询选择器，然后用它查询 DOM。您还需要确保仅在 DOM 查询成功时才更新 UI

这是我的代码

 const users = [];

  const getSelectedUser = (userId) => {

    return users.find(({id}) => id === userId);
  };


  const displaySelectedUser = ({event}) => {
     const selectUser = event.target; 
     const value = selectUser.value; 

    getSelectedUser(id); 
  };

  const powerupTheUI = () => {
    document.querySelector('select').addEventListener('change', displaySelectedUser);

    document.querySelector('#oracle').addEventListener('click',  letsCalculateBMI);

  };

  const displayUsers = (users) => {
    users.forEach(user => {
      const select = document.querySelector('select');
      const option = document.createElement('option');

      option.text = user.name; 
      option.value = user.id;
      select.appendChild(option);
    });

  };

  const fetchAndDisplayUsers = () => {
    users.push({
      age: 40,
      weight: 75,
      height: 6,
      country: 'Nigeria',
      name: 'Charles Odili',
      id: 'dfhb454768DghtF'
    });

    users.push({
      age: 40,
      weight: 75,
      height: 6,
      country: 'Nigeria',
      name: 'Peter Odili',
      id: 'gydf4'
    });

    displayUsers(users);
  };

  const startApp = () => {

    powerupTheUI();
    fetchAndDisplayUsers();
  };

  startApp();

Answer 1

根据你的问题，这应该可以。

   const displaySelectedUser = ({target}) => {
      const user = getSelectedUser(target.value);
      const properties = Object.keys(user);
      console.log('props',properties)
      properties.forEach(prop => {
      const span = document.querySelector(`span[data-${prop}-value]`);
          if(span) {
            span.textContent = user[prop];   
          }
      }) 

    }