ES6对象比较方法及Angular Material复选框匹配勾选实现

我来帮你解决这两个问题——ES6对象/数组比较，以及Angular Material复选框的自动勾选：

一、ES6中对象的比较 #

ES6没有内置的对象深度比较函数，我们需要根据需求实现浅比较或深比较：

1. 浅比较（仅比较第一层属性值） #

如果你的对象没有嵌套结构，或者只需要比较第一层属性，可以用这个方法：

function isShallowEqual(objA, objB) {
  // 先判断是否是同一个引用
  if (Object.is(objA, objB)) return true;
  
  // 排除非对象/null的情况
  if (typeof objA !== 'object' || objA === null || 
      typeof objB !== 'object' || objB === null) {
    return false;
  }
  
  // 对比属性数量
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) return false;
  
  // 逐个对比属性值
  for (const key of keysA) {
    if (!objB.hasOwnProperty(key) || !Object.is(objA[key], objB[key])) {
      return false;
    }
  }
  return true;
}

• Object.is()用来精准比较值（比如区分+0和-0，NaN等于自身），比===更严谨。

2. 深比较（支持嵌套对象） #

如果对象有多层嵌套，需要递归对比：

function isDeepEqual(objA, objB) {
  if (Object.is(objA, objB)) return true;
  
  if (typeof objA !== 'object' || objA === null || 
      typeof objB !== 'object' || objB === null) {
    return false;
  }
  
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) return false;
  
  for (const key of keysA) {
    if (!objB.hasOwnProperty(key) || !isDeepEqual(objA[key], objB[key])) {
      return false;
    }
  }
  return true;
}

二、对象数组比较+Angular Material复选框自动勾选 #

结合你的示例，我们需要把arr1（对应模板里的groups）和arr2中匹配的对象对应的复选框勾选。最优方案是提前在组件中预处理匹配状态，避免模板里写复杂逻辑：

步骤1：组件中预处理匹配标记 #

// app.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html'
})
export class AppComponent {
  groups = [ { "id":"1", "name":"operator" }, { "id":"2", "name":"admins" } ];
  arr2 = [ { "id":"1", "name":"operator" }, { "id":"3", "name":"client" } ];
  // 用Set存储arr2中存在的id，快速判断匹配
  matchedIds = new Set(this.arr2.map(item => item.id));

  // 如果需要完整对象匹配（而非仅id），可以这样处理：
  // matchedItems = new Set(this.arr2.map(item => JSON.stringify(item)));
  // groupsWithCheck = this.groups.map(group => ({
  //   ...group,
  //   isChecked: this.matchedItems.has(JSON.stringify(group))
  // }));

  assignGroups(event: any, groupId: string) {
    // 你的勾选变更逻辑
    console.log(`Group ${groupId} checked: ${event.checked}`);
  }
}

步骤2：模板中绑定勾选状态 #

修改[checked]属性，根据预处理的匹配结果判断：

<!-- app.html -->
<div class="col" *ngFor="let group of groups; let i = index"> 
  <mat-checkbox 
    [value]="group.id" 
    labelPosition="after" 
    [checked]="matchedIds.has(group.id)" 
    (change)="assignGroups($event, group.id)"
  > 
    {{ group.name }} 
  </mat-checkbox> 
</div>

为什么不用你原来的forEach+some？ #

你原来的代码只是打印了匹配的对象，但没有把匹配状态存储下来供模板使用。用Set存储匹配的id，has()方法的查询效率是O(1)，比每次在模板里调用arr2.some(...)（O(n)）更高效，尤其是数组元素较多时。

如果需要完整对象匹配（比如id和name都要一致），可以用上面注释里的方法——把对象序列化为字符串存入Set，或者用前面写的isShallowEqual函数来判断，然后给每个group添加isChecked属性，模板直接绑定[checked]="group.isChecked"即可。

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