使用JS！封装includes函数（超详细！）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_54345600/article/details/118121308

本文探讨了ES6中引入的includes函数，对比了它与ES5的indexOf方法的区别。通过实例说明了includes在判断字符串或数组中是否存在特定内容时的便利性，其返回直接的布尔值简化了判断过程。此外，文章还提供了自己封装includes函数的方法，以增进对这个功能的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ES6中，我们JS做出了很大的改变，其中有一个函数是includes，可以用来判断字符串或者数组中是否包含所对应的内容，在ES5之前有一个方法是indexOf不过这个方法返回值是索引号如果没有找到则返回-1，这样使得我们很麻烦，在ES6进行了整改，出现了！！！！！
includes函数

废话不多说，看看indexOf和includes的区别！

问题：定义了一个变量 str 值为 ‘abcabczx’ 我们需要把里面重复的去掉放到一个新的变量中，你该如何做？

// 第一种方法使用 indexOf
var str = 'abcabczx';
var newStr = '';
for (var i = 0; i < str.length; i++) {
    if (newStr.indexOf(str[i]) == -1) {
        newStr += str[i];
    }
}
console.log(newStr)

// 第二种方式使用 includes
var str = 'abcabczx';
var newStr = '';
for (var i = 0; i < str.length; i++) {
    if (!newStr.includes(str[i])) {
        newStr += str[i];
    }
}
console.log(newStr);

当我们使用includes是不是更加的直观了呢？
includes是直接返回的布尔值，能在我们进行做判断的时候更加的有利，更加的简便。

var arr = ['zx', 'cjsm'];
// 使用arr这个数组进行判断 arr里面是否有'cjsm'这一个元素呢？
// 如果有则返回 true  没有 则返回 false
if (arr.includes('cjsm')) {
     console.log('张希和成吉思米');
 } else {
     console.log('张三');
 }

接下来我们进行自己封装一个includes方法
让自己更加的理解这个函数，更加深刻。

var arr = ['abc', 'ccc'];
function _includes(look, bylook) {
    for (var item of look) {
    	// 当只有一条执行语句可以省略 {}
        if (item == bylook) return true;
    }
    return false;
}
console.log(_includes(arr, 'abc')); // 返回true