JS对象属性排序的小技巧

前面我们讲到数组对象去重的时候,如果由于对象里面的内容是一样,但是属性位置不一样,从而导致我们可能出现无法去重,虽然JSON.stringify()的第二个参数能够自行添加属性到数组里面,但有可能出现我们并不知道对象具体有哪些属性。

如下代码:

function unique(arr) {
	let unique = {};
	arr.forEach(function(item) {
		unique[JSON.stringify(item)] = item;
	})
	arr = Object.keys(unique).map(function(u) {
		return JSON.parse(u);
	})
	return arr;
}
const books = [
    {
        
        author: "Oyinkan Braithwaite" ,
        name: "My Sister the Serial Killer"
    },
    {
        name: "Educated",  
        author: "Tara Westover" 
    },
    {
        name: "My Sister the Serial Killer",  
        author: "Oyinkan Braithwaite" 
    }
];
unique(books);

简单解决方法

把去重函数里的这句:

unique[JSON.stringify(item)] = item;

改为下面这个:

unique[JSON.stringify(item, Object.keys(item).sort())] = item;

这样子就对上面的属性进行了排序。

 

ES2016版,支持数组和对象

function orderedJsonStringify(o) {
  return JSON.stringify(Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {}));
}

那么上面代码则改为这样:

function unique(arr) {
	let unique = {};
	arr.forEach(function(item) {
		unique[orderedJsonStringify(item)] = item;
	})
	arr = Object.keys(unique).map(function(u) {
		//Object.keys()返回对象的所有键值组成的数组,map方法是一个遍历方法,返回遍历结果组成的数组.将unique对象的键名还原成对象数组
		return JSON.parse(u);
	})
	return arr;
}
function orderedJsonStringify(o) {
  return JSON.stringify(Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {}));
}

unique(books); 
// {author"Oyinkan Braithwaite"name"My Sister the Serial Killer"}
// {author"Tara Westover"name"Educated"}

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流