掌握JavaScript数组includes()方法快速判断元素

JavaScript中的Array对象提供了一个非常有用的内置方法——includes()，该方法用于判断数组中是否存在某个特定的元素，如果存在则返回true，不存在则返回false。这个方法在处理数组时非常方便，尤其是在需要对数组元素进行存在性检查时。 ### 关键知识点 1. **includes()方法的语法**： - 语法结构：`array.includes(searchElement[, fromIndex])` - 参数说明： - `searchElement`：必需，表示需要查找的元素值。 - `fromIndex`：可选，表示开始查找的位置索引。如果该索引大于或等于数组长度，则返回false。如果索引值为负，则以数组长度加上该索引值的和作为实际查找的起始位置。如果省略该参数，则默认为0，从数组开头开始查找。 2. **返回值**： - 如果在数组中找到了指定的元素，则返回true。 - 如果没有找到，则返回false。 3. **区分大小写**： - 在JavaScript中，数组元素的比较是区分大小写的。例如，包含字符串"a"的数组不会被认为是包含字符串"A"。 4. **对不同类型元素的支持**： - includes()方法可以用于检查任意类型的元素，包括字符串、数字、布尔值、对象和符号等。 5. **查找空位**： - 如果将搜索元素设置为undefined，由于数组中的空位(例如，使用delete操作符删除的元素)也被认为是undefined，这可能会导致一些反直觉的结果。在ES2019规范中，已经明确指出不应该将空位视为undefined。 6. **polyfill（垫片）**： - 对于不支持ES6及以上版本JavaScript的环境，可以通过添加polyfill来实现includes()方法。 ### 使用场景和示例 **基本使用**： ```javascript let fruits = ['apple', 'banana', 'mango', 'orange']; // 检查元素是否存在 let includesBanana = fruits.includes('banana'); // true let includesCherry = fruits.includes('cherry'); // false ``` **指定查找起始位置**： ```javascript let numbers = [1, 2, 3, 4, 5]; // 从索引1开始查找 let includesThree = numbers.includes(3, 1); // false，因为从索引1开始，3被视为第二个元素 let includesThreeAfter = numbers.includes(3, 2); // true，从索引2开始，3是第三个元素 ``` **处理空位**： ```javascript let arrayWithHoles = [1, , , , 5]; // 在ES2019之前的环境可能会误判 arrayWithHoles.includes(undefined); // 在旧环境中可能会返回true，即便未明确添加undefined // 使用ES2019规范中定义的行为 if (Array.prototype.includes) { let includesUndefined = arrayWithHoles.includes(undefined); // false } ``` **polyfill示例**： ```javascript if (!Array.prototype.includes) { Object.defineProperty(Array.prototype, 'includes', { value: function(searchElement, fromIndex) { if (this == null) { throw new TypeError('"this" is null or not defined'); } // 获取数组对象 var o = Object(this); // 获取数组的长度 var len = o.length >>> 0; // 如果没有指定fromIndex，则从0开始 if (len === 0) { return false; } // 将fromIndex转换为整数 var n = fromIndex | 0; // 如果指定的fromIndex大于等于数组长度，返回false if (n >= len) { return false; } // 从fromIndex指定的索引开始查找 var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); function sameValueZero(x, y) { return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y)); } // 循环查找元素 while (k < len) { if (sameValueZero(o[k], searchElement)) { return true; } k++; } return false; } }); } ``` ### 总结 JavaScript的Array.includes()方法是现代JavaScript开发中不可或缺的一部分。它的引入极大地简化了数组元素存在性的检查，提高了代码的可读性和编写效率。尽管在一些老旧的JavaScript环境中不被支持，但通过polyfill可以轻松扩展至这些环境。正确理解和使用includes()方法，可以有效地避免常见的错误和混淆，确保开发的代码质量和效率。