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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
如何编写高质量JS代码
Dec 28 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
Vue的编码技巧与规范使用详解
Aug 28 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中文件上传的一个问题
2010/09/04 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
php intval函数用法总结
2019/04/14 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
用jquery来定位
2007/02/20 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
幼师求职信
2014/06/23 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android