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 相关文章推荐
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
numpy自动生成数组详解
2017/12/15 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python 公共方法汇总解析
2019/09/16 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
理货员的岗位职责
2013/11/23 职场文书
十八大感想感言
2014/02/10 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
产品设计开发计划书
2014/05/07 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL