Một trong những chủ đề đầu tiên bạn sẽ bắt gặp khi học JavaScript (hoặc bất kỳ ngôn ngữ lập trình nào khác) là toán tử.
Các toán tử phổ biến nhất là toán tử số học, logic và so sánh. Nhưng bạn có biết rằng JavaScript có một in nhà điều hành?
Nếu bạn không, đừng băn khoăn. Tôi mới bắt gặp nó gần đây khi đang tìm kiếm giải pháp cho một vấn đề trên Google.
Trong bài viết này, bạn sẽ tìm hiểu chính xác JavaScript là gì in toán tử nào, khi nào sử dụng nó và cách sử dụng nó.
Chính xác thì JavaScript trong toán tử là gì?
JavaScript in toán tử được sử dụng để kiểm tra xem một thuộc tính được chỉ định có tồn tại trong một đối tượng hoặc trong các thuộc tính kế thừa của nó hay không (nói cách khác, chuỗi nguyên mẫu của nó). Các in toán tử trả về true nếu thuộc tính được chỉ định tồn tại.
Chuỗi nguyên mẫu JavaScript là cách các đối tượng hoặc phiên bản đối tượng có quyền truy cập vào các thuộc tính và phương thức ban đầu không phải của chúng. Các đối tượng này kế thừa các thuộc tính và phương thức được định nghĩa trong hàm tạo hoặc nguyên mẫu của chúng, có thể được truy cập thông qua đối tượng của chúng. __proto__ tài sản.
Bài viết này giả định rằng bạn đã có hiểu biết cơ bản về đối tượng là gì, cách tạo chúng, mục đích sử dụng của chúng và cách hoạt động của tính kế thừa JavaScript. Nếu không, bài viết này trên MDN sẽ giúp bạn.
Khi nào nên sử dụng JavaScript trong toán tử
Để xác minh xem một thuộc tính có tồn tại trên một đối tượng hay không
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.Để xác minh xem một thuộc tính có được kế thừa bởi một đối tượng hay không.
Hãy sử dụng cú pháp lớp ES6 để tạo một hàm tạo đối tượng. Điều này cũng sẽ áp dụng cho hàm tạo chức năng:
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. */Để xác minh xem một chỉ mục/khóa có tồn tại trên một mảng hay không.
Bạn có thể thắc mắc, vì chúng tôi đã xác định rằng JavaScript in Toán tử có thể được sử dụng với các đối tượng, tại sao chúng ta cũng có thể sử dụng nó với mảng?
Chà, một mảng thực sự là một nguyên mẫu (ví dụ) của Object loại. Trên thực tế, mọi thứ trong JavaScript là một thể hiện của Object loại.
Điều đó nghe có vẻ điên rồ, nhưng hãy chạy một chương trình đơn giản trong bảng điều khiển của trình duyệt để xác nhận.
Đầu tiên, xác định một mảng và xác nhận nếu nó là một thể hiện của Object gõ bằng cách sử dụng instanceof nhà điều hành:
const number = [2, 3, 4, 5];
number instanceof Object // Returns true
Vẫn còn nghi ngờ? Loại number vào bảng điều khiển và nhấn enter, sau đó mở đầu ra.
Bạn sẽ nhận thấy một danh sách các thuộc tính, một trong số đó là __proto__ chỉ đến Array. Mở nó ra và đi xuống danh sách đó đưa chúng ta đến một cái khác __proto__ tài sản có giá trị Object.
Điều đó cho thấy rằng các number mảng là một thể hiện của Array loại đó là một thể hiện của Object loại.
Bây giờ, quay lại sử dụng in nhà điều hành:
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.*/Để xác minh xem một thuộc tính có tồn tại trên phần tử Html hay không
Trong bài viết của Kirupa, Kiểm tra xem bạn có đang sử dụng thiết bị hỗ trợ cảm ứng hay không, anh ấy đã nhấn mạnh chức năng này:
function isTouchSupported() {
var msTouchEnabled = window.navigator.msMaxTouchPoints;
var generalTouchEnabled = "ontouchstart" in document.createElement("div");
if (msTouchEnabled || generalTouchEnabled) {
return true;
}
return false;
}
Hàm này trả về true nếu bạn đang sử dụng thiết bị hỗ trợ cảm ứng và quay lại false nếu bạn đang sử dụng thiết bị không hỗ trợ cảm ứng bằng cách kiểm tra xem các thuộc tính window.navigator.msMaxTouchPoints và ontouchstart đang có mặt. Các thuộc tính này chỉ tồn tại trên các thiết bị hỗ trợ cảm ứng.
Khá đơn giản!
Hãy tập trung vào dòng được đánh dấu. Hãy nhớ cách chúng tôi thiết lập rằng in toán tử trả về true nếu thuộc tính được chỉ định tồn tại trong một đối tượng? Các phần tử HTML được sử dụng trong JavaScript thực sự trở thành thể hiện của Object loại, do đó có tên là “Mô hình đối tượng tài liệu” hoặc DOM.
Tất nhiên, bạn có thể không tin tôi nếu không có bằng chứng nào đó. Như trước đây, hãy nhập một số lệnh vào bảng điều khiển.
Tạo một div phần tử và liệt kê các thuộc tính của nó bằng cách sử dụng console.dir():
const element = document.createElement('div');
console.dir(element);
Sau đó, bạn sẽ thấy div phần tử với các thuộc tính của nó được liệt kê trong bảng điều khiển.
Mở danh sách thả xuống và bạn sẽ nhận thấy rằng nó có một __proto__ tài sản của HtmlDivElement. Mở nó ra và bạn sẽ tìm thấy một cái khác __proto__ tài sản của HtmlElement, sau đó Element, Node, Eventtargetvà cuối cùng Object.
Cũng chạy:
element instanceof ObjectĐiều này sẽ trở lại truecho thấy rằng div phần tử là một thể hiện của Object loại, đó là lý do tại sao in toán tử có thể được sử dụng trên nó.
Phần kết luận
Bạn đã học về JavaScript không quá phổ biến in toán tử, được sử dụng để xác minh sự hiện diện của các thuộc tính trên một đối tượng hoặc Object loại trường hợp. Điều này sẽ có ích khi viết logic xác minh.
Nếu bạn thích bài viết này, chắc chắn bạn sẽ thích các bài viết khác trên blog codewithlinda.com của tôi. Ở đó, tôi xuất bản các bài viết thân thiện với người mới bắt đầu về phát triển giao diện người dùng không có biệt ngữ kỹ thuật (càng nhiều càng tốt) ?.
