为什么前面的标题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回答

好帮手慕慕子

2019-04-27

同学你好,因为两个title的作用域不同,标题title是全局变量,后面的title是在forEach方法里声明, 是局部变量, 所以不会有冲突。

另, 同学代码实现效果正确, 很棒哦~

如果帮助到了你, 欢迎采纳

祝学习愉快~~~

0

0 学习 · 10739 问题

查看课程