您的位置 首页 php

前端笔记(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("#34;,"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,[]))  

海瑞菌

文章来源:智云一二三科技

文章标题:前端笔记(flex,split,css选择器,数组多维转一维)

文章地址:https://www.zhihuclub.com/77293.shtml

关于作者: 智云科技

热门文章

网站地图