Равенство

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

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

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

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

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

Обратите внимание, что string == number и string === number являются ошибками компиляции в TypeScript, поэтому, как правило, вам не нужно об этом беспокоиться.

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

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

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

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

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

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

import * as deepEqual from 'deep-equal';

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

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

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

Комментарии