javascript中contains是否包含功能实现代码(扩展字符、数组、dom)


Posted in Javascript onApril 07, 2020

一个小误区 JS中的contains

今天想要用JS判断集合中是否包含另一个集合。

发现,Contains并不能达到所要的效果,查找之后发现了问题

原来,js的contains方法用来查看dom元素的包含关系,并不是Java中数组的contains方法。

先看一下duyunchao同学分享的代码

$(document).ready(function() {
				var Arrays = ['11','22','33'];
				var Array ='11';
				if(Arrays.indexOf(Array) >= 0) {
					alert('Arrays中包含Array');
				}
			});

若js要判断数组的包含关系,应该用indexof

原生JS中是有contains方法的,但只有dom元素的包含关系,这里三水点靠木就为大家分享一下扩展的字符string与数组arr的扩展代码

结构与测试代码如下

<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中contains是否包含功能实现代码(扩展字符、数组、dom)

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

javascript中contains是否包含功能实现代码(扩展字符、数组、dom)

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

javascript中contains是否包含功能实现代码(扩展字符、数组、dom)

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

<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中contains是否包含功能实现代码(扩展字符、数组、dom)

所以后期我们的代码可以加上这两段即可

//字符扩展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的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
详解Bootstrap插件
Apr 25 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
vue中关闭eslint的方法分析
Aug 04 Javascript
vue-cli3单页构建大型项目方案
Apr 07 #Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 #Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 #Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 #Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 #Javascript
flexible.js实现移动端rem适配方案
Apr 07 #Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 #Javascript
You might like
flash用php连接数据库的代码
2011/04/21 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php中文验证码实现方法
2015/06/18 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
js获取视频时长代码
2014/04/10 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Django REST framework 分页的实现代码
2019/06/19 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Python中如何引入第三方模块
2020/05/27 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
python switch 实现多分支选择功能
2020/12/21 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
自我鉴定怎么写
2013/12/05 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
低碳生活倡议书
2014/04/14 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
首席执行官观后感
2015/06/03 职场文书
狂人日记读书笔记
2015/06/30 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
pycharm无法安装cv2模块问题
2022/05/20 Python