JavaScript中扩展Array contains方法实例


Posted in Javascript onAugust 23, 2020

首先三水点靠木小编先为大家分享一个比较好用的代码

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方法,有时候这会不方便,contains方法实现很简单:

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

当然我们也可以扩展Array类,如下js

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

在Java语言中,contains可以用于判断str1是否包含str2

原生JS中是有contains方法的

结构与测试代码如下

<div id="div1">
<div id="div2">
3water.com
</div>
</div>
<script type="text/javascript">
var div1= document.getElementById("div1");
var div2= document.getElementById("div2");
console.log(div1.contains(div2));

var str1="3water.com";
var str2="3water";
console.log(str1.contains(str2));
</script>

JavaScript中扩展Array contains方法实例

但它并不是字符串方法,,仅用于判断DOM元素的包含关系,参数是Element类型

JavaScript中扩展Array contains方法实例

若要在JS中判断俩字符串的包含关系,用indexOf()

JavaScript中扩展Array contains方法实例

但是我们可以通过扩展的方法来实现

<div id="div1">
<div id="div2">
3water.com
</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="3water.com";
var str2="3water";
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=["3water.com","jbzj.com","3water.com"];
var str3="3water.com";
console.log("arr1.contains(str3)="+arr1.contains(str3));
</script>

下面是运行结果

JavaScript中扩展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 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
javascript preload&amp;lazy load
May 13 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 #Javascript
jQuery实现的支持IE的html滑动条
Mar 16 #Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 #Javascript
nw.js实现类似微信的聊天软件
Mar 16 #Javascript
JavaScript控制table某列不显示的方法
Mar 16 #Javascript
详解addEventListener的三个参数之useCapture
Mar 16 #Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 #Javascript
You might like
php学习之function的用法
2012/07/14 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php中require和require_once的区别说明
2014/02/27 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
跟老齐学Python之dict()的操作方法
2014/09/24 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
护理学专业推荐信
2013/12/03 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
自我鉴定标准格式
2014/03/19 职场文书
活动总结怎么写
2014/04/28 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2014年英语工作总结
2014/12/20 职场文书
小学六年级毕业感言
2015/07/30 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js