2015年十大热点javascript笔试题你都会么?

2024-05-09 12:18

本文主要是介绍2015年十大热点javascript笔试题你都会么?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

AD:干货来了,不要等!WOT2015 北京站演讲PPT开放下载!

2015年关于javascript经典笔试题你都会么?

1、考察this 

   
  1. var length = 10
  2. function fn() { 
  3.   console.log(this.length); 
  4.  
  5. var obj = { 
  6.   length: 5
  7.   method: function(fn) { 
  8.     fn(); 
  9.     arguments[0](); 
  10.   } 
  11. }; 
  12.  
  13. obj.method(fn, 1); 

输出:10 2

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

2、var和函数的提前声明

   
  1. function fn(a) { 
  2.   console.log(a);  
  3.   var a = 2
  4.   function a() {} 
  5.   console.log(a);  
  6.  
  7. fn(1); 

输出:function a() {} 2

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

3、局部变量和全局变量

   
  1. var f = true
  2. if (f === true) { 
  3.   var a = 10
  4.  
  5. function fn() { 
  6.   var b = 20
  7.   c = 30
  8.  
  9. fn(); 
  10. console.log(a); 
  11. console.log(b); 
  12. console.log(c); 

输出:10 报错 30

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

4、变量隐式声明 

   
  1. var f = true
  2. if (f === true) { 
  3.   var a = 10
  4.  
  5. function fn() { 
  6.   var b = 20
  7.   c = 30
  8.  
  9. fn(); 
  10. console.log(a); 
  11. console.log(b); 
  12. console.log(c); 

答案:10

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

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

   
  1. var a = 10
  2. a.pro = 10
  3. console.log(a.pro + a); 
  4.  
  5. var s = 'hello'
  6. s.pro = 'world'
  7. console.log(s.pro + s); 

答案:NaN undefinedhello

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

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

   
  1. console.log(typeof fn); 
  2. function fn() {}; 
  3. var fn; 

答案:function

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

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

hash table方式: 

   
  1. var s = 'aaabbbcccaaabbbaaa'
  2. var obj = {}; 
  3. var maxn = -1
  4. var letter; 
  5. for(var i = 0; i < s.length; i++) { 
  6.   if(obj[s[i]]) { 
  7.     obj[s[i]]++; 
  8.     if(obj[s[i]] > maxn) { 
  9.       maxn = obj[s[i]]; 
  10.       letter = s[i]; 
  11.     } 
  12.   } else { 
  13.     obj[s[i]] = 1
  14.     if(obj[s[i]] > maxn) { 
  15.       maxn = obj[s[i]]; 
  16.       letter = s[i]; 
  17.     } 
  18.   } 
  19.  
  20. alert(letter + ': ' + maxn); 

正则方式: 

   
  1. var s = 'aaabbbcccaaabbbaaabbbbbbbbbb'
  2. var a = s.split(''); 
  3. a.sort(); 
  4. s = a.join(''); 
  5. var pattern = /(\w)\1*/g; 
  6. var ans = s.match(pattern); 
  7. ans.sort(function(a, b) { 
  8.   return a.length < b.length; 
  9. });; 
  10. console.log(ans[0][0] + ': ' + ans[0].length); 

 8、经典闭包

   
  1. <!-- 实现一段脚本,使得点击对应链接alert出相应的编号 --> 
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  3. <body> 
  4.   <a href='#'> 第一个链接 </a> </br> 
  5.   <a href='#'> 第二个链接 </a> </br> 
  6.   <a href='#'> 第三个链接 </a> </br> 
  7.   <a href='#'> 第四个链接 </a> </br> 
  8. </body> 

dom污染法:

   
  1. <!-- 实现一段脚本,使得点击对应链接alert出相应的编号 --> 
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  3. <body> 
  4.   <a href='#'> 第一个链接 </a> </br> 
  5.   <a href='#'> 第二个链接 </a> </br> 
  6.   <a href='#'> 第三个链接 </a> </br> 
  7.   <a href='#'> 第四个链接 </a> </br> 
  8.   <script type="text/javascript"
  9.     var lis = document.links; 
  10.     for(var i = 0, length = lis.length; i < length; i++) { 
  11.       lis[i].index = i; 
  12.       lis[i].onclick = function() { 
  13.         alert(this.index); 
  14.       }; 
  15.     } 
  16.   </script> 
  17. </body> 

闭包:

   
  1. <!-- 实现一段脚本,使得点击对应链接alert出相应的编号 --> 
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  3. <body> 
  4.   <a href='#'> 第一个链接 </a> </br> 
  5.   <a href='#'> 第二个链接 </a> </br> 
  6.   <a href='#'> 第三个链接 </a> </br> 
  7.   <a href='#'> 第四个链接 </a> </br> 
  8.   <script type="text/javascript"
  9.     var lis = document.links; 
  10.     for(var i = 0, length = lis.length; i < length; i++) { 
  11.       (function(i) { 
  12.         lis[i].onclick = function() { 
  13.           alert(i + 1); 
  14.         }; 
  15.       })(i);  
  16.     } 
  17.   </script> 
  18. </body> 

9、this

   
  1. function JSClass() { 
  2.   this.m_Text = 'division element'
  3.   this.m_Element = document.createElement('div'); 
  4.   this.m_Element.innerHTML = this.m_Text; 
  5.   this.m_Element.addEventListener('click'this.func); 
  6.   // this.m_Element.onclick = this.func; 
  7.  
  8. JSClass.prototype.Render = function() { 
  9.   document.body.appendChild(this.m_Element); 
  10.  
  11. JSClass.prototype.func = function() { 
  12.   alert(this.m_Text); 
  13. }; 
  14.  
  15. var jc = new JSClass(); 
  16. jc.Render();  // add div 
  17. jc.func();  // 输出 division element 
  18. //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″ 

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

这篇关于2015年十大热点javascript笔试题你都会么?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/973388

相关文章

Spring Security常见问题及解决方案

《SpringSecurity常见问题及解决方案》SpringSecurity是Spring生态的安全框架,提供认证、授权及攻击防护,支持JWT、OAuth2集成,适用于保护Spring应用,需配置... 目录Spring Security 简介Spring Security 核心概念1. ​Securit

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

SpringBoot改造MCP服务器的详细说明(StreamableHTTP 类型)

《SpringBoot改造MCP服务器的详细说明(StreamableHTTP类型)》本文介绍了SpringBoot如何实现MCPStreamableHTTP服务器,并且使用CherryStudio... 目录SpringBoot改造MCP服务器(StreamableHTTP)1 项目说明2 使用说明2.1

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避