JSON.stringify的妙用,批量删除object的属性

该博客介绍了如何利用JSON.stringify的第二个参数来过滤或保留对象的特定属性。通过示例展示了如何定义一个名为`omit`的函数,根据保留或删除属性的集合来操作对象。文中提到,此方法虽简单但不能处理函数或原型链等复杂情况,并提示查阅MDN文档获取更多关于JSON.stringify的详细信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

说这个功能其实只是要分享JSON.stringify的第二个参数,先看例子

根据obj的key,批量保留或是删除对应的属性

// 目标对象
const example = {
	name:"不知名前端",
	age:18,
	height:180,
	weight:150,
	sex:'boy',
}

// 保留属性集合
const keepAddr = ['age','name','height'];
// 删除属性集合
const deleteAddr = ['height','sex','age'];

// 定义omit函数
function omit(obj,arr,type ='omit'){
	
	if(typeof obj !== 'object' || !Array.isArray(arr)) return;
	
	let tempArr = [];
	if(type === 'omit'){
		tempArr = Object.keys(obj).filter(i => !arr.includes(i));
	}else{
		tempArr = [...arr];
	}
	
	// 核心方法
	return JSON.parse(JSON.stringify(obj,tempArr));
}

const obj1 = omit(example,keepAddr,'keep');
const obj2 = omit(example,deleteAddr,'omit');

console.log(obj1);
/**
* 	{
*		age:18,
*		height:180,
*		name:"不知名前端"
* 	}
*/
console.log(obj2);
/**
* 	{
*		name:"不知名前端"
*		weight:150
* 	}
*/

JSON.stringify(value,replacer,space)

以上的例子,核心就是利用JSON.stringify的第二个参数,对传入的数组类型的属性集合中的属性进行序列化.
也就是说,第一个参数接收一个对象,第二个参数接收一个数组.它会根据数组中包含的属性对obj进行序列化.也就达到了过滤对象属性的目的.当然这种方式的弊端,和利用JSON.stringify进行深拷贝一样,只能进行简单的拷贝,无法保留函数,原型链等等.

关于JSON.stringify的第二个参数还可以接收一个函数,甚至还有第三个参数,这些我们可以在mdn的文档获得更多的帮助.
MDN文档关于JSON.stringify的详细介绍

