Як перевірити наявність невизначеної чи нульової змінної у JavaScript?

У нашому коді JavaScript ми часто використовуємо таку схему коду

if (typeof(some_variable) != 'undefined' && some_variable != null)
{
    // Do something with some_variable
}

Чи є менш дослівний спосіб перевірки, який має той самий ефект?

На думку деяких форумів та літератури, що говорять просто, наступне повинно мати той же ефект.

if (some_variable)
{
    // Do something with some_variable
}

На жаль, Firebug оцінює таке твердження як помилку під час виконання, коли some_variableвоно не визначене, тоді як перший - це просто добре. Це лише (небажана) поведінка Firebug чи дійсно є якась різниця між цими двома способами?

Ви повинні розрізняти випадки:

1. Змінні можуть бути undefinedабо незадекларовані . Ви отримаєте помилку, якщо отримаєте доступ до незадекларованої змінної в будь-якому іншому, крім typeof.

if(typeof someUndeclaredVar == whatever) // works
if(someUndeclaredVar) // throws error

Змінна, яка була оголошена, але не ініціалізована, є undefined.

let foo;
if (foo) //evaluates to false because foo === undefined

2. Не визначені властивості , як someExistingObj.someUndefProperty. Невизначене властивість не видає помилки і просто повертається undefined, що при перетворенні в бульне значення оцінюється в false. Тож, якщо вам не байдуже, 0а falseвикористання if(obj.undefProp)- це нормально. На цьому факті є загальна ідіома:

   value = obj.prop || defaultValue

   що означає "якщо objмає властивість prop, призначте його value, інакше призначте значення за замовчуванням defautValue".

   Деякі люди вважають цю поведінку заплутаною, стверджуючи, що це призводить до важко знайти помилок, і рекомендують inзамість цього використовувати оператора

   value = ('prop' in obj) ? obj.prop : defaultValue

Я думаю, що найефективніший спосіб перевірити на "значення є nullчи undefined" є

if ( some_variable == null ){
  // some_variable is either null or undefined
}

Отже, ці два рядки рівнозначні:

if ( typeof(some_variable) !== "undefined" && some_variable !== null ) {}
if ( some_variable != null ) {}

Примітка 1

Як було зазначено в питанні, короткий варіант вимагає, щоб some_variableце було оголошено, інакше буде викинуто ReferenceError. Однак у багатьох випадках використання можна припустити, що це безпечно:

перевірити наявність необов'язкових аргументів:

function(foo){
    if( foo == null ) {...}

перевірити властивості існуючого об'єкта

if(my_obj.foo == null) {...}

З іншого боку, typeofможна мати справу з недекларованими глобальними змінними (просто повертається undefined). Але, як пояснив Альссенде, ці випадки слід звести до мінімуму з поважних причин.

Примітка 2

Цей - ще коротший - варіант не рівнозначний:

if ( !some_variable ) {
  // some_variable is either null, undefined, 0, NaN, false, or an empty string
}

тому

if ( some_variable ) {
  // we don't get here if some_variable is null, undefined, 0, NaN, false, or ""
}

Примітка 3

Взагалі рекомендується використовувати ===замість ==. Пропоноване рішення є винятком із цього правила. Перевірки синтаксису JSHint навіть надає eqnullопцію з цієї причини.

З посібника зі стилю jQuery :

Суворі перевірки рівності (===) повинні використовуватися на користь ==. Єдиний виняток - це при перевірці на невизначеність та null шляхом null.

// Check for both undefined and null values, for some important reason. 
undefOrNull == null;

Перевірка нуля при нормальній рівності також поверне справжнє для невизначеного.

if (window.variable == null) alert('variable is null or undefined');

У нових стандартах JavaScript, таких як ES5 та ES6, ви можете просто сказати

> Boolean(0) //false
> Boolean(null)  //false
> Boolean(undefined) //false

всі повертають false, що схоже на перевірку Python порожніх змінних. Тож якщо ви хочете написати умовну логіку навколо змінної, просто скажіть

if (Boolean(myvar)){
   // Do something
}

тут "null" або "порожній рядок" або "undefined" будуть оброблятися ефективно.

Якщо ви спробуєте посилатися на незадекларовану змінну, у всіх реалізаціях JavaScript буде видана помилка.

Властивості об'єктів не підпадають під однакові умови. Якщо властивість об'єкта не визначена, помилка не буде видана, якщо ви спробуєте отримати доступ до неї. Тож у цій ситуації ви можете скоротити:

 if (typeof(myObj.some_property) != "undefined" && myObj.some_property != null)

до

if (myObj.some_property != null)

З огляду на це та факт, що глобальні змінні доступні як властивості глобального об’єкта ( windowу випадку браузера), ви можете використовувати наступне для глобальних змінних:

if (window.some_variable != null) {
    // Do something with some_variable
}

У локальних областях завжди корисно переконатися, що змінні оголошені у верхній частині кодового блоку, це дозволить заощадити на повторному використанні typeof.

По-перше, ви повинні бути чітко зрозумілими, що ви протестуєте. У JavaScript є всілякі неявні конверсії, які дозволять вам подолати, та два різні типи порівняння рівності: ==і ===.

Функція, test(val)яка тестує для nullабо undefinedповинна мати такі характеристики:

 test(null)         => true
 test(undefined)    => true
 test(0)            => false
 test(1)            => false
 test(true)         => false
 test(false)        => false
 test('s')          => false
 test([])           => false

Подивимося, яка з ідей тут насправді проходить наш тест.

Ці роботи:

val == null
val === null || val === undefined
typeof(val) == 'undefined' || val == null
typeof(val) === 'undefined' || val === null

Вони не працюють:

typeof(val) === 'undefined'
!!val

Я створив запис jsperf, щоб порівняти правильність та ефективність цих підходів. Наразі результати є непереконливими, оскільки недостатньо пробігів у різних браузерах / платформах. Будь ласка, знайдіть хвилину, щоб запустити тест на своєму комп’ютері!

В даний час здається, що простий val == nullтест дає найкращі показники. Це також майже найкоротший. val != nullЯкщо ви хочете доповнити, тест може бути відхилений .

це єдиний випадок, коли ==слід використовувати:

if (val == null) console.log('val is null or undefined')

Оскільки єдиної повної та правильної відповіді немає, спробую підсумувати:

Загалом, вираз:

if (typeof(variable) != "undefined" && variable != null)

не може бути спрощено, тому що variableможе бути недекларовано, тому пропускання цього typeof(variable) != "undefined"призведе до ReferenceError. Але ви можете спростити вираз відповідно до контексту :

Якщо variableце глобальний , ви можете спростити:

if (window.variable != null)

Якщо він локальний , ви, ймовірно, можете уникнути ситуацій, коли ця змінна не буде оголошена, а також спростити:

if (variable != null)

Якщо це об'єктна властивість , вам не доведеться турбуватися про ReferenceError:

if (obj.property != null)

Ви можете просто перевірити, чи має змінна значення чи ні. Значення,

if( myVariable ) {
//mayVariable is not :
//null
//undefined
//NaN
//empty string ("")
//0
//false

}

Якщо ви не знаєте, чи існує змінна (це означає, якщо вона була задекларована), слід звернутися до оператора typeof. напр

if( typeof myVariable !== 'undefined' ) {
    // myVariable will get resolved and it is defined
}

Я зробив це за допомогою цього методу

збережіть ідентифікатор у деякій змінній

var someVariable = document.getElementById("someId");

тоді використовуйте, якщо умова

if(someVariable === ""){
 //logic
} else if(someVariable !== ""){
 //logic
}

Як згадується в одній з відповідей, ви можете пощастити, якщо ви будете говорити про змінну, яка має глобальну сферу застосування. Як ви можете знати, змінні, які ви визначаєте в усьому світі, як правило, додаються до об’єкта Windows. Ви можете скористатися цим фактом, тому скажемо, що ви отримуєте доступ до змінної під назвою bleh, просто використовуйте подвійний перевернутий оператор (!!)

!!window['bleh'];

Це поверне помилкове значення, поки bleh не було оголошено ТА присвоєно значення.

ось ще один спосіб використання методу Array include () :

[undefined, null].includes(value)

незалежно ууу не визначений або порожній, вона повертає істину

if (typeof yyy == 'undefined' || !yyy) {
    console.log('yes');
} else {
    console.log('no');
}

так

if (!(typeof yyy == 'undefined' || !yyy)) {
    console.log('yes');
} else {
    console.log('no');
}

ні

Відкрийте інструменти розробника у своєму браузері та просто спробуйте код, показаний на зображенні нижче.

Для того, щоб зрозуміти, давайте проаналізуємо, що буде поверненням значення Javascript Engine при перетворенні невизначених, null і '' (також порожній рядок). Ви можете безпосередньо перевірити те саме на консолі розробника.

Ви можете бачити, що всі перетворюються на помилкові, значить, всі ці три припускають, що JavaScript не існує. Тож вам не потрібно чітко перевіряти всі три у своєму коді, як показано нижче.

if (a === undefined || a === null || a==='') {
    console.log("Nothing");
} else {
    console.log("Something");
}

Також хочу зазначити ще одне.

Яким буде результат Булева (0)?

Звичайно хибні. Це створить помилку у вашому коді, коли 0 - дійсне значення у вашому очікуваному результаті. Тому, будь ласка, переконайтеся, що ви це перевіряєте, коли пишете код.

Подібно до того, що у вас є, ви могли зробити щось подібне

if (some_variable === undefined || some_variable === null) { do stuff }

Це приклад дуже рідкісного випадку, коли його рекомендується використовувати ==замість ===. Вираз somevar == nullповернеться true для undefinedта null, але false для всього іншого (помилка, якщо змінна не буде оголошена).

Використовуючи !=волю, перегорне результат, як очікувалося.

Сучасні редактори не попередитимуть про використання ==чи !=оператор null, оскільки це майже завжди бажана поведінка.

Найпоширеніші порівняння:

undeffinedVar == null     // true
obj.undefinedProp == null // true
null == null              // true
0 == null                 // false
'0' == null               // false
'' == null                // false

Спробуйте самі:

let undefinedVar;
console.table([
    { test : undefinedVar,     result: undefinedVar     == null },
    { test : {}.undefinedProp, result: {}.undefinedProp == null },
    { test : null,             result: null             == null },
    { test : false,            result: false            == null },
    { test : 0,                result: 0                == null },
    { test : '',               result: ''               == null },
    { test : '0',              result: '0'              == null },
]);

Тестування nullity ( if (value == null)) або non-nullity ( if (value != null)) є менш дослідним, ніж тестування статусу визначення змінної.

Більше того, тестування if (value)(або if( obj.property)) для забезпечення існування вашої змінної (або властивості об'єкта) не вдається, якщо вона визначена з булевим falseзначенням. Caveat emptor :)

Обидва значення можна легко відрізнити за допомогою оператора суворого порівняння:

Приклад роботи за адресою:

http://www.thesstech.com/tryme?filename=nullandundefined

Приклад коду:

function compare(){
    var a = null; //variable assigned null value
    var b;  // undefined
    if (a === b){
        document.write("a and b have same datatype.");
    }
    else{
        document.write("a and b have different datatype.");
    }   
}

Якщо метою оператора if є перевірка значень nullабо undefinedзначень перед присвоєнням значення змінній, ви можете скористатися Nullish Coalescing Operator , нарешті доступний на JavaScript, хоча підтримка браузера обмежена. За даними каніуси підтримується лише 48,34% браузерів (станом на квітень 2020 року).

const a = some_variable ?? '';

Це забезпечить, що змінна буде присвоєна порожній рядку (або будь-якому іншому за замовчуванням), якщо some_variableє nullабо undefined.

Цей оператор найбільше підходить для вашого випадку використання, оскільки він не повертає значення за замовчуванням для інших типів фальшивого значення, таких як 0і ''.

Ви повинні визначити функцію цієї форми:

validate = function(some_variable){
    return(typeof(some_variable) != 'undefined' && some_variable != null)
}

У ES5 або ES6, якщо вам потрібно перевірити це кілька разів:

const excluded = [null, undefined, ''];

if (!exluded.includes(varToCheck) {
  // it will bee not null, not undefined and not void string
}

З Рамдою ви можете просто зробити R.isNil(yourValue) Лодаша, а інші бібліотеки-помічники мають ту саму функцію.