JS技术问询：从对象数组取特定对象及解决paper-dialog显示异常

问题1：如何从对象数组中获取指定对象并推入另一个数组？ #

这其实很简单，核心就是用数组的查找方法定位到目标对象，再把它添加到目标数组里就行。我给你举几个常用的场景例子：

场景1：获取单个匹配的对象 #

如果你只想找第一个符合条件的对象，用find()方法最适合：

// 源对象数组
const allVehicles = [
  { id: 1, vehiclename: 'Car', type: 'sedan' },
  { id: 2, vehiclename: 'Truck', type: 'heavy' },
  { id: 3, vehiclename: 'Motorcycle', type: 'light' }
];
// 目标数组
const checkarray = [];

// 找到vehiclename为'Truck'的对象
const targetVehicle = allVehicles.find(vehicle => vehicle.vehiclename === 'Truck');

// 一定要做个判断，防止找不到对象的情况（避免push undefined）
if (targetVehicle) {
  checkarray.push(targetVehicle);
}

场景2：获取多个匹配的对象 #

如果要找所有符合条件的对象，用filter()方法：

// 找到所有type为'light'的车辆
const lightVehicles = allVehicles.filter(vehicle => vehicle.type === 'light');

// 把这些对象批量推入目标数组，用扩展运算符(...)避免把整个数组作为单个元素push进去
checkarray.push(...lightVehicles);

问题2：paper-dialog中仅展示checkarray的vehiclename，点击checkbox却只显示Truck？ #

你遇到的问题大概率是模板渲染时的绑定错误，导致所有checkbox都绑定到了同一个值上。我帮你一步步修正：

第一步：正确用dom-repeat遍历checkarray #

首先要确保在paper-dialog里用dom-repeat正确遍历你的checkarray，并且每个checkbox绑定对应对象的vehiclename：

<paper-dialog id="vehicleDialog">
  <!-- 用as属性给当前遍历项起个清晰的名字，比如vehicle -->
  <template is="dom-repeat" items="{{checkarray}}" as="vehicle">
    <!-- 绑定当前vehicle的vehiclename作为checkbox的显示文本 -->
    <paper-checkbox on-change="handleCheckboxClick">
      {{vehicle.vehiclename}}
    </paper-checkbox>
  </template>
</paper-dialog>

第二步：编写正确的事件处理函数 #

点击checkbox时，要能获取到当前点击的车辆对象，并且输出checkarray里所有对象的vehiclename：

handleCheckboxClick(e) {
  // 通过e.model获取当前遍历的车辆对象
  const currentVehicle = e.model.vehicle;
  console.log('当前点击的车辆对象:', currentVehicle);

  // 输出checkarray中所有对象的vehiclename
  const allVehicleNames = this.checkarray.map(vehicle => vehicle.vehiclename);
  console.log('checkarray全部车辆名称:', allVehicleNames);
}

排查常见错误点 #

• 检查checkarray的结构：确保数组里的每个元素都是独立的对象，比如不要出现所有对象的vehiclename都被设置成'Truck'的情况；
• 不要忽略dom-repeat的as属性：如果没给当前项命名，模板里的引用可能会出错，导致所有checkbox显示同一个值；
• 事件处理时不要硬编码值：比如不要在函数里直接写console.log('Truck')，一定要通过e.model获取当前项的属性。

内容的提问来源于stack exchange，提问作者Karthik