需求：页面渲染得效果是a:b换行展示
a:b
a:b
····
以及多个b得时候， 也换行展示
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)
代码得海洋有些深，我这还不会游泳，就带着游泳圈，还要带个打气筒，时不时打点气，不让自己沉下去。 希望通过我们得交流和学习，能够慢慢有艘船，在大海中航行，不用为了活下去而忽略海上得风景，其实慢慢成长我们会发现，大海，真是个神秘得地方。 学习使我们优秀，我们一起加油吧！
扫一扫
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
