Равенство¶

Первое, с чем нужно быть осторожным в JavaScript, это разница между == и ===. Поскольку JavaScript пытается быть устойчивым к ошибкам программирования, == пытается сделать приведение типов между двумя переменными, т.е. конвертирует строку в число так, чтобы вы могли произвести сравнение с числом как показано ниже:

1
2

console.log(5 == '5'); // true   , TS Error
console.log(5 === '5'); // false , TS Error

Тем не менее, выбор, который делает JavaScript не всегда идеален. В примере ниже первое выражение ложно, потому что "" и "0" являются строками и очевидно не равны. Но во втором примере 0 и пустая строка ("") ложные (то есть ведут себя как false) и, следовательно, равны в соответствии с ==. Оба выражения ложны, если вы используете ===.

1
2
3
4
5

console.log('' == '0'); // false
console.log(0 == ''); // true

console.log('' === '0'); // false
console.log(0 === ''); // false

По аналогии с == и ===, существует != против !==.

Поэтому совет профессионала: всегда используйте === и !==, кроме проверки на null, о которой мы расскажем позже.

Структурное равенство¶

Если вы хотите сравнить два объекта на структурное равенство, то использовать ==/=== недостаточно, то есть:

1
2

console.log({ a: 123 } == { a: 123 }); // False
console.log({ a: 123 } === { a: 123 }); // False

Чтобы делать такие проверки, используйте пакет deep-equal:

1
2
3

import * as deepEqual from 'deep-equal';

console.log(deepEqual({ a: 123 }, { a: 123 })); // True

Тем не менее, довольно часто вам не нужна глубокая проверка, а всё, что вам на самом деле нужно, это проверка по какому-нибудь id:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

type IdDisplay = {
    id: string;
    display: string;
};
const list: IdDisplay[] = [
    {
        id: 'foo',
        display: 'Foo Select',
    },
    {
        id: 'bar',
        display: 'Bar Select',
    },
];

const fooIndex = list.map((i) => i.id).indexOf('foo');
console.log(fooIndex); // 0

Комментарии