js技术

最新推荐文章于 2023-10-24 22:05:07 发布

yyl50

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量411

点赞数

本文链接：https://blog.csdn.net/yyl50/article/details/44874007

版权

1、考察this

 
  var 
   length = 10; 
 
  function 
   fn() { 
 
  console.log( 
  this 
  .length); 
 
  } 
 
  var 
   obj = { 
 
  length: 5, 
 
  method:  
  function 
  (fn) { 
 
  fn(); 
 
  arguments[0](); 
 
  } 
 
  }; 
 
  obj.method(fn, 1); 
 
输出：10 2

第一次输出10应该没有问题。我们知道取对象属于除了点操作符还可以用中括号，所以第二次执行时相当于arguments调用方法，this指向arguments，而这里传了两个参数，故输出arguments长度为2。

2、var和函数的提前声明

 
   function 
    fn(a) {

 
   console.log(a);

 
   var 
    a = 2;

 
   function 
    a() {}

 
   console.log(a);

}

 
   fn(1); 
  

输出：function a() {} 2

我们知道var和function是会提前声明的，而且function是优先于var声明的（如果同时存在的话），所以提前声明后输出的a是个function，然后代码往下执行a进行重新赋值了，故第二次输出是2

3、局部变量和全局变量

 
   var 
    f =  
   true 
   ; 
  

 
   if 
    (f ===  
   true 
   ) { 
  

 
   var 
    a = 10;

}

 
   function 
    fn() {

 
   var 
    b = 20;

 
   c = 30;

}

 
   fn(); 
  

 
   console.log(a); 
  

 
   console.log(b); 
  

 
   console.log(c); 
  

输出：10 报错 30

这是个我犯了很久的错误，很长一段时间我都以为{…}内的新声明的变量是局部变量，后来我才发现function内的新声明的变量才是局部变量，而没有用var声明的变量在哪里都是全局变量。再次提醒切记只有function(){}内新声明的才能是局部变量，while{…}、if{…}、for(..) 之内的都是全局变量（除非本身包含在function内）。

4、变量隐式声明

 
    if 
    ( 
    'a' 
     in 
     window) { 
   

 
    var 
     a = 10;

}

 
    alert(a); 
   

答案：10

前面我说过function和var会提前声明，而其实{…}内的变量也会提前声明。于是代码还没执行前，a变量已经被声明，于是 ‘a’ in window 返回true，a被赋值。

5、给基本类型数据添加属性，不报错，但取值时是undefined

 
    var 
     a = 10;

 
    a.pro = 10; 
   

 
    console.log(a.pro + a); 
   

 
    var 
     s =  
    'hello' 
    ; 
   

 
    s.pro =  
    'world' 
    ; 
   

 
    console.log(s.pro + s); 
   

答案：NaN undefinedhello

给基本类型数据加属性不报错，但是引用的话返回undefined，10+undefined返回NaN，而undefined和string相加时转变成了字符串。

6、函数声明优于变量声明

 
    console.log( 
    typeof 
     fn); 
   

 
    function 
     fn() {};

 
    var 
     fn;

答案：function

因为函数声明优于变量声明。我们知道在代码逐行执行前，函数声明和变量声明会提前进行，而函数声明又会优于变量声明，这里的优于可以理解为晚于变量声明后，如果函数名和变量名相同，函数声明就能覆盖变量声明。所以以上代码将函数声明和变量声明调换顺序还是一样结果。

7、判断一个字符串中出现次数最多的字符，并统计次数

hash table方式：
 
    var 
     s =  
    'aaabbbcccaaabbbaaa' 
    ; 
   
    var 
     obj = {}; 
   
    var 
     maxn = -1; 
   
    var 
     letter; 
   
    for 
    ( 
    var 
     i = 0; i < s.length; i++) { 
   
    if 
    (obj[s[i]]) { 
   
    obj[s[i]]++; 
   
    if 
    (obj[s[i]] > maxn) { 
   
    maxn = obj[s[i]]; 
   
    letter = s[i]; 
   
    } 
   
    }  
    else 
     { 
   
    obj[s[i]] = 1; 
   
    if 
    (obj[s[i]] > maxn) { 
   
    maxn = obj[s[i]]; 
   
    letter = s[i]; 
   
    } 
   
    } 
   
    } 
   
    alert(letter +  
    ': ' 
     + maxn); 
   
