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 相关文章推荐
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
JavaScript中的相等操作符使用详解
Dec 21 Javascript
小程序实现密码输入框
Nov 16 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
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php查询ip所在地的方法
2014/12/05 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jquery选择器使用详解
2014/04/08 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
python读取注册表中值的方法
2013/04/08 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
2014年教师节寄语
2014/04/03 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
创先争优活动个人总结
2015/03/04 职场文书
电力安全学习心得体会
2016/01/18 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
Java实现简易的分词器功能
2021/06/15 Java/Android
Java异常处理try catch的基本用法
2021/12/06 Java/Android
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技