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中的对象化编程
Jan 16 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
用js简单提供增删改查接口
May 12 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 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 引用是个坏习惯
2010/03/12 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
php实现的二分查找算法示例
2017/06/20 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
PyQt5每天必学之事件与信号
2018/04/20 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python类型转换的魔术方法详解
2020/12/23 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
三年级评语大全
2014/04/23 职场文书
作风建设演讲稿
2014/05/23 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
学校国庆节活动总结
2015/03/23 职场文书
治庸问责工作总结
2015/08/11 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
JavaScript ES6的函数拓展
2022/01/18 Javascript
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
使用Python拟合函数曲线
2022/04/14 Python