数组数据的拼接、换行

网页布局与换行技巧

最新推荐文章于 2022-10-14 10:53:55 发布

原创最新推荐文章于 2022-10-14 10:53:55 发布 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

需求：页面渲染得效果是a:b换行展示

a:b

····

以及多个b得时候，也换行展示

```

页面效果：

控制台输出：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">标题：</div>
    <div id="box1">标题1：</div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    let a=["工作日几天", "作息时间", "福利"]
    let b=["5天", "朝九晚六", "餐补"]
    //需求：页面渲染结构是 a:b，a:b
    let c='';
    for(let i=0;i<a.length;i++){
            console.log("拼接a,b",a[i]+":"+b[i]+",")
            c+=a[i]+":"+b[i]+"</br>"
        
        
    }
    console.log("c   ",c)

    //换行
    let bStr=''
    for(let i in a){
        bStr+=a[i]+"</br>"
    }
    console.log("bStr ",bStr)
           $("#box").append(c)
           $("#box1").append(bStr)
           
        
    </script>
</body>
</html>


优化：因为上面二个循环有些相似，现在可以用一个方法封装起来，方便多个数据进行换行，可以复用
代码：
//要拼接或者换行几个值就通过参数传进去
function strSplice(a,b){
        let c='';
//因为我现在这里拼接是二个值，还有单个值进行换行得，所以进行一个判断，根据传入得参数执行不同得代码
        if(a&&b){
            for(let i=0;i<a.length;i++){
               console.log("拼接a,b",a[i]+":"+b[i]+",")
               c+=a[i]+":"+b[i]+"</br>"
          }
          return c;//把拼接好的值返回去
        }
        else if(a){
            for(let i in a){
               c+=a[i]+"</br>"
           }
           return c;
        }

    }
    let c=strSplice(a,b)//调用方法，拼接a:b
    let bStr = strSplice(b)//调用方法，对b换行
    console.log("拼接a:b  ",c)
    console.log("多个b换行",bStr)

代码得海洋有些深，我这还不会游泳，就带着游泳圈，还要带个打气筒，时不时打点气，不让自己沉下去。
希望通过我们得交流和学习，能够慢慢有艘船，在大海中航行，不用为了活下去而忽略海上得风景，其实慢慢成长我们会发现，大海，真是个神秘得地方。
学习使我们优秀，我们一起加油吧！