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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
canvas的神奇用法
Feb 03 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
js实现提交前对列表数据的增删改查
Jan 16 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计算十二星座的函数代码
2012/08/21 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
重定向实现代码
2006/11/20 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python绘制圆柱体的方法
2018/07/02 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
公司接待方案
2014/03/08 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python