JavaScript扩展Array contains方法：实现与误区解析

Array 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的Array对象并未内置contains方法，这在使用时可能带来不便。实现该功能相对简单：


function contains(a, obj) {
 var i = a.length;
 while (i--) {
  if (a[i] === obj) {
   return true;
  }
 }
 return false;
}

我们可以通过扩展Array类的原型来实现此功能，具体代码如下：


Array.prototype.contains = function(obj) {
 var i = this.length;
 while (i--) {
  if (this[i] === obj) {
   return true;
  }
 }
 return false;
}

实现后，调用contains方法将变得十分便捷：

alert([1, 2, 3].contains(2)); // => true alert([1, 2, 3].contains('2')); // => false

下面整理了其他几种常见的实现方式。

原生JS中contains方法的误区

关于JS中contains的一个常见误区。

在Java语言中，可以使用contains方法判断字符串str1是否包含str2。

原生JavaScript中确实存在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));

var str1="jb51.net";
var str2="jb51";
console.log(str1.contains(str2));
</script>

Array contains方法扩展实现

需要注意的是，它并非字符串方法，仅用于判断DOM元素之间的包含关系，且参数必须为Element类型。

Array contains方法扩展实现

若要在JS中判断两个字符串的包含关系，应使用indexOf()方法。

Array 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>

以下是具体的运行结果展示。

Array contains方法扩展实现

其他扩展方式与注意事项

此外，还可以利用正则表达式来扩展JS的Array，添加contains方法。


Array.prototype.contains = function(item){
 return RegExp("\\b"+item+"\\b").test(this);
};

该方法直接返回true或false布尔值。

在JS中判断Array数组是否包含指定元素。

1. 调用方式示例：

var arr=["a","b"]; alert(arr.in_array("a"))

2. JS判断数组是否包含指定元素的方法定义：


Array.prototype.contains = function(obj) {
  var i = this.length;
  while (i--) {
    if (this[i] === obj) {
      return true;
    }
  }
  return false;
}
或
Array.prototype.contains = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) {
      return true;
    }
  }
  return false;
}
或
Array.prototype.in_array = function(e) {
  for(i=0; i<this.length && this[i]!=e; i++);
  return !(i==this.length);
}


还有一个大牛是这样写的：
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function(e) {
  var r = new RegExp(this.S+e+this.S);
  return (r.test(this.S+this.join(this.S)+this.S));
}

外部扩展资源：

Jquery实现方式参考：http://api.jquery.com/jQuery.inArray/

具体选择取决于个人需求。本站建议，在可能的情况下尽量不使用正则表达式，主要考虑效率问题；虽然代码简洁，但需注意部分旧版浏览器的兼容性问题。

JavaScript中扩展Array contains方法实例

Array contains方法扩展实现

原生JS中contains方法的误区

其他扩展方式与注意事项

实用工具推荐