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 相关文章推荐
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
JS高级笔记
Jul 13 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
如何更好的编写js async函数
May 13 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 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中的string类型使用说明
2010/07/27 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
js禁止表单重复提交
2017/08/29 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
vue实现微信分享功能
2018/11/28 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
pytorch 数据集图片显示方法
2018/07/26 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python绘制动态水球图过程详解
2020/06/03 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
我是一名护士演讲稿
2014/08/28 职场文书
骨干教师个人总结
2015/02/11 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers