JavaScript 数组对象去重的几种方法

简介: JavaScript 数组对象去重的几种方法

将要过滤的数据,将 arr 里面 city 重复的数据去掉(下面方法中用的arr都是这组数据)

var arr = [
  {id: 1,city: '南京'},
  {id: 2,city: '南京'}, 
  {id: 3,city: '杭州'}, 
  {id: 4,city: '广州'}
];

1. 对象法:数组的 reduce 方法

ie9以下不支持此方法

传送门:reduce 方法详解

var obj = {};
var newArr = arr.reduce((prev,cur)=>{
  obj[cur.city] ? '':obj[cur.city] = true && prev.push(cur);
  return prev
},[]); //  [{id: 1,city: '南京'},{id: 3,city: '杭州'},{id: 4,city: '广州'}]  

2. 冒泡排序法

for (var i = 0; i < arr.length - 1; i++) {
  for (var j = i + 1; j < arr.length; j++) {
    console.log(i,j)
    if (arr[i].city == arr[j].city) {
      arr.splice(j, 1); 
      j--; // 因为数组长度减小1,所以直接 j++ 会漏掉一个元素,所以要 j--
    }
  }
}
console.log(arr); //  [{id: 1,city: '南京'},{id: 3,city: '杭州'},{id: 4,city: '广州'}] 

3. 双重循环

var newArr = [];
arr.forEach((item) => {
  var check = newArr.every((b) => {
    return item.city !== b.city;
  })
  check ? newArr.push(item) : '';
})
console.log(newArr); //  [{id: 1,city: '南京'},{id: 3,city: '杭州'},{id: 4,city: '广州'}]  

4. ES6 Map对象

传送门:Map 对象详解

let formatArr = () => {
  let map = new Map();
  for (let item of arr) {
    if (!map.has(item.city)) {
      map.set(item.city, item);
    }
  }
  return [...map.values()];
}
let newArr = formatArr(); //  [{id: 1,city: '南京'},{id: 3,city: '杭州'},{id: 4,city: '广州'}]  


相关文章
|
13天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
2天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
6天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
6天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查
|
6天前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
|
7天前
|
JavaScript 前端开发
js绑定事件的方法
js绑定事件的方法
22 11
|
8天前
|
JavaScript
JS生成uuid的四种方法
JS生成uuid的四种方法
10 0
|
8天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
16 0
|
8天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
10 0
|
9天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4