[乐意黎原创]从两道前端面试题说起

你的名字 2022-05-27 01:29 156阅读 0赞

无意中看到两道前端面试题，乐意黎内心里还有点不是很确定答案，于是动手验证了一下。  
第一题: 题目如下,

![20180409141546301][]

从上题分析可知:

1处: "小张"

2处: "小王"

若去掉this, 输出如下:

1处: "小王"

2处: "小王"

验证过程如下;

![20180409142028470][]

![20180409142050255][]

第二题:

![20180409141558746][]

分析可知， i的初始值为1, 最大值为9.  内心里感觉肯定有问题，但一时说不上来。

验证如下:

运行结果:

![20180409142726526][]

可知，点击第一个button, 不会执行。点击第二至第十个button, 会弹出(输出) 10.

for 循环里的i, 会自增到 10, 然后进入function 执行，输出 10.

**如何改进呢****？**

题目本身的意图是让界面上按钮点击后，弹出对应编号 。  
单纯从输出对应的button的索引来看，我的方法如下:

/*    
       for(var i=1;i<10;i++){
            debugger;
            $("button").eq(i).click(
                function(event){
                    debugger;
                    console.log(i);
                }
            );
        }
    */
    //上述改进如下
    //author: aerchi
    //site: http://blog.csdn.net/aerchi
         $("button").click(
             function(){
                 var i = $(this).index();//获取当前点击的button索引
                 // alert(i+1);
                 console.log("button index: "+(i+1));
             }
         );

测试结果:

![20180409145051628][]

综上，

乐意黎/aerchi 原创

2018-04-09

原文地址:  [https://blog.csdn.net/aerchi/article/details/79865839][https_blog.csdn.net_aerchi_article_details_79865839]

[20180409141546301]: /images/20220527/ff8829c320a84f789a1593533e8d5093.png
[20180409142028470]: /images/20220527/645410bc2cdb45a682b26b454b8fc031.png
[20180409142050255]: /images/20220527/6da6ed9c56f24713856c80df4a90ba8f.png
[20180409141558746]: /images/20220527/e5051978bcd84b918d7a011cd507cd21.png
[20180409142726526]: /images/20220527/980d403c1c5a482e873aff6b611d14f9.png
[20180409145051628]: /images/20220527/9361774efcf14b8ab72430bb16ecbe62.png
[https_blog.csdn.net_aerchi_article_details_79865839]: https://blog.csdn.net/aerchi/article/details/79865839