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 学习笔记(十一)
Jan 19 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
vue的状态管理模式vuex
Nov 30 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
JavaScript语法约定和程序调试原理解析
Nov 03 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 FLEA中二叉树数组的遍历输出
2012/09/26 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP 文件上传限制问题
2019/09/01 PHP
短信提示使用 特效
2007/01/19 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
Python 初始化多维数组代码
2008/09/06 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
RIP版本1跟版本2的区别
2013/12/30 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
通信工程求职信
2014/07/16 职场文书
档案工作汇报材料
2014/08/21 职场文书
教师自我剖析材料
2014/09/29 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书