JavaScript数组中in运算符与includes()方法的核心差异是什么？

Great question! Let’s break down the core differences between these two—they might seem like they could do similar things at first, but they’re designed for entirely different jobs.

1. What They Actually Check #

This is the biggest distinction:

• The in operator checks if a given index (for arrays) or property name (for objects) exists in the array/object (including inherited properties from the prototype chain). It doesn’t care about the value stored at that index.
• includes() is strictly for checking if a specific element value exists in the array. It looks at the actual items in the array, not their positions.

Example code to illustrate:

const fruits = ['apple', 'banana', 'cherry'];

// Using the in operator
console.log(1 in fruits); // true (index 1 exists, even though we don't care about its value)
console.log('banana' in fruits); // false ('banana' is not an index/property name)

// Using includes()
console.log(fruits.includes('banana')); // true (the value 'banana' is in the array)
console.log(fruits.includes(1)); // false (the value 1 is not present)

2. Handling Sparse Arrays #

Sparse arrays (arrays with empty, uninitialized slots) behave very differently with each:

• in returns false for empty slots because those indices haven’t been assigned a value (even if the slot appears to exist).
• includes() treats empty slots as undefined, so it will return true if you check for undefined in a sparse array.

Example:

const sparseArr = [1, , 3]; // Index 1 is empty (no value assigned)

console.log(1 in sparseArr); // false (index 1 hasn't been initialized)
console.log(sparseArr.includes(undefined)); // true (empty slot is interpreted as undefined)

3. Prototype Chain Considerations #

• The in operator checks both own properties and inherited properties from the prototype chain. For arrays, this means it will return true for methods like toString or push, since those are inherited from Array.prototype.
• includes() only looks at the array’s own elements—it ignores the prototype chain entirely.

Example:

const numbers = [1, 2, 3];

// in checks inherited properties
console.log('toString' in numbers); // true (inherited from Array.prototype)

// includes() ignores prototype properties
console.log(numbers.includes('toString')); // false

4. Equality Comparison for includes() #

includes() uses SameValueZero equality to match elements, which is almost identical to strict equality (===), except it correctly identifies NaN as matching itself. The in operator doesn’t involve value comparison at all, so this doesn’t apply to it.

Example:

const weirdArr = [NaN];

console.log(weirdArr.includes(NaN)); // true (SameValueZero recognizes NaN as a match)
console.log(0 in weirdArr); // true (just checks if index 0 exists)

Quick Rule of Thumb #

• Use includes() when you want to know: "Is this value present in my array?"
• Use the in operator when you want to know: "Does this index/property exist on my array/object?"

内容的提问来源于stack exchange，提问作者Manuel del Pino Lucena