Однією з перших тем, з якими ви зіткнетесь під час вивчення JavaScript (або будь-якої іншої мови програмування), є оператори.
Найпоширенішими операторами є арифметичні, логічні та оператори порівняння. Але чи знаєте ви, що JavaScript має inоператор?
Якщо ви цього не зробили, не хвилюйтеся. Я нещодавно зіткнувся з цим, коли шукав рішення проблеми в Google.
У цій статті ви дізнаєтесь, що саме inробить оператор JavaScript , коли його використовувати та як ним користуватися.
Що саме являє собою JavaScript в операторі?
Оператор JavaScript inвикористовується, щоб перевірити, чи існує вказана властивість в об'єкті або в його успадкованих властивостях (іншими словами, його ланцюжок прототипів). inОператор повертає , trueякщо вказане властивість існує.
Ланцюжок прототипів JavaScript - це те, як об’єкти або екземпляри об’єктів мають доступ до властивостей і методів, які спочатку не були їхніми. Ці об'єкти успадковують властивості та методи, визначені в їх конструкторах або прототипах, до яких можна отримати доступ через їх __proto__властивість.
У цій статті передбачається, що ви базово розумієте, що таке об’єкти, як їх створювати, для чого вони використовуються та як працює успадкування JavaScript. Якщо ви цього не зробите, ця стаття про MDN повинна допомогти.
Коли використовувати JavaScript в операторі
Щоб перевірити, чи існує властивість на об’єкті
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.Щоб перевірити, чи властивість успадковується об’єктом.
Давайте використаємо синтаксис класу ES6 для створення конструктора об’єктів. Це також стосується конструкторів функцій:
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. */Щоб перевірити, чи існує індекс / ключ у масиві.
Можливо, вам цікаво, оскільки ми встановили, що inоператор JavaScript можна використовувати з об’єктами, чому ми можемо використовувати його і з масивами?
Ну, масив насправді є прототипом (екземпляром) Objectтипу. Насправді все в JavaScript є екземпляром Objectтипу.
Це може здатися божевільним, але дозволяє запустити просту програму на консолі браузера для підтвердження.
Спочатку визначте масив і підтвердьте, чи є його екземпляром Objectтипу за допомогою instanceofоператора:
const number = [2, 3, 4, 5]; number instanceof Object // Returns true Все ще сумніваєтесь? Введіть numberв консоль і натисніть клавішу Enter, а потім відкрийте вихід.
Ви помітите список властивостей, один із яких - на __proto__який вказує Array. Відкривши це теж і спустившись по цьому списку, ми перейдемо до іншої __proto__властивості зі значенням Object.
Це показує, що numberмасив є екземпляром Arrayтипу, який є екземпляром Objectтипу.
Тепер повернемося до використання inоператора:
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.*/Щоб перевірити, чи існує властивість для елемента Html
У статті Кірупи «Перевірте, чи перебуваєте ви на пристрої із сенсорним екраном», він виділяє цю функцію:
function isTouchSupported() { var msTouchEnabled = window.navigator.msMaxTouchPoints; var generalTouchEnabled = "ontouchstart" in document.createElement("div"); if (msTouchEnabled || generalTouchEnabled) { return true; } return false; } Ця функція повертається, trueякщо ви перебуваєте на пристрої, що підтримує дотик, і повертається, falseякщо ви перебуваєте на пристрої, який не підтримує дотик, перевіряючи наявність властивостей window.navigator.msMaxTouchPointsта ontouchstartїх наявність. Ці властивості існують лише на пристроях, на яких увімкнено дотик.
Досить просто!
Зупинимось на виділеному рядку. Пам'ятаєте, як ми встановили, що inоператор повертається, trueякщо вказана властивість існує в об'єкті? Елементи HTML, що використовуються в JavaScript, насправді стають екземплярами Objectтипу, звідси і назва "Модель об'єкта документа" або DOM.
Звичайно, ви могли б не повірити мені без якихось доказів. Як і раніше, давайте введемо деякі команди в консоль.
Створіть divелемент і перелічіть його властивості, використовуючи console.dir():
const element = document.createElement('div'); console.dir(element); Потім ви побачите divелемент із його властивостями, переліченими в консолі.
Відкрийте спадне меню і ви помітите, що воно має __proto__властивість HtmlDivElement. Відкрийте це, і ви знайдете іншу __proto__властивість HtmlElement,Потім Element, Node, Eventtargetі , нарешті Object.
Також запустити:
element instanceof ObjectЦе повернеться true, показуючи, що divелемент є екземпляром Objectтипу, саме тому на ньому inможна використовувати оператор.
Висновок
Ви дізналися про не дуже популярний inоператор JavaScript , який використовується для перевірки наявності властивостей Objectекземплярів об’єкта або типу. Це має стати в нагоді при написанні логіки перевірки.
Якщо вам сподобалась ця стаття, вам точно сподобаються інші статті мого блогу codewithlinda.com. Там я публікую статті, приємні для початківців, про розробку інтерфейсу без технічного жаргону (наскільки це можливо)?