JavaScript中如何对多维数组(矩阵)去重的实现


Posted in Javascript onDecember 04, 2019

今天碰到了一个问题,需要对一个数组矩阵进行去重处理。

比如如下数组矩阵:

[ [1, 2, 3], [2, 3, 4], [2, 1, 3], [5, 6, 7] ]

接下来是去重处理的方法。

1.适用于纯数字数组矩阵和字符数字数组矩阵

// 本节用例:
// 1.纯数字数组矩阵
[
  [1, 2, 3],
  [2, 3, 4],
  [2, 1, 3],
  [5, 6, 7]
]
// 2.字符数字数组矩阵
[
  ['1', '2', '3'],
  ['2', '3', '4'],
  ['2', '1', '3'],
  ['5', '6', '7']
]

// 如果数字和字符数字混合的话,类似于 [1, '2', 3] 和 ['1', '2', 3] 会被认为是等价的...

主要利用对象属性名比较的方法,因为一个对象中每个属性的属性名是唯一的。

function unique(matrix) {
  let obj = {};
  let res = [];
  matrix.map(item => {
    item.sort((a, b) => a - b);
    if (!obj.hasOwnProperty(item)) {// 判断对象中是否有这个属性名
      obj[item] = item;
      res.push(item);
    }
  })
  return res;
}

上面的方法可以进一步优化成为:

// 这样更简洁
function unique(matrix) {
  let res = {};
  matrix.map(item => {
    item.sort((a, b) => a - b);
    res[item] = item;
  })
  return Object.values(res);
}

2.适用于纯文字字符数组矩阵

// 本节用例:
// 纯文字字符数组矩阵
[
  ["你的", "我", "它"],
  ["我", "你的", "它"],
  ["一", "二", "三"],
  ["三", "二", "一"],
  ["你d", "a", "它"],
  ["a", "你d", "它"],
  ["one", "two", "three"],
  ["three", "two", "one"]
]

分别利用对象属性名比较和ES6语法中的Set

(1) 利用属性名比较,将上面的方法稍微改动一下就可以实现

// 数组元素可能位置不同但元素内容相同,所以必须按照某一顺序对其进行排序,这里按首字母对字符串进行排序
function _unique(matrix) {
  let res = {};
  matrix.map(item => {
    item.sort((a, b) => a.localeCompare(b));
    res[item] = item;
  })
  return Object.values(res);
}

(2) 利用ES6语法中的Set,Set中的每个值都是唯一的

function _unique(matrix) {
  let res = [];
  matrix.map(item => {
    res.push(item.sort((a, b) => a.localeCompare(b)).toString());
  })
  // return Array.from(new Set(res)).map(item => item.split(','))
  return [...new Set(res)].map(item => item.split(','));// 上下等价
}

源码在此

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
jquery之Document元素选择器篇
Aug 14 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 #Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 #Javascript
Vue实现图片与文字混输效果
Dec 04 #Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 #Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 #Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 #Javascript
vue项目中极验验证的使用代码示例
Dec 03 #Javascript
You might like
深入PHP异步执行的详解
2013/06/03 PHP
初学Javascript的一些总结
2008/11/03 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
python在控制台输出进度条的方法
2015/06/20 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
python爬取微信公众号文章
2018/08/31 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
财务管理专业推荐信
2013/11/19 职场文书
护理专业自荐信
2013/12/03 职场文书
课程设计心得体会
2013/12/28 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
业务员自荐信范文
2014/04/20 职场文书
中队活动总结
2014/08/27 职场文书
受资助学生感谢信
2015/01/21 职场文书
通知函格式范文
2015/04/27 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python