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源码分析之Event事件分析
Jun 07 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
javascript中json基础知识详解
Jan 19 Javascript
javascript数据类型详解
Feb 07 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 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 中文乱码解决办法总结分析
2009/07/30 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
python实现反转部分单向链表
2018/09/27 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python实现FTP循环上传文件
2020/03/20 Python
python学生管理系统的实现
2020/04/05 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
火山动力Java笔试题
2014/06/26 面试题
公务员平时考核实施方案
2014/03/11 职场文书
户外宣传策划方案
2014/05/25 职场文书
五年级上册复习计划
2015/01/19 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书