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实现可拖拽的拖动层Div实例
Aug 05 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
element tree树形组件回显数据问题解决
Aug 14 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
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
javascript运动详解
2015/07/06 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
Python深入学习之闭包
2014/08/31 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
给男朋友的道歉信
2014/01/12 职场文书
自我鉴定注意事项
2014/01/19 职场文书
保护环境倡议书300字
2014/05/19 职场文书
空气环保标语
2014/06/12 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
贷款担保书范本
2015/09/22 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技