JS基于开关思想实现的数组去重功能【案例】

本文实例讲述了JS基于开关思想实现的数组去重功能。分享给大家供大家参考，具体如下：

场景: 比如给你一个数组var Arr = [ 25, 70, 60, 70, 65, 65, 80 ],最终要得到去重后的新数组[25,70,60,65,80].

思路:

1.先定义个空的新数组newArr;
2.遍历旧数组Arr 中所有元素;
3.定义一个isZai变量表示开关，默认为false状态;
4.遍历新数组所有元素与旧数组元素比较(Arr[ i ] == newArr[ j ]);
5.如果该元素存在于新数组中，则改变开关状态为true;
6.根据开关状态实现需求:如果开关为false状态，则将旧数组的元素添加到新数组中;
7.最后打印新数组

js代码如下

<script>
var Arr = [ 25, 70, 60, 70, 65, 65, 80 ];//最终得到[25,70,60,65,80]
//1.先定义个空的新数组newArr;
var newArr=[];
//2.遍历旧数组Arr 中所有元素;
for(var i=0;i<=Arr.length;i++){
 //3.定义一个isZai变量表示开关，默认为false状态;
 var isZai=false;
 for(var j=0;j<=newArr.length;j++){
 // 4.遍历新数组所有元素与旧数组元素比较(Arr[ i ] == newArr[ j ]);
  if(Arr[ i ] == newArr[ j ]){
  //5.如果该元素存在于新数组中，则改变开关状态为true;
  isZai=true;//假设被推翻
  break;//一旦重复后面没有比较必要
 }
 }
 // 6.根据开关状态实现需求:如果开关为false状态，则将旧数组的元素添加到新数组中;
 if(isZai==false){
  newArr[newArr.length]=Arr[i];
 }
}
 console.log ( newArr )//打印新数组[25,70,60,65,80]
</script>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：

PS：这里再为大家提供几款相关工具供大家参考使用：

在线去除重复项工具：
http://tools.jb51.net/code/quchong

在线文本去重复工具：
http://tools.jb51.net/aideddesign/txt_quchong

更多关于JavaScript相关内容还可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript结合CSS实现苹果开关按钮特效

    javascript结合CSS实现苹果开关按钮特效

    苹果开关按钮效果~~ 关闭时                                      开启时 html 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>apple button</title> </head> <body>  

  • JavaScript实现开关等效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>开关灯</title> <style type="text/css"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; cur

  • js中开关变量使用实例

    js中开关变量使用实例

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; font-family: "微软雅黑"; } #wrap{ width: 400px; height: 500px; border: 1px solid #c

  • js操作css属性实现div层展开关闭效果的方法

    本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma

  • 使用jQuery和PHP实现类似360功能开关效果

    使用jQuery和PHP实现类似360功能开关效果

    准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下: 复制代码 代码如下: CREATE TABLE `pro` (    `id` int(11) NOT NULL auto_increment,    `title` varchar(50) NOT NULL,    `description` varchar(200) NOT NULL,    `status` tinyint(1) NOT NULL default '0',    PRIMARY KE

  • js实现按钮开关单机下拉菜单效果

    js实现按钮开关单机下拉菜单效果

    通过onclick单击事件,实现效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开关按钮设置</title> </head> <link rel="stylesheet" href="css/Default style sheet.css" rel="exte

  • jQuery 如何实现一个滑动按钮开关

    jQuery 如何实现一个滑动按钮开关

    滑动开关按钮大家在各大网站都能见到,下面小编给大家分享一篇基于jquery实现的一个滑动按钮开关效果,感兴趣的朋友可以参考下实现代码. 先给大家展示下效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery做的滑动按钮开关</title> <link rel="sty

  • JS/jQuery实现简单的开关灯效果【案例】

    JS/jQuery实现简单的开关灯效果【案例】

    本文实例讲述了JS/jQuery实现简单的开关灯效果.分享给大家供大家参考,具体如下: 实现效果: html结构只有两个button标签 <button id="left">开灯</button> <button id="right">关灯</button> 方法一:用原生js来做 <script> //1.获取页面元素 var left=document.getElementById('left'); v

  • jQuery+PHP打造滑动开关效果

    jQuery+PHP打造滑动开关效果

    本文介绍了使用jQuery.PHP和MySQL实现类似360安全卫士防火墙开启关闭的开关,可以将此功能应用在产品功能的开启和关闭功能上. 准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下: 复制代码 代码如下: CREATE TABLE `pro` (    `id` int(11) NOT NULL auto_increment,    `title` varchar(50) NOT NULL,    `description` varchar(200)

  • JQuery对class属性的操作实现按钮开关效果

    在本文中用JQuery对class属性的操作方法实现页面中的按钮开关效果. 首先定义两个class: 复制代码 代码如下: .controlOff{ display:inline-block; width:130px; height:36px; cursor:pointer; background-image:url("../iclass/images/teach_off.png"); background-repeat: no-repeat; } .controlOn{ displa

  • JS 简单展开关闭切换代码

    第一种方法:原理比较简单通过判断当前是隐藏还是显示的,并以此来判断. function show() { var a=document.getElementById('aa'); a.style.display=="none"?a.style.display="":a.style.display="none"; } 操作 我们 欢迎你 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 第二种:更简单,但原理不是一眼能看出来能详解的朋友可

随机推荐