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实现轮显新闻标题链接
Aug 13 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP中其实也可以用方法链
2011/11/10 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
js获取变量
2006/08/24 Javascript
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Python中的闭包实例详解
2014/08/29 Python
Python开发的HTTP库requests详解
2017/08/29 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
SQL面试题
2013/12/09 面试题
酒店员工职业生涯规划
2014/02/25 职场文书
公司捐款倡议书
2014/05/14 职场文书
世界遗产的导游词
2015/02/13 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技