Operatorul JavaScript `in` a fost explicat cu exemple

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ă.

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)?