* ng使用'==='进行对象比较

Question

Going through the Angular tutorial (Tour of Heroes), I've stumbled upon a comparison between two objects. Since this is not a common practice I've tried multiple comparisons inside the class and all returned false , except if the compared are hero[0] and selectedHero , the returned value is true , assuming we assigned selectedHero with hero[0] .

Tour of Heores part of code where comparison occurs: 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>

Why is this comparison returning true? What exactly is being compared here? I haven't found any explanation yet.

Answer 1

=== is checking the value (if the subject is a number or a boolean), the type and the object reference. If you create 2 objects with identical attributes like the following, it will return false :

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

because it's not the same reference. So in your case, selectedHero === hero will be true if your 2 objects has the same reference.

EDIT :

Another precision is that you can copy object reference in another :

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

and then if you change attribute of one the reference, it will change for both :

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

Answer 2

Every time you click on li elemnt onSelect is executed and set the variable selectedHero with the elemnt hero from heroes array,heroes containe objects so the assaignment is just set selectedHero to be refrence to the current elemnt(hero) and when we try to comapre( == or ===) object the compare if the point to the same refrence or not

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

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

Answer 3

=== on an Object checks the address of the object and not the value. If you want more information you can look up how pointers work.

But basically if (hero === selectedHero) returns true then they point to the same memory address. Therefore, if you change the value of selectedHero, it will also have change the value of hero[0].