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用法示例