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 获得选中文本内容的方法
Feb 15 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
Angular单元测试之事件触发的实现
Jan 20 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生成UTF8文件的方法
2010/05/15 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
javascript简单实现命名空间效果
2014/03/06 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
js实现自定义路由
2017/02/04 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
涉密人员保密承诺书
2014/05/28 职场文书
企业总经理任命书
2014/06/05 职场文书
建筑安全标语
2014/06/07 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
体育活动总结
2015/02/04 职场文书
Django程序的优化技巧
2021/04/29 Python
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