sql語句中的in用法示例

One of the first topics you’ll come across when learning JavaScript (or any other programming language) are operators.

學習JavaScript(或任何其他編程語言)時遇到的第一個主題之一是運算符。

The most common operators are the arithmetic, logical, and comparison operators. But did you know that JavaScript has an in operator?

最常見的運算符是算術，邏輯和比較運算符。 但是您知道JavaScript具有in運算符嗎？

If you didn't, don’t fret. I just came across it recently while searching for a solution to a problem on Google.

如果沒有，請不要擔心。 我最近在Google上尋找問題的解決方案時碰到了它。

In this article, you’ll learn exactly what the JavaScript in operator does, when to use it, and how to use it.

在本文中，您將確切地了解JavaScript in運算符的功能，何時使用它以及如何使用它。

JavaScript in運算符到底是什么？ (What exactly is the JavaScript in operator?)

The JavaScript in operator is used to check if a specified property exists in an object or in its inherited properties (in other words, its prototype chain). The in operator returns true if the specified property exists.

JavaScript in運算符用于檢查對象或其繼承的屬性(即，其原型鏈)中是否存在指定的屬性。 如果指定的屬性存在，則in運算符將返回true 。

The JavaScript prototype chain is how objects or object instances have access to properties and methods that were not originally theirs. These objects inherit properties and methods defined in their constructors or prototypes, which can be accessed through their __proto__ property.

JavaScript原型鏈是對象或對象實例如何訪問最初不是其屬性和方法的屬性。 這些對象繼承了在其構造函數或原型中定義的屬性和方法，可以通過其__proto__屬性對其進行訪問。

This article assumes that you have a basic understanding of what objects are, how to create them, what they are used for, and how JavaScript inheritance works. If you don’t, this article on MDN should help.

本文假定您對什么是對象，如何創建它們，將它們用于什么以及JavaScript繼承如何工作有基本的了解。 如果您不這樣做，那么有關MDN的這篇文章應該會有所幫助。

何時在操作符中使用JavaScript (When to use the JavaScript in operator)

驗證對象上是否存在屬性 (To verify if a property exists on an object)

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.

驗證屬性是否被對象繼承。 (To verify if a property is inherited by an object.)

Let’s use the ES6 class syntax to create an object constructor. This would also apply to function constructors:

讓我們使用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. */

驗證數組中是否存在索引/鍵。 (To verify if an index/key exists on an array.)

You might be wondering, since we established that the JavaScript in operator can be used with objects, why can we also use it with arrays?

您可能想知道，既然我們確定JavaScript in操作符可以與對象一起使用，為什么我們也可以將其與數組一起使用？

Well, an array is actually a prototype (instance) of the Object type. In fact, everything in JavaScript is an instance of the Object type.

好吧，數組實際上是Object類型的原型(實例)。 實際上，JavaScript中的所有內容都是Object類型的實例。

That may sound crazy, but lets run a simple program in the browser's console to confirm.

這聽起來很瘋狂，但是讓我們在瀏覽器的控制臺中運行一個簡單的程序進行確認。

First, define an array and confirm if its an instance of the Object type using the instanceof operator:

首先，定義一個數組，并使用instanceof運算符確認其是否為Object類型的instanceof ：

const number = [2, 3, 4, 5];number instanceof Object // Returns true

Still in doubt? Type number into the console and press enter, then open up the output.

還是有疑問嗎？ 鍵入number到控制臺，然后按回車，然后打開輸出。

You’ll notice a list of properties, one of which is __proto__ which points to Array. Opening that too and going down that list bring us to another __proto__ property with a value of Object.

您會注意到一系列屬性，其中一個是__proto__ ，它指向Array 。 也打開它并在列表中__proto__會帶我們到另一個具有Object值的__proto__屬性。

That shows that the number array is an instance of the Array type which is an instance of the Object type.

這表明number數組是Array類型的實例，而Array類型是Object類型的實例。

Now, back to using the in operator:

現在，回到使用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元素上是否存在屬性 (To verify if a property exists on a Html element)

In Kirupa's article, Check If You Are On a Touch Enabled Device, he highlights this function:

在Kirupa的文章中，“ 檢查您是否在啟用觸摸的設備上” ，他強調了此功能：

function isTouchSupported() {var msTouchEnabled = window.navigator.msMaxTouchPoints;var generalTouchEnabled = "ontouchstart" in document.createElement("div");if (msTouchEnabled || generalTouchEnabled) {return true;}return false;
}

This function returns true if you are on a device that supports touch and returns false if you are on a device that doesn't support touch by checking if the properties window.navigator.msMaxTouchPoints and ontouchstart are present. These properties only exist on devices that are touch enabled.

如果您在支持觸摸的設備上，則此函數返回true如果您在不支持觸摸的設備上，則通過檢查屬性window.navigator.msMaxTouchPoints和ontouchstart是否存在，返回false 。 這些屬性僅存在于啟用觸摸的設備上。

Pretty straightforward!

非常簡單！

Lets focus on the highlighted line. Remember how we established that the in operator returns true if the specified property exists in an object? HTML elements used in JavaScript actually become instances of the Object type, hence the name "Document Object Model" or DOM.

讓我們專注于突出顯示的行。 還記得我們如何確定如果對象中存在指定的屬性，則in運算符將返回true ？ JavaScript中使用HTML元素實際上成為Object類型的實例，因此名稱為“文檔對象模型”或DOM。

Of course, you might not believe me without some sort of proof. As before, let’s type some commands into the console.

當然，如果沒有任何證據，您可能不會相信我。 和以前一樣，讓我們??在控制臺中輸入一些命令。

Create a div element and list out its properties using console.dir():

創建一個div元素，并使用console.dir()列出其屬性：

const element = document.createElement('div');console.dir(element);

You'll then see the div element with its properties listed in the console.

然后，您將在控制臺中看到div元素及其屬性。

Open the drop down and you’ll notice that it has a __proto__ property of HtmlDivElement. Open that and you’ll find another __proto__ property of HtmlElement, then Element, Node, Eventtarget, and finally Object.

打開下拉列表，您會注意到它具有HtmlDivElement的__proto__屬性。 打開它，您將找到HtmlElement另一個__proto__屬性， 然后是Element ， Node ， Eventtarget ，最后是Object 。

Also run:

同時運行：

element instanceof Object

This will return true, showing that the div element is an instance of the Object type, which is why the in operator can be used on it.

這將返回true ，表明div元素是Object類型的實例，這就是為什么可以在其上使用in運算符的原因。

結論 (Conclusion)

You’ve learned about the not so popular JavaScript in operator, which is used to verify the presence of properties on an object or Object type instances. This should come in handy when writing verification logic.

您已經了解了不太流行JavaScript in運算符，該運算符用于驗證對象或Object類型實例上屬性的存在。 在編寫驗證邏輯時，這應該派上用場。

If you liked this article, you’ll definitely like other articles on my blog codewithlinda.com. There I publish beginner friendly articles on frontend development sans technical jargon (as much as possible) 😁.

如果您喜歡這篇文章，那么您肯定會喜歡我的博客codewithlinda.com上的其他文章。 我在那里發表有關前端開發的初學者友好文章，沒有技術術語(盡可能)。

翻譯自: https://www.freecodecamp.org/news/the-javascript-in-operator-explained-with-examples/

sql語句中的in用法示例