Az egyik első téma, amellyel a JavaScript (vagy bármely más programozási nyelv) elsajátításakor találkozik, operátorok.
A leggyakoribb operátorok az aritmetikai, logikai és összehasonlító operátorok. De tudta, hogy a JavaScript inoperátorral rendelkezik?
Ha nem tette meg, ne izguljon. Nemrég találkoztam vele, miközben megoldást kerestem egy problémára a Google-on.
Ebben a cikkben megtudhatja, hogy pontosan mit csinál a JavaScript inoperátor, mikor és mikor kell használni.
Mi is pontosan a JavaScript az operátorban?
A JavaScript inoperátor segítségével ellenőrizhető, hogy létezik-e egy adott tulajdonság egy objektumban vagy annak örökölt tulajdonságaiban (más szóval, prototípus láncában). Az inoperátor visszatér, trueha a megadott tulajdonság létezik.
A JavaScript prototípuslánc az, hogy az objektumok vagy objektumpéldányok hogyan férhetnek hozzá olyan tulajdonságokhoz és módszerekhez, amelyek eredetileg nem az övék voltak. Ezek az objektumok öröklik a konstruktoraikban vagy prototípusaikban meghatározott tulajdonságokat és módszereket, amelyekhez a __proto__tulajdonukon keresztül lehet hozzájutni .
Ez a cikk feltételezi, hogy alapvető ismerete van az objektumokról, azok létrehozásának módjáról, mire használhatók és a JavaScript-öröklés működéséről. Ha nem, akkor ez az MDN-ről szóló cikk segít.
Mikor kell használni a JavaScriptet az operátorban
Annak ellenőrzése, hogy létezik-e tulajdonság egy objektumon
const car = { make: 'Toyota', model:'Camry', year: '2018', start: function() { console.log(`Starting ${this.make} ${this.model}, ${this.year}`); } } 'make' in car // Returns true. 'start' in car // Returns true. 'Toyota' in car // Returns false. 'Toyota' is not a property name, but a value.Annak ellenőrzése, hogy egy tulajdonságot örökölt-e egy objektum.
Használjuk az ES6 osztály szintaxisát egy objektum konstruktor létrehozásához. Ez vonatkozik a függvény konstruktorokra is:
class Car { constructor(make, model, year) { this.make = make; this.model = model; this.year = year; } start() { console.log(`Starting ${this.make} ${this.model}, ${this.year}`); } } const toyota = new Car('Toyota', 'Camry', '2018'); 'start' in toyota; /* Returns true as toyota is an instance of the Car object constructor. The toyota object therefore inherits all properties of the Car constructor. */ 'toString' in toyota; /* Returns true. toString is a method property of the Object type, of which the Car constructor is an instance of. */Annak ellenőrzése, hogy létezik-e index / kulcs egy tömbben.
Kíváncsi lehet, mivel megállapítottuk, hogy a JavaScript inoperátor objektumokkal használható, miért használhatjuk tömbökkel is?
Nos, egy tömb valójában egy prototípus (példány) Object. Valójában a JavaScript-ben minden a Objecttípus példánya .
Lehet, hogy őrültnek tűnik, de a böngésző konzolján futtathat egy egyszerű programot a megerősítéshez.
Először definiáljon egy tömböt, és erősítse meg, hogy annak Objecttípusa van-e az instanceofoperátor segítségével:
const number = [2, 3, 4, 5]; number instanceof Object // Returns true Még mindig kétséges? Írja numberbe a konzolba, és nyomja meg az Enter billentyűt, majd nyissa meg a kimenetet.
Észre fogja venni a tulajdonságok listáját, amelyek közül az egyik __proto__rámutat Array. Ezt is megnyitva és lefelé haladva egy másik __proto__tulajdonsághoz jutunk , amelynek értéke Object.
Ez azt mutatja, hogy a numbertömb a Arraytípus példánya, amely a Objecttípus példánya .
Most térjen vissza az inoperátor használatához:
const number = [2, 3, 4, 5]; 3 in number // Returns true. 2 in number // Returns true. 5 in number // Returns false because 5 is not an existing index on the array but a value; 'filter' in number /* Returns true because filter is a method property on the Array type of which the number array is an instance of. The number array inherits the filter property.*/Annak ellenőrzése, hogy létezik-e tulajdonság egy Html elemen
Kirupa cikkében: Ellenőrizze, hogy érintőképernyős készüléket használ-e, ezt a funkciót emeli ki:
function isTouchSupported() { var msTouchEnabled = window.navigator.msMaxTouchPoints; var generalTouchEnabled = "ontouchstart" in document.createElement("div"); if (msTouchEnabled || generalTouchEnabled) { return true; } return false; } Ez a funkció akkor tér vissza, trueha olyan eszközön van, amely támogatja az érintést, és visszatér, falseha olyan eszközön van, amely nem támogatja az érintést, ellenőrizve, hogy vannak-e tulajdonságai window.navigator.msMaxTouchPointsés ontouchstartvannak-e. Ezek a tulajdonságok csak olyan eszközökön léteznek, amelyeken érintés engedélyezve van.
Nagyon egyszerű!
Fókuszálhatunk a kiemelt vonalra. Emlékszik arra, hogyan állapítottuk meg, hogy az inoperátor visszatér, trueha a megadott tulajdonság létezik egy objektumban? A JavaScript-ben használt HTML elemek valójában a Objecttípus példányává válnak , innen ered a "Document Object Model" vagy a DOM név.
Persze lehet, hogy valamiféle bizonyíték nélkül nem hinnél nekem. Mint korábban, írjunk be néhány parancsot a konzolba.
Hozzon létre egy divelemet, és sorolja fel annak tulajdonságait console.dir():
const element = document.createElement('div'); console.dir(element); Ezután diva konzolon megjelenik az elem és annak tulajdonságai.
Nyissa meg a legördülő menüt, és észreveszi, hogy annak van egy __proto__tulajdonsága HtmlDivElement. Nyissa meg, és talál egy másik __proto__tulajdonságot HtmlElement,Ezután Element, Node, Eventtargetés végül Object.
Futtassa még:
element instanceof ObjectEz visszatér true, megmutatva, hogy az divelem a Objecttípus példánya, ezért az inoperátor használható rajta.
Következtetés
Megtudta a nem túl népszerű JavaScript inoperátort, amelyet a tulajdonságok ellenőrzésére használnak egy objektumon vagy Objecttípuspéldányon. Ennek jól kell jönnie az ellenőrzési logika írásakor.
Ha tetszett ez a cikk, akkor mindenképpen kedvelni fogja a codewithlinda.com blogom többi cikkét. Ott kezdőbarát cikkeket teszek közzé a frontend fejlesztés nélküli technikai szakzsargonról (amennyire csak lehetséges).