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 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
关于uniApp editor微信滑动问题
Jan 15 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
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python中的tuple元组详细介绍
2015/02/02 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python 图片去噪的方法示例
2019/07/09 Python
python3实现弹弹球小游戏
2019/11/25 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
活动总结报告怎么写
2014/07/03 职场文书
校本课程教学计划
2015/01/19 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript