前端 JS 经典:数组去重万能方法

简介: 前端 JS 经典:数组去重万能方法
前言:只需要掌握这一个方法,就可以对有任何重复的数据数组,进行去重了。

可以自己思考下,怎么对以下对象数组去重:

const arr = [
  { a: 1, b: 2 },
  { b: 2, a: 1 },
  { a: 1, b: 2, c: { a: 1, b: 2 } },
  { b: 2, a: 1, c: { b: 2, a: 1 } },
];

开始构建去重函数:

// 判断是否对象
const isObject = (val) => typeof val === "object" && val !== null;
 
// 判断两个数据是否相同
const equals = (val1, val2) => {
  if (!isObject(val1) || !isObject(val2)) return Object.is(val1, val2);
  if (val1 === val2) return true;
 
  const val1Keys = Object.keys(val1);
  const val2Keys = Object.keys(val2);
  if (val1Keys.length !== val2Keys.length) return false;
  for (const key of val1Keys) {
    if (!val2Keys.includes(key)) {
      return false;
    }
    const res = equals(val1[key], val2[key]);
    if (!res) return false;
  }
  return true;
};
 
// 数组去重
const deduplication = (arr) => {
  const newArr = [...arr];
  for (let i = 0; i < newArr.length; i++) {
    for (let j = i + 1; j < newArr.length; j++) {
      if (equals(newArr[i], newArr[j])) {
        newArr.splice(j, 1);
        j--;
      }
    }
  }
  return newArr;
};

使用去重函数,newArr 就是去重后返回的数组:

let newArr = deduplication(arr);


目录
相关文章
|
1天前
|
JavaScript 算法
JS代码压缩方法详解
JS代码压缩方法详解
12 4
|
1天前
|
缓存 JavaScript 前端开发
JS代码拆分方法 是对的还是错的?
JS代码拆分方法 是对的还是错的?
|
1天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
11 3
|
1天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
13 2
|
1天前
|
JSON JavaScript 前端开发
Javascript 模块化编程的方法和代码
Javascript 模块化编程的方法和代码
11 1
|
1天前
|
Web App开发 数据采集 JavaScript
python执行js代码几个方法
python执行js代码几个方法
|
1天前
|
缓存 JavaScript 前端开发
正确拆分JS代码的方法
正确拆分JS代码的方法
|
3天前
|
JavaScript 前端开发
JS遍历数组和对象的常用方法有哪些?
JS遍历数组和对象的常用方法有哪些?
7 0
|
3天前
|
JavaScript 前端开发
JS中访问节点和创建节点的方法都有什么?
JS中访问节点和创建节点的方法都有什么?
7 0
|
3天前
|
JavaScript 前端开发 索引
JS遍历数组的方法有哪些?
JS遍历数组的方法有哪些?
8 0