如何搜索构造函数对象属性？ JS答案

【问题标题】：How do I search a constructor objects properties? JS如何搜索构造函数对象属性？ JS
【发布时间】：2022-01-19 17:03:31
【问题描述】：

看看我制作 fam 对象的方式。我可以搜索此对象的用户名，我的网页将使用此代码显示其权重。据我所知，通过构造函数作为 Dog() 来制作对象更方便。我希望我的函数能够遍历通过 Dog() 构造函数创建的所有对象，例如 doggo 和 doggy，并在用户搜索狗名时在我的网页上显示其权重。如果可能的话，我该怎么做？

function Dog(name, weight) {
    this.name = name;
    this.weight = weight;
}

let doggo = new Dog("Spot", "10kg");
let doggy = new Dog("Snoop", "20kg");

const fam = [
    {
        name: "one",
        weight: "1kg"
    },
    {
        name: "two",
        weight: "2kg"
    },
];

function find() {
    var x = String(field.value);
    for (var i = 0; i<fam.length; i++) {
        if (fam[i].name === x) {
            para.textContent = fam[i].weight;
        }
    }
}
btn.addEventListener("click", find);

【问题讨论】：

将您的对象放入数组var dogs =[]; dogs.push(doggo, doggy);，然后对其进行迭代。您还可以考虑在if 块内添加break 关键字，以退出for 块并停止迭代整个数组。
只写const fam = [doggo, doggy]; 或const fam = [new Dog(…), new Dog(…)]; 而不是那些对象字面量。

标签： javascript for-loop object search

【解决方案1】：

在前端执行此操作的一种方法（不使用数据库）是将所有对象（在本例中为狗数据）添加到数组中，然后使用filter() 选择搜索的对象。最后将数据返回给事件监听器并创建 HTML 输出。

const input = document.getElementById('input'),
      btn = document.getElementById('btn'),
      container = document.getElementById('container');
      
var dogs = [
  new Dog("spot", "10kg"),
  new Dog("snoop", "20kg"),
  new Dog("snoopy", "100kg")
]

function Dog(name, weight) {
  this.name = name
  this.weight = weight
}

function find(name) {
   let info = dogs.filter(dog => dog.name === name)
   return info[0]
}

btn.addEventListener("click", function(){ 
  let dogInfo = find(input.value), 
      html = `name: ${dogInfo.name} <br> weight: ${dogInfo.weight}`
  container.innerHTML = html
})

<label>Dog name: </label>
<input id="input" type="text" value="spot">
<button id="btn">Show info</button>
<br><br>
<div id="container"></div>

【讨论】：