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 插件 人性化的消息显示
Jan 21 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
微信小程序实现手指拖动选项排序
Apr 22 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生成图片验证码、点击切换实例
2014/06/25 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
详解Python当中的字符串和编码
2015/04/25 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python实现中文文本分句的例子
2019/07/15 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
餐饮管理自我介绍信
2014/01/15 职场文书
运动会广播稿400字
2014/01/25 职场文书
班主任寄语大全
2014/04/04 职场文书
竞聘演讲稿
2014/04/24 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
小学班主任评语
2014/12/29 职场文书