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 相关文章推荐
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
php接口技术实例详解
2016/12/07 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
js根据日期判断星座的示例代码
2014/01/23 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
js实现带搜索功能的下拉框
2020/01/11 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
python读取Android permission文件
2013/11/01 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
python中正则表达式的使用方法
2018/02/25 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
QML使用Python的函数过程解析
2019/09/26 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
如何教少儿学习Python编程
2020/07/10 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
工作室成员个人发展规划范文
2014/01/24 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
用人单位聘用意向书
2015/05/11 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python