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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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将向Java靠拢
2006/10/09 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
php json相关函数用法示例
2017/03/28 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
JavaScript 的继承
2011/10/01 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
大学毕业自我评价
2014/02/02 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
门店店长岗位职责
2015/04/14 职场文书
农村党支部承诺书
2015/04/30 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android