*ngFor object comparison using '==='

Question

通过 Angular 教程（英雄之旅），我偶然发现了两个对象之间的比较。由于这不是一种常见的做法，我在 class 中尝试了多次比较，并且都返回了 false，除非比较的是 hero[0] 和 selectedHero，返回的值为true，假设我们用 hero[0].

分配了 selectedHero

发生比较的 Heores 部分代码之旅：Link to StackBlitz

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

为什么这个比较返回真？这里到底在比较什么？我还没有找到任何解释。

Answer 1

=== 正在检查值（如果主题是数字或布尔值）、类型和对象引用。如果您创建 2 个具有相同属性的对象，如下所示，它将 return false :

let a = { test: 'test' };
let b = { test: 'test' };
console.log(a === b); // gives false

因为它不是同一个引用。因此，在您的情况下，如果您的 2 个对象具有相同的引用，selectedHero === hero 将为真。

编辑：

另一个精度是你可以在另一个中复制对象引用:

let a = { test: 'test' };
let b = a;
console.log(a === b); // gives true

然后，如果您更改其中一个参考的属性，则两者都会更改：

let a = { test: 'test' };
let b = a;
a.test = 'foo';
console.log(b.test) // gives foo

Answer 2

每次你点击 li elemnt onSelect 并设置变量 selectedHero 为 heroes 数组中的 elemnt hero，heroes 包含对象，所以赋值只是将 selectedHero 设置为参考当前元素（英雄）以及当我们尝试比较（== 或 ===）对象时比较是否指向相同的引用

let a = {};
let b = {};
let c = a;

console.log(a === b); // false 
console.log(a === c); // true

Answer 3

=== 在对象上检查对象的地址而不是值。如果您想了解更多信息，可以查看指针的工作原理。

但基本上 if (hero === selectedHero) returns true 那么它们指向相同的内存地址。因此，如果你改变selectedHero的值，它也会改变hero[0]的值。

*ngFor object comparison using '==='

*ngFor object comparison using '==='

comparison

object

typescript

ngfor

angular