正则方式：
 
    var 
     s =  
    'aaabbbcccaaabbbaaabbbbbbbbbb' 
    ; 
   
    var 
     a = s.split( 
    '' 
    ); 
   
    a.sort(); 
   
    s = a.join( 
    '' 
    ); 
   
    var 
     pattern = /(\w)\1*/g; 
   
    var 
     ans = s.match(pattern); 
   
    ans.sort( 
    function 
    (a, b) { 
   
    return 
     a.length < b.length; 
   
    });; 
   
    console.log(ans[0][0] +  
    ': ' 
     + ans[0].length); 
   
 8、经典闭包 
    <!-- 实现一段脚本，使得点击对应链接alert出相应的编号 --> 
   
    <meta http-equiv= 
    "Content-Type" 
     content= 
    "text/html; charset=utf-8" 
     /> 
   
    <body> 
   
    <a href= 
    '#' 
    > 第一个链接 </a> </br> 
   
    <a href= 
    '#' 
    > 第二个链接 </a> </br> 
   
    <a href= 
    '#' 
    > 第三个链接 </a> </br> 
   
    <a href= 
    '#' 
    > 第四个链接 </a> </br> 
   
    </body> 
   
dom污染法：
 
    <!-- 实现一段脚本，使得点击对应链接alert出相应的编号 --> 
   
    <meta http-equiv= 
    "Content-Type" 
     content= 
    "text/html; charset=utf-8" 
     /> 
   
    <body> 
   
    <a href= 
    '#' 
    > 第一个链接 </a> </br> 
   
    <a href= 
    '#' 
    > 第二个链接 </a> </br> 
   
    <a href= 
    '#' 
    > 第三个链接 </a> </br> 
   
    <a href= 
    '#' 
    > 第四个链接 </a> </br> 
   
    <script type= 
    "text/javascript" 
    > 
   
    var 
     lis = document.links; 
   
    for 
    ( 
    var 
     i = 0, length = lis.length; i < length; i++) { 
   
    lis[i].index = i; 
   
    lis[i].onclick =  
    function 
    () { 
   
    alert( 
    this 
    .index); 
   
    }; 
   
    } 
   
    </script> 
   
    </body> 
   
闭包：
 
    <!-- 实现一段脚本，使得点击对应链接alert出相应的编号 --> 
   
    <meta http-equiv= 
    "Content-Type" 
     content= 
    "text/html; charset=utf-8" 
     /> 
   
    <body> 
   
    <a href= 
    '#' 
    > 第一个链接 </a> </br> 
   
    <a href= 
    '#' 
    > 第二个链接 </a> </br> 
   
    <a href= 
    '#' 
    > 第三个链接 </a> </br> 
   
    <a href= 
    '#' 
    > 第四个链接 </a> </br> 
   
    <script type= 
    "text/javascript" 
    > 
   
    var 
     lis = document.links; 
   
    for 
    ( 
    var 
     i = 0, length = lis.length; i < length; i++) { 
   
    ( 
    function 
    (i) { 
   
    lis[i].onclick =  
    function 
    () { 
   
    alert(i + 1); 
   
    }; 
   
    })(i);  
   
    } 
   
    </script> 
   
    </body> 
   
 9、this 
    function 
     JSClass() { 
   
    this 
    .m_Text =  
    'division element' 
    ; 
   
    this 
    .m_Element = document.createElement( 
    'div' 
    ); 
   
    this 
    .m_Element.innerHTML =  
    this 
    .m_Text; 
   
    this 
    .m_Element.addEventListener( 
    'click' 
    ,  
    this 
    .func); 
   
    // this.m_Element.onclick = this.func; 
   
    } 
   
    JSClass.prototype.Render =  
    function 
    () { 
   
    document.body.appendChild( 
    this 
    .m_Element); 
   
    } 
   
    JSClass.prototype.func =  
    function 
    () { 
   
    alert( 
    this 
    .m_Text); 
   
    }; 
   
    var 
     jc =  
    new 
     JSClass(); 
   
    jc.Render();   
    // add div 
   
    jc.func();   
    // 输出 division element 
   
    //click添加的div元素division element会输出underfined，为什么？ 
   
答案：division element undefined

第一次输出很好理解，第二次的话仔细看，this其实已经指向了this.m_Element，因为是this.m_Element调用的addEventListener函数，所以内部的this全指向它了。可以试着加上一行代码this.m_Element.m_Text = ‘hello world’，就会alert出hello world了。

10、split

请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如： var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″

 
    function 
     parseQueryString(url) { 
   
    var 
     obj = {}; 
   
    var 
     a = url.split( 
    '?' 
    ); 
   
    if 
    (a === 1)  
    return 
     obj; 
   
    var 
     b = a[1].split( 
    '&' 
    ); 
   
    for 
    ( 
    var 
     i = 0, length = b.length; i < length; i++) { 
   
    var 
     c = b[i].split( 
    '=' 
    ); 
   
    obj[c[0]] = c[1]; 
   
    } 
   
    return 
     obj; 
   
    } 
   
    var 
     url =  
    'http://witmax.cn/index.php?key0=0&key1=1&key2=2' 
    ; 
   
    var 
     obj = parseQueryString(url); 
   
    console.log(obj.key0, obj.key1, obj.key2);   
    // 0 1 2

yyl50

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js技术

1、考察thisvarlength = 10;functionfn() { console.log(this.length);} varobj = { length: 5, method:function(fn) { fn(); arguments[0]();
复制链接

扫一扫