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跨Iframe选择实现代码
Aug 19 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
js和jquery中获取非行间样式
May 05 jQuery
JS实现方形抽奖效果
Aug 27 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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入门
2006/10/09 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Python中正则表达式详解
2017/05/17 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
Django的CVB实例详解
2020/02/10 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
利用python 读写csv文件
2020/09/10 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
中学生演讲稿
2014/04/26 职场文书
单位考核聘任报告
2015/03/02 职场文书
小孩不笨观后感
2015/06/03 职场文书