本文澄清JavaScript中contains方法的常见误区，指出其原生仅支持DOM元素包含关系。通过扩展String和Array原型，分别利用indexOf和遍历实现字符串与数组的包含判断，并提供完整代码示例与测试结果。
JavaScript contains方法常见误区
关于JavaScript中contains方法存在一个常见的理解误区。
在实际开发中，有时需要判断一个集合是否包含另一个集合的元素。
直接使用contains方法往往无法达到预期效果，经过排查才发现原因所在。
JavaScript原生的contains方法主要用于判断DOM元素之间的包含关系，这与Java中数组的contains方法功能不同。
参考其他开发者分享的实现思路，我们可以更好地理解其用法。
原生DOM包含关系判断
$(document).ready(function() {
var Arrays = ['11','22','33'];
var Array ='11';
if(Arrays.indexOf(Array) >= 0) {
alert('Arrays中包含Array');
}
});若要在JavaScript中判断数组是否包含特定元素，应使用indexOf方法。
原生JavaScript确实提供了contains方法，但仅限于DOM元素的包含关系判断。本文将介绍如何扩展该方法以支持字符串和数组的判断。
具体的实现结构与测试代码如下所示。
字符串与数组的扩展实现
<div id="div1">
<div id="div2">
jb51.net
</div>
</div>
<script type="text/javascript">
var div1= document.getElementById("div1");
var div2= document.getElementById("div2");
console.log(div1.contains(div2));
var str1="jb51.net";
var str2="jb51";
console.log(str1.contains(str2));
</script>
需要注意的是，原生contains并非字符串方法，其参数必须为Element类型，仅用于判断DOM元素的包含关系。
若需判断两个字符串之间的包含关系，推荐使用indexOf()方法。
不过，我们可以通过扩展原型的方法来实现更通用的contains功能。
<div id="div1">
<div id="div2">
jb51.net
</div>
</div>
<script type="text/javascript">
var div1= document.getElementById("div1");
var div2= document.getElementById("div2");
console.log("div1.contains(div2)="+div1.contains(div2));
//字符扩展contains就不会报错了
String.prototype.contains = function(a) {
return - 1 < this.indexOf(a)
};
var str1="jb51.net";
var str2="jb51";
console.log("str1.contains(str2)="+str1.contains(str2));
//数组扩展contains适用于数组判断
Array.prototype.contains = function(a) {
if ("string" == typeof a || "number" == typeof a) for (var b in this) if (a == this[b]) return ! 0;
return ! 1
};
var arr1=["jb51.net","jbzj.com","jb51.com"];
var str3="jb51.net";
console.log("arr1.contains(str3)="+arr1.contains(str3));
</script>以下是代码运行的实际结果展示。
因此，在后续开发中可以直接加入这两段扩展代码以满足需求。
//字符扩展contains就不会报错了
String.prototype.contains = function(a) {
return - 1 < this.indexOf(a)
};
//数组扩展contains适用于数组判断
Array.prototype.contains = function(a) {
if ("string" == typeof a || "number" == typeof a) for (var b in this) if (a == this[b]) return ! 0;
return ! 1
};以上就是JavaScript中contains方法在字符、数组及DOM元素中包含功能实现的详细内容，更多关于js contains的资料请关注本站其它相关文章！