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 相关文章推荐
使用JavaScript库还是自己写代码?
Jan 28 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
JS实现简单日历特效
Jan 03 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
JavaScript Array扩展实现代码
2009/10/14 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
Python写的服务监控程序实例
2015/01/31 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python代码区分大小写吗
2020/06/17 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
股权转让意向书
2014/04/01 职场文书
家长对孩子的评语
2014/04/18 职场文书
食品安全处置方案
2014/06/14 职场文书
工作试用期自我评价
2015/03/10 职场文书
戒赌保证书
2015/05/11 职场文书
关于感恩的作文
2019/08/26 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
Redis基本数据类型String常用操作命令
2022/06/01 Redis
python中使用redis用法详解
2022/12/24 Redis