value.annex = value.invoice ? this.processPictures( value.invoice ) : [] //处理附件 this.formData.oaClaimDetailList[ this.index ].claimAmount = value.applyAmount.toString() //处理报销金额 this.formData.oaClaimDetailList[ this.index ].annex = JSON.parse( JSON.stringify( value.annex ) ) this.formData.oaClaimDetailList[ this.index ].remarks = '' this.formData.oaClaimDetailList[ this.index ].applyAmount = JSON.parse( JSON.stringify( value.applyAmount ) ) this.formData.oaClaimDetailList[ this.index ].applyTime = JSON.parse( JSON.stringify( value.applyTime ) ) this.formData.oaClaimDetailList[ this.index ].applyTimeSearch = JSON.parse( JSON.stringify( value.applyTimeSearch ) ) this.formData.oaClaimDetailList[ this.index ].businessId = JSON.parse( JSON.stringify( value.businessId ) ) this.formData.oaClaimDetailList[ this.index ].businessType = JSON.parse( JSON.stringify( value.businessType ) ) this.formData.oaClaimDetailList[ this.index ].claimId = JSON.parse( JSON.stringify( value.claimId ) ) this.formData.oaClaimDetailList[ this.index ].claimState = JSON.parse( JSON.stringify( value.claimState ) ) this.formData.oaClaimDetailList[ this.index ].createBy = JSON.parse( JSON.stringify( value.createBy ) ) this.formData.oaClaimDetailList[ this.index ].createTime = JSON.parse( JSON.stringify( value.createTime ) ) this.formData.oaClaimDetailList[ this.index ].deptId = JSON.parse( JSON.stringify( value.deptId ) ) this.formData.oaClaimDetailList[ this.index ].endTime = JSON.parse( JSON.stringify( value.endTime ) ) this.formData.oaClaimDetailList[ this.index ].flag = JSON.parse( JSON.stringify( value.flag ) ) this.formData.oaClaimDetailList[ this.index ].id = JSON.parse( JSON.stringify( value.id ) ) this.formData.oaClaimDetailList[ this.index ].invoice = JSON.parse( JSON.stringify( value.invoice ) ) this.formData.oaClaimDetailList[ this.index ].params = JSON.parse( JSON.stringify( value.params ) ) this.formData.oaClaimDetailList[ this.index ].processInstanceId = JSON.parse( JSON.stringify( value.processInstanceId ) ) this.formData.oaClaimDetailList[ this.index ].processName = JSON.parse( JSON.stringify( value.processName ) ) // this.formData.oaClaimDetailList[ this.index ].relatedClaim = JSON.parse( JSON.stringify( value.relatedClaim ) ) this.formData.oaClaimDetailList[ this.index ].relationId = JSON.parse( JSON.stringify( value.relationId ) ) this.formData.oaClaimDetailList[ this.index ].remark = JSON.parse( JSON.stringify( value.remark ) ) this.formData.oaClaimDetailList[ this.index ].searchValue = JSON.parse( JSON.stringify( value.searchValue ) ) this.formData.oaClaimDetailList[ this.index ].startTime = JSON.parse( JSON.stringify( value.startTime ) ) this.formData.oaClaimDetailList[ this.index ].state = JSON.parse( JSON.stringify( value.state ) ) this.formData.oaClaimDetailList[ this.index ].tenantId = JSON.parse( JSON.stringify( value.tenantId ) ) this.formData.oaClaimDetailList[ this.index ].updateBy = JSON.parse( JSON.stringify( value.updateBy ) ) this.formData.oaClaimDetailList[ this.index ].updateTime = JSON.parse( JSON.stringify( value.updateTime ) ) this.formData.oaClaimDetailList[ this.index ].userId = JSON.parse( JSON.stringify( value.userId ) ) 代码优化
03-11
const modules = import.meta.glob("./../../views/**/*.vue"); const usePermissionStore = defineStore("permission", () => { // 状态定义 const routes = ref([]) const addRoutes = ref([]) const defaultRoutes = ref([]) const topbarRouters = ref([]) const sidebarRouters = ref([]) // 工具函数 const filterChildren = (childrenMap, lastRouter = false) => { return childrenMap.flatMap(el => { el.path = lastRouter ? `${lastRouter.path}/${el.path}` : el.path return el.children?.length && el.component === "ParentView" ? filterChildren(el.children, el) : el }) } const loadView = (view) => { const modulePath = Object.keys(modules).find(path => { const dir = path.split("views/")[1].split(".vue")[0] return dir === view }) return modulePath ? () => modules[modulePath]() : null } const filterAsyncRouter = (asyncRouterMap, lastRouter = false, type = false) => { return asyncRouterMap.filter(route => { if (type && route.children) { route.children = filterChildren(route.children) } if (route.component) { route.component = { Layout, ParentView, InnerLink }[route.component] || (loadView(route.component) || notRouterComp) } if (route.children?.length) { route.children = filterAsyncRouter(route.children, route, type) } else { delete route.children delete route.redirect } return true }) } const filterDynamicRoutes = (routes) => { return routes.filter(route => (route.permissions && auth.hasPermiOr(route.permissions)) || (route.roles && auth.hasRoleOr(route.roles)) || (!route.permissions && !route.roles) ) } // 操作方法 const setRoutes = (newRoutes) => { addRoutes.value = newRoutes routes.value = [...constantRoutes, ...newRoutes] } const setDefaultRoutes = (newRoutes) => { defaultRoutes.value = [...constantRoutes, ...newRoutes] } const setTopbarRoutes = (newRoutes) => { topbarRouters.value = newRoutes } const setSidebarRouters = (newRoutes) => { sidebarRouters.value = newRoutes } // 核心方法 const generateRoutes = async () => { try { const res = await getRouters() const cloneData = data => JSON.parse(JSON.stringify(data)) const sdata = cloneData(res.data) const rdata = cloneData(res.data) const defaultData = cloneData(res.data) const sidebarRoutes = filterAsyncRouter(sdata) const rewriteRoutes = filterAsyncRouter(rdata, false, true) const defaultRoutes = filterAsyncRouter(defaultData) filterDynamicRoutes(dynamicRoutes).forEach(route => router.addRoute(route)) setRoutes(rewriteRoutes) setSidebarRouters([...constantRoutes, ...sidebarRoutes]) setDefaultRoutes(sidebarRoutes) setTopbarRoutes(defaultRoutes) return rewriteRoutes } catch (error) { console.error("路由生成失败:", error) return [] } } return { routes, addRoutes, defaultRoutes, topbarRouters, sidebarRouters, generateRoutes } }) 你会怎么写 会怎么让代码更简单 性能更好 别用ts
最新发布
03-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值