Unul dintre primele subiecte pe care le veți întâlni atunci când învățați JavaScript (sau orice alt limbaj de programare) sunt operatori.
Cei mai comuni operatori sunt operatorii aritmetici, logici și de comparație. Dar știați că JavaScript are un in
operator?
Dacă nu ați făcut-o, nu vă îngrijorați. Tocmai am întâlnit-o recent în timp ce căutam o soluție la o problemă pe Google.
În acest articol, veți afla exact ce este JavaScript in
operatorul face, când să-l folosească și cum să-l folosească.
Conţinut
Ce este exact JavaScript în operator?
JavaScript in
operatorul este utilizat pentru a verifica dacă există o proprietate specificată într-un obiect sau în proprietățile sale moștenite (cu alte cuvinte, lanțul său de prototip). in
operatorul se întoarce true
dacă proprietatea specificată există.
Lanțul prototip JavaScript este modul în care obiectele sau instanțele de obiect au acces la proprietăți și metode care nu erau inițial ale lor. Aceste obiecte moștenesc proprietăți și metode definite în constructorii sau prototipurile lor, care pot fi accesate prin intermediul lor __proto__
proprietate.
Acest articol presupune că aveți o înțelegere de bază despre ce sunt obiectele, cum să le creați, pentru ce sunt utilizate și cum funcționează moștenirea JavaScript. Dacă nu, acest articol despre MDN ar trebui să ajute.
Când se utilizează JavaScript în operator
Pentru a verifica dacă există o proprietate pe un obiect
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.
Pentru a verifica dacă o proprietate este moștenită de un obiect.
Să folosim sintaxa clasei ES6 pentru a crea un constructor de obiecte. Acest lucru s-ar aplica și constructorilor de funcții:
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. */
Pentru a verifica dacă există un index / cheie pe o matrice.
S-ar putea să vă întrebați, deoarece am stabilit că JavaScript in
operatorul poate fi folosit cu obiecte, de ce îl putem folosi și cu tablouri?
Ei bine, o matrice este de fapt un prototip (instanță) al Object
tip. De fapt, totul în JavaScript este o instanță a Object
tip.
Acest lucru poate părea nebunesc, dar permite rularea unui program simplu în consola browserului pentru a confirma.
Mai întâi, definiți o matrice și confirmați dacă este o instanță a Object
tastați folosind instanceof
operator:
const number = [2, 3, 4, 5];
number instanceof Object // Returns true
Încă aveți dubii? Tip number
în consolă și apăsați Enter, apoi deschideți ieșirea.
Veți observa o listă de proprietăți, dintre care una este __proto__
care indică Array
. Deschiderea și asta și trecerea la lista respectivă ne aduc la alta __proto__
proprietate cu o valoare de Object
.
Acest lucru arată că number
array este o instanță a Array
tip care este o instanță a Object
tip.
Acum, înapoi la utilizarea in
operator:
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.*/
Pentru a verifica dacă există o proprietate pe un element HTML
În articolul lui Kirupa, Verificați dacă vă aflați pe un dispozitiv activat la atingere, el subliniază această funcție:
function isTouchSupported() {
var msTouchEnabled = window.navigator.msMaxTouchPoints;
var generalTouchEnabled = "ontouchstart" in document.createElement("div");
if (msTouchEnabled || generalTouchEnabled) {
return true;
}
return false;
}
Această funcție revine true
dacă vă aflați pe un dispozitiv care acceptă atingere și revine false
dacă vă aflați pe un dispozitiv care nu acceptă atingerea verificând dacă proprietățile window.navigator.msMaxTouchPoints
și ontouchstart
sunt prezenți. Aceste proprietăți există numai pe dispozitivele care sunt activate la atingere.
Destul de direct!
Să ne concentrăm pe linia evidențiată. Amintiți-vă cum am stabilit că in
operatorul se întoarce true
dacă proprietatea specificată există într-un obiect? Elementele HTML utilizate în JavaScript devin de fapt instanțe ale Object
tip, de unde și numele „Model de obiect document” sau DOM.
Desigur, s-ar putea să nu mă credeți fără un fel de dovadă. Ca și înainte, să tastăm câteva comenzi în consolă.
Creeaza o div
element și listează proprietățile sale folosind console.dir()
:
const element = document.createElement('div');
console.dir(element);
Veți vedea apoi div
element cu proprietățile sale listate în consolă.
Deschideți meniul derulant și veți observa că are un __proto__
proprietatea HtmlDivElement
. Deschideți asta și veți găsi altul __proto__
proprietatea HtmlElement
, atunci Element
, Node
, Eventtarget
, și, în sfârșit Object
.
Rulați și:
element instanceof Object
Aceasta se va întoarce true
, arătând că div
element este o instanță a Object
tip, motiv pentru care in
operatorul poate fi folosit pe acesta.
Concluzie
Ați aflat despre JavaScript nu atât de popular in
operator, care este utilizat pentru a verifica prezența proprietăților pe un obiect sau Object
tip instanțe. Acest lucru ar trebui să fie util atunci când scrieți logica de verificare.
Dacă ți-a plăcut acest articol, cu siguranță îți vor plăcea alte articole de pe blogul meu codewithlinda.com. Acolo public articole prietenoase pentru începători despre dezvoltarea frontend-ului fără jargon tehnic (pe cât posibil)?
#Operatorul #JavaScript #fost #explicat #exemple
Operatorul JavaScript `in` a fost explicat cu exemple