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 相关文章推荐
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
javascript 中的继承实例详解
May 05 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
vue如何判断dom的class
Apr 26 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 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 foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers