2-4，老师还是有些地方是看不懂的，可以帮忙解释下吗（标注在代码中了）
来源：2-4 编程练习
weixin_慕田峪7033080
2020-07-21 18:19:16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模版字符串</title>
<style>
*{
padding:0;
margin:0;
}
.tab{
margin:0 auto;
border:1px solid black;
border-spacing:5;
}
.tab td{
border:1px solid #000;
}
</style>
</head>
<body>
<div></div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
const tmpl = function () {
return {
title: "前端",
data: [{
title: '布局基础',
date: ["html", "css"]
}, {
title: '网页特效',
date: ["javascript", "jquery"]
}, {
title: '框架',
date: ["bootstrap", "vue"]
}]
}
}
// 补充代码
let {title,data}=tmpl();
let arr=[];建立这个空数组的目的是什么呢？
arr.push(`
<caption>${title}</caption>设置这个是什么意思呢，在里面加入标题是吗？
`);
data.forEach(function({title,date}){（这个地方用函数里面的意思是什么呢？）
arr.push(`上面已经用了了 arr.push，为什么这个地方还要用呢？
<tr>
<td>${title}</td>（${}主要意思是什么 呢，是为了省去加号吗？）
<td>${date[0]}</td>
<td>${date[1]}</td>
</tr>
`);
});
// console.log(arr);
let tab=document.createElement('table');（这个地方是为了建立一个表格?）
tab.className="tab";（是给表格取名字是吗?）
tab.innerHTML=arr.join('');（这个地方是什么意思呢?）
$('body').append(tab);这个地方是什么意思呢？$(`body`)这样的用法代表什么呢？
</script>
</body>
</html>
1回答
-
同学你好，问题解答如下：
1、定义arr为数组，是为了将拼接的内容放进数组中。最后使用join方法将数组中每项内容连接为字符串，然后追加到页面中显示出来
2、caption解释
3、forEach方法中默认有回调函数，data数据遍历的时候会执行里面的函数。在另一个问题中已经讲解过方法的使用，也可以参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
4、第一个push是将标题放进数组中，第二个push是将拼接的表格内容放进数组中，两部分内容，不冲突
5、${title}方式在模板字符串``中使用，es6中学习过，${}放变量，这样就不需要使用+拼接了。如果忘记了可以回顾下。
6、创建元素解释
7、添加class值
有了class之后就会使用style中设置的样式
8、join方法作用
将数组中每项内容连接为字符串返回。可以输出arr以及连接后的结果看看
所以代码是将连接好的表格内容放在table中了，组成一个完整的表格。
建议：如果join()方法忘记了怎么使用，建议回顾下第一阶段中的js基础部分。
9、$('')方式是jquery中的方法，来获取元素的。append()方法是用来追截内容的。代码意思就是将表格追加在页面中
同学有学习第二阶段吗？有讲解jquery哦
如果是忘记了可以回顾下。如果是跳过了没有学习，并不推荐这样做的，可能会造成部分代码看不懂，影响学习进度。
祝学习愉快！
0
相似问题