闭包_定时器_ BOM

题目1: 下面的代码输出多少?修改代码让 fnArri 输出 i。使用 两种以上的方法

var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;  
        };
    }
    console.log( fnArr[3]() );   
//不管是传参多少,输出都是 10
只有一个i  
立即执行函数有一个独立作用域
var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(i){
             return function(){
               console.log(i)
             } 
          
        }(i)
    }
    console.log( fnArr[4]() ); // 4
var  fnArr=[];
for(var i=0; i< 10; i++){
     !function(i){
         fnArr[i]=function(){
              return i;
         }
       
     }(i)  
}
console.log(fnArr[3]())   // 3

题目2: 封装一个汽车对象,可以通过如下方式获取汽车状态

var Car = (function(){
   var speed = 0;
   function setSpeed(s){
       speed = s
       
   }
   function getSpeed(){
    return speed
   }
  
  function decelerate(){
    speed-=10;
     return speed
    
  }
  function accelerate(){
    
    return speed+=10;
    
  }
  
  
 function  getStatus(){
   if(speed>0){
     return 'running';
   }
   else{
     return 'stop'
   }
 }
  
  
   return {
      setSpeed: setSpeed,
      getSpeed: getSpeed,
      accelerate: accelerate,
      decelerate:decelerate,
      getStatus: getStatus,
      speed: 'error'
   }
})()
Car.setSpeed(30);
console.log(Car.getSpeed()); //30  
 Car.accelerate();    //+10
 console.log(Car.getSpeed()); //40;
 Car.decelerate();   //-10
Car.decelerate();   // -10
console.log(Car.getSpeed()); //20
console.log(Car.getStatus()); // 'running';
Car.decelerate(); 
Car.decelerate();  // 0时的状态为stop
console.log(Car.getStatus());  //'stop';
//Car.speed;  //error

题目3:下面这段代码输出结果是? 为什么?

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);  //2
}, 0);
var a ;
console.log(a);   //1
a = 3;
console.log(a);   //3 
输出结果: 1  3  2


首先需要考虑变量提升, setTimeout() 是在所有的代码都结束后,在执行  所以setTimeout 最后
提升变量:
var a;
var a;
a=1
console.log(a)   //a=1

a=3
console.log(a)   //a=3

执行定时器
a=2
console.log(a)   //a=2

题目4:下面这段代码输出结果是? 为什么?

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);

输出: true

按照执行顺序,setTimeout()会最后执行
当flag=true 时, while(flag){}循环,
当为真时,一直死循环
其他的代码都等待循环后执行,
可是循环不会结束,其他代码得不到执行

题目5: 下面这段代码输出?如何输出delayer: 0, delayer:1...(使用闭包来实现)

for(var i=0;i<5;i++){  //for循环后, 输出i=5
    setTimeout(function(){
         console.log('delayer:' + i );  //当循环完成后,i=5 时 输出
    }, 0);
    console.log(i);  // 0 1 2 3 4
}

输出: 
0
1
2
3
4
"delayer:5"
"delayer:5"
"delayer:5"
"delayer:5"
"delayer:5"

for(var i=0; i< 5;i++){
(function(i){    //当()内没有i值时, i=5
     setTimeout(function(){
          console.log('delayer:'+ i)
     })
})(i)
console.log(i)
}

题目6: 如何获取元素的真实宽高

  1. 宽高都写在样式表(外部样式 嵌入样式)中,获取元素宽高
<style>
    .box{
      width: 100px;
      border: 2px solid ;
      padding: 20px;
      margin-left: 100px;
    }
  </style>
  
  </head>
<body>

  <div class="box"></div>
</body>
var box= document.querySelector('.box')
var bb=box.offsetWidth       //content+ padding +border===width 
console.log(bb)

输出: 144 
       
//所以真实宽 = width-padding-border

注意: offset 计算时包括了padding和border

  1. 当元素宽高的样式 写在了行内(内联)样式中, 可以用
box.style.width    //获取宽度  
box.offsetWidth   //获取宽度+ padding+border 
两种方式都可以获取到
  1. 不同版本浏览器
    //ie8版本之前通过 元素.currentStyle.width
var box= document.querySelector('.box')
console.log(box.currentStyle.width);

