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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
js实现盒子拖拽动画效果
Aug 09 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
提问的智慧
2006/10/09 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
php加密解密字符串示例
2016/10/13 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
大学生党员自我批评
2014/02/14 职场文书
微信营销策划方案
2014/02/24 职场文书
中秋晚会策划方案
2014/06/12 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
单位综合评价意见
2015/06/05 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python