前端笔记 2020.4.8(flex,split,css选择器,数组多维转一维)
flex 完成布局:
1、4两个定宽,2、3两个不定宽,定比例,4偏上
flex css的考察
html
<div class="flex"> <div class="d d1"></div> <div class="d d2"></div> <div class="d d3"></div> <div class="d d4"></div> </div>
css
.flex{ display: flex; width: 98%; height: 220px; border: 1px solid red; } .flex .d{ border: 1px solid red; margin: 4px; } .d1{ width: 200px; } .d2{ flex: 1.5; } .d3{ flex: 1; height: 150px; align-self:center; } .d4{ width: 200px; height: 100px; }
实现fn,获取url的参数值
split字符串转分割为数组
function fn(url,name){ //补充代码 let obj={} let si=url.indexOf("?") let str=url.substring(si+1) let arr=str.split("&") for(let i=0;i<arr.length;i++){ let key=arr[i].split("=")[0] let value=arr[i].split("=")[1] obj[key]=value } console.log(obj[name]) } fn("http://www.baidu.com/?a=1&b=2","a")//1
css选择器的含义
E,F //两个选择器样式相同 E F //两个选择器是父子关系,可能多级 E > F //两个选择器是直接父子关系 E + F //两个选择器是前后2个直接兄弟关系 E ~ F //表示匹配E选择器后面的所有F选择器元素的关系
实现 walk 函数,将树结构的数据转化为列表数据(多维转一维)
var input=[{ id: 1, text: 'text1', children: [{ id: 2, text: 'text2', parentId: 1, children: [{ id: 4, text: 'text4', parentId: 2 }] }, { id: 3, text: 'text3', parentId: 1 }] }] var output=[{ id: 4, text: 'text4', parentId: 2 }, { id: 2, text: 'text2', parentId: 1 }, { id: 3, text: 'text3', parentId: 1 }, { id: 1, text: 'text1' }, ]; //实现 function walk(arr,res){ let i=0 for(i=0;i<arr.length;i++){ let chlid=arr[i].children if(!chlid){//无子 res.push(arr[i]); }else{//有子 delete arr[i].children res.push(arr[i]); if(chlid instanceof Array){ walk(chlid,res) } } } return res } console.log(walk(input,[]))
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用