zoukankan      html  css  js  c++  java
  • li点击弹出序号

    <body>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
        <li>test6</li>
        <li>test7</li>
        <li>test8</li>
        <li>test9</li>
        <li>test10</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('ul li');
        for(var i = 0, len = lis.length; i < len; i++) {
            lis[i].addEventListener('click', function () {
                console.log(i);
            }, false);
        }
    </script>
    </body>

    你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10。这是因为var声明的变量是函数作用域的,而不是块级作用域的。也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10。还有个问题是闭包导致的,闭包保存的是外部变量的引用,而不是值。也就是说,循环10次监听器创建了10 个闭包,它们里面的i引用的是同一个啊。所以全部都指向了10.
    要解决这个问题有两种方法。一种是使用ES6的let来替代 var i = 0 里面的var, 因为let支持块级作用域。改成如下就正常了。

        for(let i = 0, len = lis.length; i < len; i++) {
            lis[i].addEventListener('click', function () {
                console.log(i);
            }, false);
        }

    还有一种方法,就是很多经典书本都提到的,使用立即执行函数来切断闭包对外部变量i的引用:

        for(var i = 0, len = lis.length; i < len; i++) {
            (function (i) {
                lis[i].addEventListener('click', function () {
                    console.log(i);
                }, false);
            })(i)
        }

    当然啦,如果对闭包不是很熟练,还可以通过事件委托来避开这个陷阱哈,代码如下:

        var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('ul li');
        ul.addEventListener('click', function (e) {
            var target = e.target;
            if(target.nodeName.toLowerCase() === 'li') {
                console.log([].indexOf.call(lis, target));
            }
        }, false);

    使用了事件委托,减少了监听器的绑定(只对列表的父亲元素监听),这种方法说不定还会加分呢。哈哈,我当时就是用这种方法来实现的,面试官可能觉得我的解法有点不寻常、顿时一脸蒙B,甚至还一度怀疑 console.log([].indexOf.call(lis, target)) 这段代码是不是有问题。直到后来我直接在他的笔记本跑了一遍,他才相信是正确的。

    1. 下面的代码有内存泄漏吗

      var user = {name: 'tom', age: 20, gender: 'male'}
      var test = document.getElementByid('test')
      test.onclick = function() {
       test.innerHTML = user.name;
      }
      // ...后面还有很多其他操作,最后把user对象释放掉
      user = null; // 释放对象
    2. 实现一个算法,寻找字符串中出现次数最少的、并且首次出现位置最前的字符
      如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少)。并且比其他只出现一次的字符(如"d")首次出现的位置最靠前。
    3. http和tpc的关系,以及什么是https
    4. Node的特点(优点和缺点)
    5. 你在腾讯和网易实习期间学到的东西?
    6. 未来三年的职业规划

    至于二面的问题都不是很难,下面简单的来看一下:

    • 第1题,基本类型(number, string, boolean, null, undefined, symbol)是在栈的,而其他的引用类型都是在堆的。垃圾回收是采用了计数引用法(如果两个对象之间存在循环引用时,会有内存泄漏,因为计数无法变为0 )

    • 第2题,有内存泄漏,这是闭包本身的问题。完全消除闭包的内存泄漏是不现实的,但是,如果采用下面的方法可以减少内存泄漏:

      var user = {name: 'tom', age: 20, gender: 'male'}
      var test = document.getElementByid('test')
      (function (name) {
      test.onclick = function() {
          test.innerHTML = name;
      }
      })(user.name);
      user = null;
    • 第3题算法题,也不很难,大家可以自己试试去实现 ,如果做不出来的再到评论求助啦,这里就不贴出代码了。

    • 第4题,考察了计算机网络的tcp三次握手以及http的请求头等。https是使用安全套接字进行加密的,可以说HTTPS = SSL + HTTP。

    • 第5题,Node的特点是异步非IO阻塞、适合高并发,但不适合密集型计算

    • 第6、7题都是主观题,可以随便吹一下水便好。

    因为当时已经是饭点时间,面试官也有点急着去吃饭,就没有再问我问题了。

  • 相关阅读:
    快速幂 快速乘法
    扩展欧几里得学习笔记
    求逆序数数目(树状数组+离散化)
    隐式图的遍历
    随机数生成
    推倒重来
    动态规划初步
    子集生成
    东大oj1155 等凹函数
    P1278 单词游戏
  • 原文地址:https://www.cnblogs.com/libin-1/p/6528024.html
Copyright © 2011-2022 走看看