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入门第一课 jQuery选择符
Mar 14 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
js闭包的用途详解
2014/11/09 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
升职演讲稿范文
2014/05/23 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
代收款委托书范本
2014/10/01 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL