typeof! == „undefined” vs.! = null

Często widzę kod JavaScript, który sprawdza niezdefiniowane parametry w ten sposób:

if (typeof input !== "undefined") {
    // do stuff
}

Wydaje się to trochę marnotrawstwem, ponieważ obejmuje zarówno wyszukiwanie typu, jak i porównywanie ciągów, nie mówiąc już o szczegółowości. Jest to potrzebne, ponieważ undefinedmożna go zmienić.

Moje pytanie brzmi: w
jaki sposób ten kod jest lepszy od tego podejścia:

if (null != input) {
    // do stuff
}

O ile mi wiadomo, nie można na nowo zdefiniować null, więc nie pęknie niespodziewanie. Z powodu przymusu !=operatora operator sprawdza to zarówno undefinedi null... co często jest dokładnie tym, czego chcesz (np. Opcjonalnymi parametrami funkcji).

Jednak ta forma nie wydaje się powszechna, a nawet powoduje, że JSLint krzyczy na ciebie za użycie złego !=operatora.

Dlaczego jest to uważane za zły styl?

typeof jest bezpieczniejszy, ponieważ pozwala nigdy nie zadeklarować identyfikatora wcześniej:

if(typeof neverDeclared === "undefined") // no errors

if(neverDeclared === null) // throws ReferenceError: neverDeclared is not defined

Jeśli zmienna jest zadeklarowana (za pomocą varsłowa kluczowego, jako argument funkcji lub jako zmienna globalna), myślę, że najlepszym sposobem na to jest:

if (my_variable === undefined)

jQuery to robi, więc jest dla mnie wystarczająco dobry :-)

W przeciwnym razie będziesz musiał użyć, typeofaby uniknąć ReferenceError.

Jeśli spodziewasz się, że niezdefiniowane zostanie ponownie zdefiniowane, możesz owinąć swój kod w następujący sposób:

(function(undefined){
    // undefined is now what it's supposed to be
})();

Lub uzyskaj go za pośrednictwem voidoperatora:

const undefined = void 0;
// also safe

dobry sposób:

if(typeof neverDeclared == "undefined") //no errors

Ale najlepiej wyglądającym sposobem jest sprawdzenie za pomocą:

if(typeof neverDeclared === typeof undefined) //also no errors and no strings

Naprawdę nie powinieneś się martwić, że nazwa niezdefiniowana zostanie zmieniona. Jeśli ktoś zmieni niezdefiniowaną nazwę, będziesz miał o wiele więcej kłopotów niż tylko kilka, jeśli kontrole się nie powiodą. Jeśli naprawdę chcesz chronić swój kod, umieść go w IFFE (natychmiast wywołane wyrażenie funkcji) w następujący sposób:

(function($, Backbone, _, undefined) {
    //undefined is undefined here.
})(jQuery, Backbone, _);

Jeśli pracujesz ze zmiennymi globalnymi (co już jest niepoprawne) w środowisku przeglądarki, sprawdziłbym, czy nie są zdefiniowane w ten sposób:

if(window.neverDefined === undefined) {
    //Code works
}

Ponieważ zmienne globalne są częścią obiektu okna, możesz po prostu sprawdzić przed niezdefiniowanym zamiast rzutować na ciąg i porównywać ciągi.

Ponadto, dlaczego twoje zmienne nie są zdefiniowane? Widziałem dużo kodu, w którym sprawdzają istnienie zmiennych i wykonują na tej podstawie pewne działania. Ani razu nie widziałem, gdzie to podejście było prawidłowe.

Jeśli naprawdę martwisz się przedefiniowaniem niezdefiniowanego, możesz zabezpieczyć się przed tym za pomocą metody pomocniczej, takiej jak ta:

function is_undefined(value) {
   var undefined_check; // instantiate a new variable which gets initialized to the real undefined value
   return value === undefined_check;
}

To działa, ponieważ kiedy ktoś pisze undefined = "foo"tylko on pozwala na imię undefined odniesienie do nowej wartości, ale nie zmienia się wartość rzeczywistą undefined.

Możesz także użyć operatora void, aby uzyskać niezdefiniowaną wartość:

if (input !== void 0) {
    // do stuff    
}

(I tak, jak zauważono w innej odpowiedzi, spowoduje to błąd, jeśli zmienna nie zostanie zadeklarowana, ale ten przypadek można często wykluczyć przez kontrolę kodu lub przez refaktoryzację kodu, np. Użycie window.input !== void 0do testowania zmiennych globalnych lub dodawanie var input).

Natknąłem się na to, jeśli (typeof input !== 'undefined')w tym scenariuszu jest on używany do zapewnienia domyślnych parametrów funkcji:

function greet(name, greeting) {
  name = (typeof name !== 'undefined') ?  name : 'Student';
  greeting = (typeof greeting !== 'undefined') ?  greeting : 'Welcome';

  return `${greeting} ${name}!`;
}

greet(); // Welcome Student!
greet('James'); // Welcome James!
greet('Richard', 'Howdy'); // Howdy Richard!

ES6 zapewnia nowe sposoby wprowadzania domyślnych parametrów funkcji w ten sposób:

function greet(name = 'Student', greeting = 'Welcome') {
  return `${greeting} ${name}!`;
}

greet(); // Welcome Student!
greet('James'); // Welcome James!
greet('Richard', 'Howdy'); // Howdy Richard!

Jest to mniej gadatliwe i czystsze niż pierwsza opcja.

if (input == undefined) { ... }

działa dobrze. To nie jest oczywiście w nullporównaniu, ale zwykle uważają, że jeśli trzeba rozróżniać undefinedi null, faktycznie raczej trzeba rozróżniać undefinedi byle wartość false, więc

else if (input) { ... }

czy to.

Jeśli program przedefiniuje undefined, to i tak jest naprawdę braindead.

Jedynym powodem, dla którego mogę wymyślić kompatybilność z IE4, nie zrozumiałem undefinedsłowa kluczowego (które nie jest tak naprawdę słowem kluczowym, niestety), ale oczywiście mogą to być wartości undefined, więc musiałeś to mieć:

var undefined;

a powyższe porównanie działałoby dobrze.

W drugim przykładzie prawdopodobnie potrzebujesz podwójnych nawiasów, aby uszczęśliwić kłaczki?