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的仿照flash放大图片效果代码
Mar 16 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
jQuery事件详解
2017/02/23 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
Python全局变量用法实例分析
2016/07/19 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Python dict的常用方法示例代码
2020/06/23 Python
pycharm实现猜数游戏
2020/12/07 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
餐饮加盟计划书
2014/01/10 职场文书
保护环境倡议书300字
2014/05/19 职场文书
服装设计专业自荐信
2014/06/17 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
单位租房协议范本
2014/12/03 职场文书
企业战略合作意向书
2015/05/08 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server
bat批处理之字符串操作的实现
2022/03/16 Python