Автор оригинала: FreeCodeCamp Community Member.
Одним из первых тем, которыми вы столкнулись, когда у изучения JavaScript (или любого другого языка программирования) являются операторами.
Наиболее распространенными операторами являются арифметические, логические и сравнительные операторы. Но знаете ли вы, что у JavaScript есть в Оператор?
Если вы этого не сделали, не раздражайте. Я просто наткнулся недавно, в поисках решения проблемы в Google.
В этой статье вы узнаете именно то, что JavaScript в Оператор делает, когда его использовать и как его использовать.
Что именно в операторе JavaScript?
JavaScript в Оператор используется для проверки, существует ли указанное свойство в объекте или в его унаследованных свойствах (другими словами, его цепочка прототипа). в Оператор возвращает правда Если указанное свойство существует.
Цепь прототип 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. */Чтобы проверить, существует ли индекс/ключ на массиве.
Вам может быть интересно, так как мы установили, что JavaScript в Оператор может использоваться с объектами, почему мы также можем использовать его с массивами?
Ну, массив на самом деле является прототипом (экземпляром) из Объект тип. На самом деле, все в JavaScript – это экземпляр Объект тип.
Это может звучать сумасшедшим, но позволяет запустить простую программу в консоли браузера для подтверждения.
Сначала определите массив и подтвердите, если его экземпляр Объект Тип с использованием Instanceof Оператор:
const number = [2, 3, 4, 5]; number instanceof Object // Returns true
Все еще сомневаюсь? Тип Номер В консоль и нажмите Enter, затем откройте вывод.
Вы заметите список свойств, один из которых является __proto__ какие указывает на Массив Отказ Открываем это тоже и спускаясь на этот список привел нас к другому __proto__ недвижимость со значением Объект Отказ
Это показывает, что Номер Массив является экземпляром Массив Тип, который является экземпляром Объект тип.
Теперь, вернемся к использованию в Оператор:
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;
}
Эта функция возвращает правда Если вы на устройстве, который поддерживает Touch и возвращает ложь Если вы на устройстве, который не поддерживает прикосновение, проверяя, если свойства window.navigator.msmaxtouchpoints и OnTouchStart присутствуют. Эти свойства существуют только на устройствах, которые включены прикосновения.
Довольно просто!
Давайте сосредоточиться на выделенной линии. Помните, как мы установили, что в Оператор возвращает правда Если указанное свойство существует в объекте? HTML элементы, используемые в JavaScript, на самом деле становятся экземплярами Объект Тип, отсюда название «Модель объекта документа» или DOM.
Конечно, вы можете не поверить мне без какого-то доказательства. Как и прежде, давайте введем некоторые команды в консоль.
Создать Div Элемент и перечислите его свойства, используя Console.dir () :
const element = document.createElement('div');
console.dir(element);
Вы тогда увидите Div элемент со своими свойствами, перечисленными в консоли.
Откройте выпадение, и вы заметите, что у него есть __proto__ Собственность Htmldivelement Отказ Откройте это, и вы найдете другой __proto__ Собственность Htmlelement , Тогда Элемент , Узел , EventTarget и, наконец, Объект Отказ
Также запустите:
element instanceof Object
Это вернет правда , показывая, что Div Элемент является экземпляром Объект Тип, именно поэтому в Оператор может быть использован на нем.
Заключение
Вы узнали о не так популярном JavaScript в Оператор, который используется для проверки наличия свойств на объекте или Объект Тип экземпляров. Это должно пригодиться при написании логики проверки.
Если вам понравилась эта статья, вам определенно понравится другие статьи в моем блоге codewithlinda.com Отказ Там я публикую для начинающих дружественных статей о развитии Frontend Sans Theatical Jargon (как можно больше)?.