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捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 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
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
javaScript实现一个队列的方法
2020/07/14 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
深入理解python对json的操作总结
2017/01/05 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
连锁酒店店长职责范本
2014/02/13 职场文书
年终总结会主持词
2014/03/25 职场文书
电教室标语
2014/06/20 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
《所见》教学反思
2016/02/23 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
JS实现九宫格拼图游戏
2022/06/28 Javascript