//ff,safari,opera,chrome,ie9及之后版本:通过window.getComputedStyle(元素).width

var box= document.querySelector('.box')

console.log(window.getComputedStyle(box).width);
输出  100px 
是真实的div宽度

参考文

题目7: URL 如何编码解码?为什么要编码?
参考

为什么编码?
(1)URL 只能使用 ASCII 字符集来发送。
也就是 Url中只允许包含英文字母(a-zA-Z)、数字(0-9)、-_.~4个特殊字符以及所有保留字符,不能使用其他文字和符号 。这意味着 如果URL中有汉字,就必须编码后使用。
(2)HTTP协议中通过URL传参是通过键值对形式进行的,格式上是以?、&和=为特征标识进行解析,如果键或者值的内容中包含这些符号,就会造成解析错误,所以要进行编码,用不会造成歧义的符号代替有歧义的符号。

但是麻烦的是 标准的国际组织并没有规定具体的编码方法,而是交给应用程序(浏览器)设置的编码格式(utf-8 gbk .....)决定。 对于非ASCII字符,RFC文档建议使用utf-8对其进行编码得到相应的字节,然后对每个字节执行百分号编码。

获取URL 中的包含?后的字符串:

 window.location.search

window.location.search
"?js,console,output"
var nn=window.location.search
console.log(nn)
VM432:2 ?js,你好,bbbb
undefined
typeof nn
"string"
if(nn[0]==='?'){
  var str=nn.slice(1)
console.log(str)
}

 js,你好,bbbb

var arr= str.split(',')
coonsole.log(arr)
["js", "你好", "bbbb"]

console.log(encodeURICompontent(arr[1]))// 对URL中的(部分)一个组件进行编码,而不是全部进行编码
"%E4%BD%A0%E5%A5%BD"

console.log(decodeURICompontent("%E4%BD%A0%E5%A5%BD"))
'你好'

//编码===文字转换为 编码
encodeURIComponent('?你好')


//解码  =====编码 转换为  文字
console.log(decodeURIComponent('%3Fa%3D%E4%BD%A0%E5%A5%BD%26bb'))

encodeURI和encodeURIComponent的编码区别:
encodeURI()对完整的URI编码,后者对URI的一个组件进行编码。

; / ? : @ & = + $ , #,这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码

escape函数
真正作用是:
返回一个字符的Unicode编码值,为方便他们能在所有计算机上可读
具体规则是:
所有空格、标点以及其他非ASCII字符都用%xx编码替换;如果看到%u的编码,那就是escape函数

题目8: 补全如下函数,判断用户的浏览器类型

<script>
    var test = window.navigator.userAgent;
    //console.log(test);
    function isAndroid(){
     if(/Android/i.test(test)){
        return console.log('isAndroid');
     }
    }
    function isIphone(){
        if(/iPhone/i.test(test)){
            return console.log('isIphone');
        }
    }
    function isIpad() {
        if(/iPad/i.test(test)){
            return console.log('isIpad');
        }
    }
    function isIos(){
        if(/iPad/i.test(test)){
            return console.log('isIos');
        }
    }
    function isMac() {
        if(/Macintosh/i.test(test)){
           return console.log('isMac');
        }
    }
    isAndroid();
    isIphone();
    isIpad();
    isIos();
    isMac();
</script>

/i 忽略大小写

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容

  • 题目1: 下面的代码输出多少?修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法 var fnArr...
    saintkl阅读 357评论 0 0
  • 题目1: 下面的代码输出多少?修改代码让 fnArri 输出 i。使用 两种以上的方法 方法一: 方法二: 方法三...
    南山码农阅读 278评论 0 1
  • 题目1: 下面的代码输出多少?修改代码让 fnArri 输出 i。使用 两种以上的方法 输出10 修改为1var ...
    我是一只_鱼阅读 210评论 0 1
  • 题目1: 下面的代码输出多少?修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法 题目2: 封装一个...
    Taaaaaaaurus阅读 342评论 0 0
  • 1、下面的代码输出多少?修改代码让 fnArr[i]() 输出 i。使用两种以上的方法。 方法一: 方法二: 方法...
    Jeff12138阅读 83评论 0 0