2024年js数组高阶函数——includes()方法_js includes(1)，前端开发软件

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

 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: 130 };

console.log(users.includes(user)); // false

数组users包含了一个与user对象相等的对象，但返回的却是false，为什么呢？

这是因为JavaScript 中的 includes() 方法用于检查一个数组是否包含某个特定的元素，它并不适用于检查对象。因此，在上述代码中使用 includes() 方法进行判断是不准确的。
为什么不准确呢？

因为 includes() 方法在比较对象时使用的是严格相等运算符（===），而不是按对象属性逐个匹配的方式。
如果想要检查数组中是否包含某个对象，可以使用 some() 方法，代码示例如下：

const users = [
  { name: '叶天帝', age: 225 },
  { name: '石昊', age: 130 },
  { name: '辰南', age: 135 }
];

const user = { name: '石昊', age: 130 };

const isUserIncluded = users.some(u => u.name === user.name && u.age === user.age);

console.log(isUserIncluded); //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 或转译工具进行兼容处理。

应用场景方面：

1. 检查字符串是否包含特定子串
   可以使用 includes() 方法来检查一个字符串是否包含了某个子串。例如，判断一个文章内容是否包含特定关键字，并根据结果进行相应处理。
2. 检查数组是否包含特定元素
   可以使用 includes() 方法来检查一个数组中是否包含了某个特定的元素。例如，在一个商品列表中，判断用户所选商品是否在购物车中存在。
3. 查找文件名的拓展名
   在处理文件路径时，可以使用 includes() 方法来判断文件名是否包含特定的拓展名。例如，判断一个文件是否为图片文件（如 .jpg、.png 等），便于后续的处理。
4. 过滤数组中的特定元素
   利用 includes() 方法可以在数组中快速过滤掉指定的元素。例如，从一个任务列表中排除已完成的任务，构建一个新的未完成任务列表。
5. 实现输入提示功能
   在前端开发中，可以使用 includes() 方法对用户的输入进行匹配和过滤，实现输入提示或自动补全的功能。例如，根据用户输入的关键词，展示匹配的选项供选择或显示相关提示信息。
6. 快速判断字符串是否为空或数组是否为空
   通过使用 includes() 方法判断字符串是否包含空字符串或数组是否包含元素，可以快速检测目标对象是否为空。

---

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

56.gif#pic_center)

---

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】