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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
python实现备份目录的方法
2015/08/03 Python
python 异常处理总结
2016/10/18 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
波兰珠宝品牌:YES
2019/08/09 全球购物
应届生求职信范文
2014/05/26 职场文书
公司任命书模板
2014/06/06 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
党员个人整改措施
2014/10/24 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
任命通知范文
2015/04/21 职场文书