😊博主：小猫娃来啦
😊文章核心：js数组高阶函数——includes方法
文章目录
前言
⭐JS的数组是一种特殊的对象，其特点是在值的列表中按照顺序存放值。JS数组用于存储按照索引顺序排列的数据，例如数字、字符串和对象等。数组是一个类似于列表的高阶对象，它可以存储任何类型的数据，并且具有一些非常有用的方法。其中，includes()方法是其中最常用的之一。在 JS中，数组是由中括号 [] 括起来的数值序列。数组可以包含不同类型的值，例如数字、字符串、对象等。以下是一些基础的 JS数组操作：
数组的一般化操作
创建数组
let myArray = []; // 创建一个空数组 let myArray = [1, 2, 3]; // 创建一个包含三个数值的数组 let myArray = new Array(); // 用构造函数创建一个空数组 let myArray = new Array(1, 2, 3); // 用构造函数创建一个包含三个数值的数组
获取数组长度
let myArray = [1, 2, 3];console.log(myArray.length); // 输出 3
访问（遍历）数组元素
let myArray = [1, 2, 3]; console.log(myArray[0]); // 输出 1 console.log(myArray[1]); // 输出 2 console.log(myArray[2]); // 输出 3
修改数组元素
let myArray = [1, 2, 3]; myArray[1] = 4; console.log(myArray); // 输出 [1, 4, 3]
删除数组元素
let myArray = [1, 2, 3]; delete myArray[1]; console.log(myArray); // 输出 [1, 3]
数组尾部添加
let myArray = [1, 2, 3]; myArray.push(4); console.log(myArray); // 输出 [1, 2, 3, 4]
数组尾部删除
let myArray = [1, 2, 3]; myArray.pop(); console.log(myArray); // 输出 [1, 2]
includes（）方法
⭐对于数组中是否包含某个元素，我们可以使用 includes() 方法。includes() 方法用于判断数组中是否包含某个指定的元素，如果包含，则方法返回 true，否则返回 false。
以下是 includes() 方法的语法：
array.includes(searchElement[, fromIndex])
其中：
searchElement：需要查找的元素，必选。fromIndex：可选，从该索引处开始查找元素。如果省略该参数，则从数组的头开始查找。如果fromIndex大于或等于数组长度，则返回 false。
举例说明
当我们使用includes()方法时，可以通过传入一个元素作为参数来判断数组中是否包含该元素。
⭐⭐⭐第一例：判断数组中是否包含某个数字
const numbers = [1, 2, 3, 4, 5]; console.log(numbers.includes(3)); console.log(numbers.includes(6));
数组numbers包含数字3，因此includes(3)返回true。而数组numbers不包含数字6，因此includes(6)返回false。
⭐⭐⭐第二例：判断数组中是否包含某个字符串
const fruits = ['长生界', '神墓', '遮天']; console.log(fruits.includes('遮天')); console.log(fruits.includes('完美世界'));
数组fruits包含字符串’遮天’，因此includes('banana')返回true。而数组fruits不包含字符串’grape’，因此includes('grape')返回false。
⭐⭐⭐第三例：判断数组中是否包含某个对象
const users = [ { name: '叶天帝', age: 225 }, { name: '石昊', age: 130 }, { name: '辰南', age: 135 } ]; const user = { name: '石昊', age: 30 }; console.log(users.includes(user)); // true
数组users包含一个与user对象相等的对象，因此includes(user)返回true。
关键点
第一点：includes()方法在比较元素时使用的是严格相等（===）的方式。
第二点：如果数组中有多个相同的元素，includes()方法只会返回第一个匹配到的元素。
第三点：兼容性：
includes() 方法并不兼容所有的浏览器。如果需要在不支持 includes() 方法的浏览器中使用该方法，可以使用以下 polyfill 实现：
if (!Array.prototype.includes) { Array.prototype.includes = function(searchElement /*, fromIndex*/ ) { 'use strict'; var O = Object(this); var len = parseInt(O.length) || 0; if (len === 0) { return false; } var n = parseInt(arguments[1]) || 0; var k; if (n >= 0) { k = n; } else { k = len + n; if (k < 0) { k = 0; } } while (k < len) { var currentElement = O[k]; if (searchElement === currentElement || (searchElement !== searchElement && currentElement !== currentElement)) { return true; } k++; } return false; }; }
在这个 polyfill 中，Array.prototype.includes() 方法首先通过对象来获取数组的长度，并使用 while 循环来遍历数组。如果搜索的元素存在则返回 true，否则返回 false。
总结
细节方面：
includes() 方法适用于字符串和数组类型。
它可以快速判断目标对象中是否包含指定的元素。
在字符串中，它区分大小写，如果找到完全匹配的子串，返回 true；否则返回 false。
在数组中，它使用严格相等（===）来匹配元素，如果找到与搜索元素相等的元素，返回 true；否则返回 false。
可以通过第二个参数来设置搜索的起始位置或索引。
includes() 方法在 ES6 中新增，不支持旧版本的浏览器，可以使用 polyfill 或转译工具进行兼容处理。
应用场景方面：
检查字符串是否包含特定子串
可以使用 includes() 方法来检查一个字符串是否包含了某个子串。例如，判断一个文章内容是否包含特定关键字，并根据结果进行相应处理。
检查数组是否包含特定元素
可以使用 includes() 方法来检查一个数组中是否包含了某个特定的元素。例如，在一个商品列表中，判断用户所选商品是否在购物车中存在。
查找文件名的拓展名
在处理文件路径时，可以使用 includes() 方法来判断文件名是否包含特定的拓展名。例如，判断一个文件是否为图片文件（如 .jpg、.png 等），便于后续的处理。
过滤数组中的特定元素
利用 includes() 方法可以在数组中快速过滤掉指定的元素。例如，从一个任务列表中排除已完成的任务，构建一个新的未完成任务列表。
实现输入提示功能
在前端开发中，可以使用 includes() 方法对用户的输入进行匹配和过滤，实现输入提示或自动补全的功能。例如，根据用户输入的关键词，展示匹配的选项供选择或显示相关提示信息。
快速判断字符串是否为空或数组是否为空
通过使用 includes() 方法判断字符串是否包含空字符串或数组是否包含元素，可以快速检测目标对象是否为空。
