木灵鱼儿
阅读：1728
对象扁平化
前言
后端返回给前端的数据，有时候会是一个多层级对象，但是我们前端使用的时候，for循环遍历渲染时，多层级对象往往需要进行单独处理，因为还需要判断这个key值是否存在，否则会报错。
强行让后端改变数据结构又好像不现实，无奈，只有自己处理了。
掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》
感觉很合适，逻辑清晰。
要求
将对象中的层级扁平化，改成如下格式：
// 实现一个 flatten 函数，实现如下的转换功能
const obj = {
a: 1,
b: [1, 2, { c: true }],
c: { e: 2, f: 3 },
g: null,
};
// 转换为
let objRes = {
a: 1,
"b[0]": 1,
"b[1]": 2,
"b[2].c": true,
"c.e": 2,
"c.f": 3,
g: null,
};其实说白了就是将对象中的引用类型变成基本类型，遍历层级处理。
方法
//对象扁平化
function objectFlat(data) {
let newObj = {};
let process = (key, value) => {
if (Object(value) !== value) {
//普通类型、null、undefind
newObj[key] = value;
} else {
//引用类型
if (Array.isArray(value)) {
value.forEach((childVal, childIndex) => {
process(`${key}[${childIndex}]`, childVal);
});
//空数组赋值空数组
if (value.length === 0) newObj[key] = [];
} else {
const keyArr = Object.keys(value);
keyArr.forEach((childKey) => {
process(`${key}.${childKey}`, value[childKey]);
});
//为空赋值空对象
if (keyArr.length === 0) newObj[key] = {};
}
}
};
Object.keys(data).forEach((key) => process(key, data[key]));
return newObj;
}版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。
相关推荐
完善版 对象扁平化和反扁平化
对象扁平化其中objectDit表示的是对象的分割符/** * @description: 对象扁平化 * @param {object} data * @Date: 2022-06-01 17:41:13 * @Author: mulingyuer */ export function objectFlat(data: object, options = { objectDit: "." }): object { let newObj = {}; let process = (key: string, value: any) => { ...
第四章 对象的创建
命名空间在ESM模块化还未出来之前，用于减少全局变量名污染的一种做法就是使用命名空间，其做法也非常简单，就是创建一个全局的变量，然后将内容都赋值给这个变量，从而减少对全局变量的使用。//创建命名空间 var MYAPP = {}; //构造函数 MYAPP.Parent = function(){}; MYAPP.Child = function(){}; // 一个变量 MYAPP.some_var =1; // 一个对象容器 MYAPP.modules ={}; // 嵌套的对象 MYAPP.modules.module1 ={}; MYAPP.modules.module1...
Promise失败重试，可指定重试次数
//模拟异步请求 function axiosFn() { return new Promise((resolve, reject) => { const flge = Math.random(); //随机值 setTimeout(() => { //大于0.7就是成功 if (flge > 0.7) { return resolve(flge); } else { return reject(...
animation 动画的三个事件
const div = document.querySelector("div.box"); div.addEventListener("animationstart", function() { //动画开始运行触发 }); div.addEventListener("animationiteration", function() { //动画每执行一次触发一次，适用用多次动画 }); div.addEventListener("animationend", function() { //...
手写Promise
/* * @Author: mulingyuer * @Date: 2021-12-30 22:06:58 * @LastEditTime: 2022-01-03 05:22:30 * @LastEditors: mulingyuer * @Description: 手写promise * @FilePath: \undefinedc:\Users\13219\Desktop\promise.js * 怎么可能会有bug！！！ */ /** * @description: 自定义promise * @param {fucntion} executor 执行器函数(同...
深度合并对象的方法
找了很久，现有的库有两个：1. Mergenpm地址： Merge用法：import merge from 'merge'; const obj1 = { name: 2}; const obj2 = { value: 1 }; //合并 merge(obj1,obj2); console.log(obj1); //{name:2,value:1} //克隆合并-与目标对象无关联 const obj3 = merge(true,obj1,obj2); console.log(obj3); //{name:2,value:1} console.log(obj3 === obj1)...
利用JSON过滤对象和数组中指定的key属性
有时候我们在vue中进行for循环，就会涉及到绑定唯一值key的问题，但是并不是任何时候都会存在所谓的唯一值，使用index下标明显是不合适的，官方也不推荐，除非你for循环出来的列表不用变化。所以一般常用的做法就是给for循环的对象添加一个属性，属性的值是随机的uuid或者时间戳。这样前端问题解决了，如果遍历的数据还需要提交到后端，那么不就多了一个属性，这个属性后端不需要的。所以，我们需要在提交数据前，对数据进行过滤。过滤又得for循环删除？那怎么行，有没有那种通用的，简单的方法。过滤方法/** * @description: 过滤对象中指定的属性,也可以拿来浅拷贝 * @para...
Copy 一个复制操作的类
前言js有一个31k多的star的开源复制库：clipboard.js；但是一些简单复制并不想安装一个库来解决，所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分，通过toString()方法可以获取被选中的文本内容，以及js操作选中。MDN文档：SelectionexecCommand 对象用于以命令的形式来操作网页的内容，说白了就是用它来实现复制文本操作，复制的是选中的文本MDN文档：execCommand 需要注意的是，execCommand在未来将会被遗弃，因为这个api本身是从ie浏览器那边继承的，久而久之各大浏览器都对其做了兼容，虽然...