前端笔记 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,[]))