美文网首页
JS基础-闭包_定时器_BOM

JS基础-闭包_定时器_BOM

作者: hahahahaqwert | 来源:发表于2017-07-22 16:28 被阅读18次
    1.下面的代码输出多少?修改代码让fnArr[i]() 输出 i。使用 两种以上的方法
       var fnArr = [];
         for (var i = 0; i < 10; i ++) {
           fnArr[i] =  function(){
             return i;
           };
        }
       console.log( fnArr[3]() );  //
    
       //上述代码输出结果为  10
    
       //代码修改        
       //方法1
       var fnArr = []
       for (var i = 0; i < 10; i ++) {
         fnArr[i] =  function(){
              var n=i
                  return function(){
                     return n;
                  }
          }();
       }
      console.log( fnArr[3]() );  //输出3
    
      //方法2 
       var fnArr = [];
       for (var i = 0; i < 10; i ++) {
            (function(i){
                fnArr[i] =  function(){
                    // console.log(i)
                    return i
                }
            })(i)
       }
      console.log( fnArr[3]() ); //输出3
    
    2.封装一个汽车对象,可以通过如下方式获取汽车状态
       var Car = (function(){
         var speed = 0;
         function setSpeed(s){
           speed = s
         }
       ...
         return {
          setSpeed: setSpeed,
          ...
          }
       })()
      Car.setSpeed(30);
      Car.getSpeed(); //30
      Car.accelerate();
      Car.getSpeed(); //40;
      Car.decelerate();
      Car.decelerate();
      Car.getSpeed(); //20
      Car.getStatus(); // 'running';
      Car.decelerate(); 
      Car.decelerate();
      Car.getStatus();  //'stop';
      //Car.speed;  //error
    

       //代码
       var Car = (function(){
        // speed:速度
       var speed = 0;
       function setSpeed(s){
          speed = s
       }
       function getSpeed(){
          return speed
       }
       // accelerate:加速
       function accelerate(){
          return speed += 10
       }
       // 减速
       function decelerate(){
        return speed -= 20
       }
       // 状态
       function getStatus(){
          if(speed === 0){
            return "stop"
          }else{
            return "running"
          }
       }
       return {
          setSpeed: setSpeed,
          getSpeed: getSpeed,
          decelerate: decelerate,
          getStatus: getStatus,
          accelerate: accelerate
       }
      })()
        
      // 输出
      Car.setSpeed(30);
      Car.getSpeed(); //30
      console.log(Car.getSpeed())
    
      Car.accelerate();
      Car.getSpeed(); //40;
      console.log(Car.getSpeed())
    
      Car.decelerate();
      // console.log(Car.decelerate());
      console.log(Car.getSpeed()); //20
      Car.getStatus(); // 'running';
      console.log(Car.getStatus())
    
      Car.decelerate(); 
      Car.getStatus();  //'stop';
      console.log(Car.getSpeed())
      console.log(Car.getStatus())
      // Car.speed;  //error
    
    3.下面这段代码输出结果是? 为什么?
       var a = 1;
       setTimeout(function(){
          a = 2;
          console.log(a);
       }, 0);
      var a ;
      console.log(a);
      a = 3;
      console.log(a);
    
     // 输出结果 1  3  2
     // 原因: JavaScript 是单线程执行的,也就是无法同时执行多段代码,当某一段代码正在执行的
     // 时候,所有后续的任务都必须等待,形成一个队列,一旦当前任务执行完毕,再从队列中取出下
     // 一个任务。这也常被称为 “阻塞式执行”。
     // 如果代码中设定了一个 setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,
     // 如果这个时间设为 0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。
     // 所以setTimeout 并不能保证执行的时间,是否及时执行取决于JavaScript线程是拥挤还是空闲
     // 因此,即使你给setTimeout设定的延时为0ms,它也不会立即触发
    
    4.下面这段代码输出结果是? 为什么?
       var flag = true;
       setTimeout(function(){
          flag = false;
       },0)
      while(flag){}
      console.log(flag);
    
      // 答:
      // 什么也不会输出,while(flag){} 这个条件会无限循环,没有break或return。
      // 所以后面的都不会执行了
    
    5.下面这段代码输出?如何输出delayer: 0, delayer:1...(使用闭包来实现)
    for(var i=0;i<5;i++){
        setTimeout(function(){
             console.log('delayer:' + i );
        }, 0);
        console.log(i);  // 输出 1 2 3 4 5    5delayer
    }
      //  第一种
       for(var i=0;i<5;i++){
         setTimeout(function(){
           console.log('delayer:' + i );
           }, 0);
         console.log(i);
       }
    
    //  第二种
    // for(var i=0;i<5;i++){
    //  setTimeout(function(i){
    //      return function(){
    //          console.log('delayer:' + i );
    //      }
    //  }(i), 0);
    //  console.log(i);
    // }
    
    6.如何获取元素的真实宽高
       // step1 获取元素节点
       // var node=document.querySelector("#header")
       // step2 利用window.getComputedStyle()获取宽高
       // window.getComputedStyle(node).width
       // window.getComputedStyle(node).height
    
    7.URL 如何编码解码?为什么要编码?
    • URL要编码的原因:URL 只能使用 ASCII 字符集来通过因特网进行发送。也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。

       (1)Url编码通常也被称为百分号编码(percent-encoding),是因为它的编码方式非常简
        单,使用%百分号加上两位的字符——0123456789ABCDEF——代表一个字节的十六进制形式
       (2)
           对于ASCII字符,字母a 在ASCII码中对应的字节是0x61,那么Url编码之后得到的就是
        %61,字母abc, url编码后得到的就是%61%62%63
       
           对于非ASCII字符,RFC文档建议使用utf-8对其进行编码得到相应的字节,然后对每个字
        节执行百分号编码。
      
           如"中文"使用UTF-8字符集得到的字节为0xE4 0xB8 0xAD 0xE6 0x96 0x87,经过Url编
        码之后得到"%E4%B8%AD%E6%96%87"。
      
          *使用Javascript先对URL编码,然后再向服务器提交,不要给浏览器插手的机会。这样就
       能保证客户端只用一种编码方法向服务器发出请求  
      
    • URL 如何编码解码
      escape、encodeURI和encodeURIComponent 编码
      unescape、decodeURI和decodeURIComponent 解码

      区别:escape是对字符串(string)进行编码,(而另外两种是对URL),作用是让它们在所有电脑上可读。编码之后的效果是%XX或者%uXXXX这种形式。

      注意:什么场合用什么方法,从实际例子来说   
      (1)如果只是编码字符串,不和URL有半毛钱关系,那么用escape。
      (2)如果你需要编码整个URL,然后需要使用这个URL,那么用encodeURI。
      (3)当你需要编码URL中的参数的时候,那么encodeURIComponent是最好方法。

    参考文章
    简单明了区分escape、encodeURI和encodeURIComponent
    js对url进行编码和解码(三种方式区别)

    8: 补全如下函数,判断用户的浏览器类型
       function isAndroid(){
       }
       funcnction isIphone(){
       }
       function isIpad(){
       }
       function isIOS(){
       }
    
       //代码
       function isAndroid(){
        return /android/i.test(window.navigator.userAgent);
       }
       function isIphone(){
        return /iphone/i.test(window.navigator.userAgent);
       }
       function isIpad(){
        return /ipad/i.test(window.navigator.userAgent);
       }
       function isIOS(){
        return /ios|iphone/i.test(window.navigator.userAgent);
       }
    

    本文题文内容来自于饥人谷,版权归饥人谷_海瀚和饥人谷所有,转载需说明来源

    相关文章

      网友评论

          本文标题:JS基础-闭包_定时器_BOM

          本文链接:https://www.haomeiwen.com/subject/qcsukxtx.html