数据格式处理
原始数据
let obj={
"第一级1":{
'第二级1.1':['第三级1.1'],
'第二级1.2':['第三级1.2'],
},
"第一级2":{
'第二级2.1':['第三级2.1'],
'第二级2.2':['第三级2.2'],
},
}
需要处理成
let arr=[
{
label:"第一级1",
children:[
{
label:"第二级1.1",
children:[
{
label:"第三级1.1"
}
]
},
{
label:"第二级1.2",
children:[
{
label:"第三级1.2"
}
]
}
]
}..........
]
function tranverse(obj){
if (Array.isArray(obj)) {
return obj.map(item => ({label: item}));
} else {
let res = [];
for(let key in obj) {
res.push({
label: key,
children: tranverse(obj[key])
})
}
return res;
}
}
封装防抖
//封装防抖
function debounce(fn){
let timer = null;
function eventFun(){
if(timer != null){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn();
timer = null;
},500)
}
return eventFun
}
window.onscroll = debounce(() => {
console.log('Hello world') //业务代码
})
封装节流
//封装节流
function debounce(fn) {
let mark = true;
function eventFun() {
if (mark) {
setTimeout(() => {
fn();
mark = true;
}, 500)
}
mark = false;
}
return eventFun
}
window.onscroll = debounce(() => {
console.log('Hello world')//业务代码
})
闭包 > 计时器 > 防抖节流 > 实现闭包封装防抖节流
问题解答:
答:可以使用递归的方式来将对象层级的数据转换成数组层级的数据格式。具体实现步骤如下:
定义一个递归函数,参数为当前对象和当前层数,存储每一层级的数据的数组,默认为空数组。
判断当前对象是否为原始数据类型(string/number/boolean等),如果是,则将该数据作为当前层级的唯一元素放入该层级的数组中。
如果当前对象为数组类型,则遍历数组,对每个元素递归调用该函数,层数加一,将返回的数组作为该元素对应的层级。
如果当前对象为对象类型,则遍历对象的属性,对每个属性值递归调用该函数,层数加一,将返回的数组作为该属性值对应的层级。同时需要在该层级数组中添加一个属性名为当前属性名的对象,表示该对象为当前层级的一个元素。
在函数结束的时候,返回存储各层级数据的数组即可。
实现代码如下:
function objectToArray(obj, depth = 0, arr = []) {
if (typeof obj !== 'object') { // 如果是原始数据类型,则作为该层级的唯一元素
arr[depth] = [obj];
} else if (Array.isArray(obj)) { // 如果是数组类型,则递归处理每个元素
arr[depth] = [];
obj.forEach((item) => {
const itemArr = objectToArray(item, depth + 1);
arr[depth] = arr[depth].concat(itemArr);
});
} else { // 如果是对象类型,则遍历属性并递归处理属性值
arr[depth] = [];
Object.keys(obj).forEach((key) => {
const objArr = objectToArray(obj[key], depth + 1);
arr[depth].push({ [key]: objArr.flat() });
});
}
return arr;
}
// 调用示例
const nestedObj = {
name: 'john',
age: 30,
hobbies: ['swimming', 'reading', 'running'],
address: {
city: 'New York',
zip: '12345',
street: 'main street',
coordinates: {
lat: 40.1234,
lng: -74.5678
}
}
};
const arr = objectToArray(nestedObj);
console.log(arr);
// [
// [{ name: ['john'] }, { age: [30] }],
// ['swimming', 'reading', 'running'],
// [{ city: ['New York'] }, { zip: ['12345'] }, { street: ['main street'] }, { coordinates: [{ lat: [40.1234] }, { lng: [-74.5678] }] }]
// ]
上述代码中,我们通过递归方式将嵌套的对象数据转换成了多维数组形式。该函数的输入为需要转换的对象,输出为一个存储每一层级数据的多维数组。
需要注意的一点是,上述代码中空数组需要通过flat()
方法将内部元素提取出来。这是因为在处理对象嵌套的情况下,每个层级数据对应的数组可能为空数组,这会导致最终的输出数组中出现空项。通过调用flat()
方法,我们可以将空数组中的元素去除,使输出更加清晰。