Като разработчици, ние всички сме твърде запознати с предизвикателствата, които възникват при работа с условни изрази. Прекарваме часове в щателно изработване на if-else блокове, само за да открием пропуснати условия по време на прегледи на кода. Това може да бъде разочароващо и да отнеме много време.

За да подобрим нашите стандарти за кодиране, включихме фалшиви стойности и изрази. Това ни позволи да обработваме всички сценарии изчерпателно, като гарантираме, че нито един сценарий не се изплъзва през пукнатините.

В този блог ще ви насоча към практическото използване на фалшиви стойности и изрази, като ви покажа как оптимизират условния код и повишават качеството на вашето JavaScript програмиране. Нека да влезем веднага.

Какво представляват фалшиви стойности и изрази?

В JavaScript фалшивият израз ни позволява да оценим истинността или неистинността на дадена стойност.

Определени стойности се считат за „фалшиви“ или „истини“, когато се използват в условни изрази.

Фалшива стойност е стойност, която се счита за FALSE при оценяване на условни изрази. Фалшивите стойности включват null, undefined, NaN, 0 (нула) и празния низ "".

От друга страна, истинните ценности обхващат всичко останало, което не е фалшиво. Непразните низове, ненулевите числа и непразните масиви и обекти се считат за верни.

След като разберете разликата, можете да рационализирате своите условия и да подобрите ефективността на кода си.

Нека да видим три сценария, при които можем да използваме фалшиви стойности.

1. Опростяване на условните проверки

Да приемем, че трябва да проверите състоянието на полезния товар на отговора. Състоянието може да бъде недефинирано, нула, празен низ или дори конкретен низ като „успех“.

Традиционно бихме написали множество проверки if-else, за да се справим с всяко условие, както по-долу,

const payload = { status: undefined, name: "Ram" };

if (payload.status !== undefined) {
  console.log(payload.name);
}
if (payload.status !== null) {
  console.log(payload.name);
}
if (payload.status !== "") {
  console.log(payload.name);
}
if (payload.status == "some status") {
  console.log(payload.name);
}

Въпреки че горният код служи на целта, той е обемист и тромав.

С фалшиви изрази вашият код ще изглежда така,

if (payload.status) { // This single line can replace all the conditions above
  console.log(payload.name);
}

Сега, не е ли това по-елегантен начин от писането на 13 реда код?

В ситуации, в които стойността на status е несигурна, празен низ "", null, към конкретен низ като "success", можем да подобрим простотата на кода чрез прилагане на горния оператор.

2. Рационализиране на проверките на масива

Да приемем, че искате да проверите дължината на масив. Пишем следния код.

const fruits = [];
if (fruits.length > 0) {
  console.log(fruits[0]);
}

Въпреки че горният код върши работата, с помощта на фалшиви стойности можете да се справите много по-ефективно.

if (fruits.length) {
  console.log(fruits[0]);
}

Вместо да използваме fruits.length › 0, можем да използваме свойството .lengthдиректно в условния оператор. Тъй като нулата е фалшива стойност, кодовият блок няма да бъде изпълнен, когато масивът е празен.

3. Ефективно изобразяване на компоненти

Да приемем, че искате да изобразите компонент въз основа на дължината на масива. Често показваме съобщение, когато масивът е празен и пишем следното,

{
  fruits.length > 0 ? fruits.map((fruit) => <p>{fruit}</p>) : "No Fruits found";
}

Използвайки фалшиви стойности, вашият код се опростява като,

{
  fruits.length ? fruits.map((fruit) => <p>{fruit}</p>) : "No Fruits found";
}

Изключение:

Ако „плодове“ има първоначална стойност undefined, null или „“, можем да го обработваме по следния начин:

{
  fruits && fruits.length
    ? fruits.map((fruit) => <p>{fruit}</p>)
    : "No Fruits found";
}

Разгледайте допълнително:

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

https://www.sitepoint.com/javascript-truthy-falsy/

Въоръжени с тези нови прозрения, оставете вашите JavaScript проекти да процъфтяват с несравнима ефективност и четливост.