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 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
js清理Word格式示例代码
Feb 13 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 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
Look And Say 序列php实现代码
2011/05/22 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
php的常量和变量实例详解
2017/06/27 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
简单谈谈python的反射机制
2016/06/28 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
nohup的用法
2012/11/26 面试题
党支部组织生活会整改方案
2014/09/30 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
新闻稿格式范文
2015/07/18 职场文书
图书馆义工感想
2015/08/07 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python