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 相关文章推荐
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
vue自定义正在加载动画的例子
Nov 14 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
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP如何使用Memcached
2016/04/05 PHP
详解PHP PDO简单教程
2019/05/28 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
js日期联动示例
2014/05/02 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
python删除列表中重复记录的方法
2015/04/28 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
python中有帮助函数吗
2020/06/19 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
日语专业个人的求职信
2013/12/03 职场文书
大学生心理活动总结
2014/07/04 职场文书
村班子对照检查材料
2014/08/18 职场文书
一份文言文检讨书
2014/09/13 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
SQL CASE 表达式的具体使用
2022/03/21 SQL Server