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 相关文章推荐
解析jquery获取父窗口的元素
Jun 26 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JavaScript中string对象
Jun 12 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
毕业生就业自荐信
2013/12/04 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
MySQL触发器的使用
2021/05/24 MySQL
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
全新239军机修复记
2022/04/05 无线电
解决MySQL报“too many connections“错误
2022/04/19 MySQL
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL