JavaScrip数组去重操作实例小结


Posted in Javascript onJune 20, 2019

本文实例讲述了JavaScrip数组去重操作。分享给大家供大家参考,具体如下:

内置的for-of方法

<script>
var arr=[2,1,1,3,'','','e','e',true,'true',true,false,false,'false',undefined,'undefined',undefined,null,'null',null];
function uniqueUseForOf(array) {
  const temp = []; //一个临时数组
  // 传入值必须存在,且长度小于等于1的时候直接返回数组
  if (array && array.length <= 1) {
    return array;
  } else {
    //遍历当前数组
    for (let x of array) {
      temp.indexOf(x) === -1 ? temp.push(x) : '';
    }
  }
  return temp;
}
uniqueUseForOf(arr);
console.log(uniqueUseForOf(arr))
</script>

运行结果:

JavaScrip数组去重操作实例小结

内置的forEach方法

<script>
var arr=[3,1,1,3,'','','e','e',true,'true',true,false,false,'false',undefined,'undefined',undefined,null,'null',null];
function uniqueUseForEach(array) {
  // 传入值必须存在,且长度小于等于1的时候直接返回数组
  if (array && array.length <= 1) {
    return array;
  } else {
    var temp = []; //一个临时数组
    //遍历当前数组
    array.forEach(function (value, index) {
      temp.indexOf(value) == -1 ? temp.push(value) : '';
    })
    return temp;
  }
}
uniqueUseForEach(arr);
console.log(uniqueUseForEach(arr))
</script>

运行结果:

JavaScrip数组去重操作实例小结

万能的for方法

<script>
var arr=[1,1,'','','e','e',true,'true',true,false,false,'false',undefined,'undefined',undefined,null,'null',null];
function uniqueUseFor(array) {
  var temp = []; //一个临时数组
  //遍历当前数组
  for (var i = 0, j = array.length; i < j; i++) {
    //很直白,新数组内判断是否有这个值,没有的情况下,就推入该新数组
    temp.indexOf(array[i]) === -1 ? temp.push(array[i]) : '';
  }
  return temp;
}
uniqueUseFor(arr);
console.log(uniqueUseFor(arr))
</script>

运行结果:

JavaScrip数组去重操作实例小结

第一种方法:

<script>
var arr = [1, 2, 3, 4, 1, 2, 4, 5, 6];
console.log(arr);
Array.prototype.unique = function() {
  var n = [this[0]]; //结果数组
  for(var i = 1; i < this.length; i++) //从第二项开始遍历
  {
    //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
    //那么表示第i项是重复的,忽略掉。否则存入结果数组
    if(this.indexOf(this[i]) == i) n.push(this[i]);
  }
  return n;
};
console.log(arr.unique());
</script>

第二种方法:

<script>
var arr = [1,2,3,4,1,2,4,5,6];
console.log(arr);
Array.prototype.unique = function()
{
  var n = {},
    r = []; //n为hash表,r为临时数组
  for (var i = 0; i < this.length; i++) { //遍历当前数组
    if (!n[this[i]]) { //如果hash表中没有当前项
      n[this[i]] = true; //存入hash表
      r.push(this[i]); //把当前数组的当前项push到临时数组里面
    }
  }
  return r;
};
console.log(arr.unique());
</script>

第三种方法:

<script>
var arr = [1,2,3,4,1,2,4,5,6];
console.log(arr);
Array.prototype.unique = function() {
  var n = []; //一个新的临时数组
  for (var i = 0; i < this.length; i++) //遍历当前数组
  {
    //如果当前数组的第i已经保存进了临时数组,那么跳过,
    //否则把当前项push到临时数组里面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
  }
  return n;
};
console.log(arr.unique());
</script>

上述三种方法运行结果为:

JavaScrip数组去重操作实例小结

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
js 图片懒加载的实现
Oct 21 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 #Javascript
JavaScript命名空间模式实例详解
Jun 20 #Javascript
npm的lock机制解析
Jun 20 #Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 #Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 #Javascript
如何在微信小程序中实现Mixins方案
Jun 20 #Javascript
js JSON.stringify()基础详解
Jun 19 #Javascript
You might like
php的ajax简单实例
2014/02/27 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
js模拟类继承小例子
2010/07/17 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
nodejs基础应用
2017/02/03 NodeJs
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python中动态创建类实例的方法
2017/03/24 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
JAVA和C++的区别
2013/10/06 面试题
internal修饰符起什么作用
2013/12/16 面试题
大学生职业生涯规划书前言
2014/01/09 职场文书
《阳光》教学反思
2014/02/23 职场文书
投资意向书
2014/07/30 职场文书
售后服务质量承诺书
2015/04/29 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python