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小技巧之生成html元素
May 15 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
图解JavaScript中的this关键字
May 28 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
js中switch语句的学习笔记
Mar 25 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中的类型提示(type hinting)功能介绍
2015/07/01 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
js实现弹窗效果
2020/08/09 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python读取目录下最新的文件夹方法
2018/12/24 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
新闻专业个人自我评价
2013/09/21 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
保证书格式
2015/01/16 职场文书
春季运动会开幕词
2015/01/28 职场文书
叶问观后感
2015/06/15 职场文书
Python类方法总结讲解
2021/07/26 Python
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技