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 相关文章推荐
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
angular组件间传值测试的方法详解
May 07 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
Linux编译升级php的详细方法
2013/11/04 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
Python 学习笔记
2008/12/27 Python
复习Python中的字符串知识点
2015/04/14 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
员工安全承诺书
2014/05/22 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android