为什么前面的标题title和后面的title没有起冲突?
来源:2-4 编程练习
芥子1204
2019-04-26 23:06:07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模版字符串</title>
</head>
<body>
<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"]
}]
}
}
// 补充代码
const {title,data:tableList}=tmpl();
console.log(title,"标题title的值");
let arr=[`<caption>${title}</caption>`];
var table=document.createElement("table");
tableList.forEach(function(titles,i){
const {title,date}=titles;
console.log(title,"title的值");
const [date1,date2]=date;
arr.push(`<tr><td>${title}</td><td>${date1}</td><td>${date2}</td></tr>`);
});
arr=arr.join("");
console.log(arr,"arr的值");
table.innerHTML=arr;
document.body.appendChild(table);
table.setAttribute("border",1);
</script>
</body>
</html>
1回答
同学你好,因为两个title的作用域不同,标题title是全局变量,后面的title是在forEach方法里声明, 是局部变量, 所以不会有冲突。
另, 同学代码实现效果正确, 很棒哦~
如果帮助到了你, 欢迎采纳
祝学习愉快~~~
相似问题