JS面试题及答案

注:本文转自http://blog.youkuaiyun.com/xuejianwu/article/details/7871932,但对原文中有误或解释不明确的地方进行了校正和扩展说明.

一、JS闭包。

f = function() {return true;};   
g = function() {return false;};   
(function() {   
   if (g() && [] == ![]) {   
      f = function f() {return false;};   
      function g() {return true;}   
   }   
})();   
alert(f()); // true or false ?  
------------------------ 
答案: 
(function() {     
   if (g() && [] == ![]) {     
//应该看成if((g() && [] )== ![])   
//因为g()是false后面那个&&[]就没起作用 整个都是false    
//![]也是false 所以if成立 进入if块内   
      f = function f() {return false;};     
//重新定义f    
      function g() {return true;}     
//这句没用   
   }     
})();    
alert(f());   
//false  

二、截取字符串abcdefg的efg 
abcdefg 
    <script type="text/javascript"> 
  var mytext=document.getElementByIdx_x_x("text"); 
  var myvalue=mytext.innerHTML; 
  var jiequ=myvalue.substring(myvalue.length-3,myvalue.length); 
  alert(jiequ) 
</script> 

三、写出一下运算结果 
alert(typeof(null))  // object 
alert(typeof(undefined))  // undefined 
alert(typeof(NaN))  // number 
alert(NaN==undefined)  // false 
alert(NaN==NaN)  // false 
var str="123abc"; 
alert(typeof(str++)) // number :隐式类型转换

alert(str) // NaN


四、写出函数DateDemo的返回结果,系统时间假定为今天 
function DateDemo(){ 
var d, s="今天日期是:"; 
d = new Date(); //假定今天是2010年8月17日
s += d.getMonth() + "/";  //js中的month是从0开始的,所以这个值会比当前实际月份小1
s += d.getDate() + "/"; 
s += d.getYear(); 
return s; 

结果:今天日期是:7/17/2010 

五、写出程序运行的结果? 
for(i=0, j=0; i<10, j<6; i++, j++);

k = i + j; 

alert(k);

结果:12(小心陷阱)


var str= "aaaebbbcccddd";
str = str.replace(/(.)\1+/g,'$1')

alert(str)

2. 把字符串中所有单词的首字母都转换为大写
name = 'aaa bbb ccc'; uw=name.replace(/\b\w+\b/g, function(word){ return word.substring(0,1).toUpperCase()+word.substring(1);} );
alert(uw)


1.以下哪个在JAVASCRIPT中会报错: 
var a=(); 
var a=[]; 
var a={}; 
var a=//; 
2.JAVA中有哪些保留字,越多越好,10个以上. 
3.CSS中有几种声明方式. 
4.写出你所知道的开源项目或软件,并说明他们的好处以及作用. 
最佳答案 

1,var a=();var a=//; 报错     两个不行!

2,const final volatile byte int char double float boolean private protected public package export importclass extends  super interface abstract native goto static synchronize throws等 (注意:保留字不完全等同于关键字,所以人家既然问你保留字,就不要答关键字啦!)

3,    这题有点不知道怎么答,到底声明是什么意思?  是声明一个已经存在一个CSS有四种:    1.导入一个已经存在的CSS文件  <link rel="stylesheet" type="text/css" href="">    2.直接在HARD里声明一个CSS代码段:  <style type="text/css">       .....  </style>    3.直接在网页元素里声明使用CSS:  style="color:red;"    4.@import方式引入。 如果是声明CSS类 , 则有三种:  直接标签名作为CSS类名称:  TagName{ ... }  以元素ID作为CSS类声明:    #ID{...}  自定义CSS类名称 :         .ClassName{}  

 4,开源的    客户端脚本的话就说说 ExtJS    她可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应 用中。  而且,使用这个框架可以直接用一行代码实现非常漂亮的而且标准的网页控件界面,可以使用代码调用的控件来替代目前的流行网页布局,和WinForm程序一样,使得前端开发完全控件化。  Jquery也是优秀的前台框架,优点:  代码简练、语义易懂、学习快速、文档丰富。    jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。    jQuery支持CSS1-CSS3,以及基本的xPath。    jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。    可以很容易的为jQuery扩展其他功能。    能将JS代码和HTML代码完全分离,便于代码和维护和修改。    插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。     除此之外,还有ProtoType,Bindows(JS框架)   服务,ZedGragh(.Net做统计图的),Spring,Hibernate,Structs,EJB,Jbpm等比较有名的。


网易JS面试题引起的讨论 2012-02-05 23:58 
第一道: 
var tt = 'aa';  
function test(){  
alert(tt);  //underfined; 
var tt = 'dd';  
alert(tt);  //dd 
}  
test();  


第二道: 
var myObject= { 
  num: 2, 
  add: function(){ 
  this.num=3; 
  (function(){ 
  alert(this.num);  //underfined :因为这里的this指的是window对象!!这也是js语言的一个bug
  this.num=4; //第一次执行后将在window对象中添加num属性,值为4
  })(); 
alert(this.num)   //3 
  } 

myObject.add(); //分别弹出undefined和3

myObject.add(); //分别弹出4和3,因为第二次执行闭包中的alert时,window中已经存在num属性了,且值为4



本文主要是讲预编译。 

1. 判定一个变量是否为undefined 
当需要判断一个变量是否为 undefined 时,直接用  alert(om == undefined) 可能出错。因为 JS 如果引用未声明的变量,那么会出现JS错误,在上述例子中,如果 om 未曾声明,就会报 JS 错误。因此判断一个变量是 undefined,最好用这种方法 alert( typeof om == 'undefined' );   
2. JS 中没有块作用域,在函数中声明的变量在整个函数中都可用(无论是在函数开头处声明还是末尾处声明),如 
Js代码 
function() { 
  alert(om); // 显示 undefined 
  var om = 'abc'; 
  alert(om); // 显示 abc 

  } 

补充: 此规则并非只针对函数,在全局作用域也一样,应该理解为在js作用域中(分为全局作用域和函数作用域)声明的变量在该作用域中都可见.

3. JS 在函数执行前将整个函数的变量进行声明,无论这个变量的声明语句有没有机会执行,如 Js代码 

var om = "123" ;

function foo() {   

       alert(om); // 显示 undefined   
       if ( false ) {   
             var om = 'abc' ; // 此处声明没有机会执行   
        }   
 }   
foo(); //undefined
====================================================================== 

今天工作需要,搜索下JS面试题,看到一个题目,大约是这样的 
Js代码 

<script> 
  var x = 1, y = z = 0; 
  function add(n) { 
  n = n+1; 
  } 

  y = add(x); //y为undefined,因为add()并未返回值!!!x仍为1,因为是值传递
    
  function add(n) { 
  n = n + 3; 
  } 

  z = add(x); //z为undefined,x为1,与上面同理,小心陷阱啊!!

</script> 


问执行完毕后 x, y, z 的值分别是多少? 

仔细看的人马上就知道了, x, y 和 z 分别是 1,undefined 和 undefined。 

不过,如果将两个 add 函数修改一下,题目变为 
Js代码 

<script> 
  var x = 1, y = z = 0; 
  function add(n) { 
  return n = n+1; 
  } 

  y = add(x); 
    
  function add(n) { 
  return n = n + 3; 
  } 

  z = add(x); 
</script> 

那么这时 y 和 z 分别是什么呢?我马上想到是 2 和 4,不过结果却是 4 和 4。 
原因即是 JS 解释器的"预编译":JS 解析器在执行语句前会将函数声明和变量定义进行"预编译",而这个"预编译",并非一个页面一个页面地"预编译",而是一段一段地预编译,所谓的段就是一个 <script> 块,所以,在第一次调用 add 函数之前,第二个 add 函数的声明已经覆盖了第一个 add 函数。且看下面的js代码
<script> 
  function add(n) { 
  return n = n+1; 
  } 
  alert(add(1)); 
</script> 

<script> 
  function add(n) { 
  return n = n+3; 
  } 
  alert(add(1)); 
</script> 

会分别弹出 2 和 4。 

那么,将上面的题目再变换一下,如下 

<script> 
  alert(typeof addA); 
  addA(); 
  function addA() { 
  alert("A executed!"); 
  }; 
</script> 
<script> 
  alert(typeof addB); 
  addB(); 
  var addB = function() {//注意声明方式!!这不是函数声明,而是一个函数表达式!!
  alert("B executed!"); 
  }; 
</script> 

执行结果是什么呢? 按照前面的知识,第一个 <script> 块执行正常,结果就是弹出 "function" 和 "A executed!" 的对话框。 
那么第二个 <script> 块呢? 执行结果是弹出 "undefined" 的对话框后报 JS 错误,说 addB 不是一个 function。 
有点出乎意料?呵呵,其实第一个 script 块中的 addA 一句是函数声明,当然进行了"预编译",但是第二个 script 块中的 addB 一句并非函数声明。只不过在执行这段 <script> 之前对变量进行了"预声明",因此一开始变量addB是存在的,只不过是 undefined 的(可参看http://eclipse07.javaeye.com/admin/blogs/484566 )。因此执行结果便如上面所示。

将题目再变化下,如下 
Js代码 


<script> 
  alert(typeof addB); 
  addB(); 
  var addB = function addB() { 
  alert("B executed!"); 
  }; 
</script> 
执行结果如何呢? 
在 ff 下执行,与上面执行结果一样。打住,且在 IE6 下执行看看如何。 
结果是弹出 "function" 和 "B executed!",一切正常。 
Google 了一下,有人说这是 IE 的 BUG。 

那么,请看下面的代码 
<script> 
  alert(typeof addB); 
  var addB = "variable"; 
  function addB() { 
  alert("function addB"); 
  } 
  alert(addB); 
</script> 
执行结果是"function"和"variable"。 
JS解析器先预定义了 addB 变量为 undefined, 但是 addB 函数覆盖了此变量(预编译时变量是不赋值的,但函数体是参与预编译的),,因此一开始执行结果是 function,然后 addB 被赋值为 "variable",因此最后执行结果是 "variable",上面的代码即使变为
Js代码 

<script> 
  alert(typeof addB); 
  function addB() { 
  alert("function addB"); 
  } 
  var addB = "variable"; 
  alert(addB); 
</script> 
结果也一样,这说明JS解析器先预声明变量,再预定义函数 ,因此上面代码中变量addB在函数addB之前被预声明,即使代码顺序上它在后. 
小结一下:JS 在执行前会进行类似"预编译"的操作,而且先预定义变量再预定义函数。 

======================================================================================


1、form中的input有哪些类型?各是做什么处理使用的? 

2、table标签中border,cellpadding     td标签中colspan,rowspan分别起什么作用? 
3、form中的input可以设置readonly和disable,请问这两项属性有什么区别? 
4、JS中的三种弹出式消息提醒(警告窗口、确认窗口、信息输入窗口)的命令是什么? 

1、form中的input有哪些类型?各是做什么处理使用的? 
text   radio   checkbox   file   button   image   submit   reset   hidden 
2、table标签中border,cellpadding     td标签中colspan,rowspan分别起什么作用? 
border边界 

cellpadding单元格内补白

cellspacing单元格与单元格之间的间距 

colspan跨列数 
rowspan跨行数 
3、form中的input可以设置readonly和disable,请问这两项属性有什么区别? 
readonly不可编辑,但可以选择和复制 
disable不能编辑复制选择 
4、JS中的三种弹出式消息提醒(警告窗口、确认窗口、信息输入窗口)的命令是什么? 
alert 
confirm 
prompt 

### JavaScript 面试题答案汇总 以下是关于 JavaScript 的一些常见面试题及其详细解答: #### 1. **什么是伪数组(类数组),如何将其转换为真实数组?** 伪数组是指那些具有 `length` 属性以及索引键的对象,但它们并不是真正的数组[^1]。常见的伪数组包括函数的 `arguments` 参数和 DOM 方法返回的 NodeList 对象。 可以通过以下方式将伪数组转换为真实的数组: ```javascript function convertToArray(fakeArray) { return Array.prototype.slice.call(fakeArray); } ``` 这种方法利用了 `Array.prototype.slice` 方法,能够成功地将伪数组转为真实数组。 --- #### 2. **JavaScript 中 `callee` 和 `caller` 的作用分别是什么?** - `callee` 是指当前正在执行的函数本身,通常用于匿名函数内部调用自己。 - `caller` 则表示调用当前函数的那个函数。 需要注意的是,在严格模式下,访问这两个属性可能会抛出错误[^1]。 --- #### 3. **解释 JavaScript 原型链的工作原理。** 在 JavaScript 中,每个对象都有一个隐式的原型 (`__proto__`) 指向另一个对象。而构造函数也有显式的 `prototype` 属性指向其创建实例的原型对象。当尝试访问某个对象上的属性时,如果该对象不存在此属性,则会沿着原型链向上查找直到找到或者到达最顶层的 `Object.prototype`[^2]。 例如: ```javascript function A() {} A.prototype.name = 'Prototype of A'; const aInstance = new A(); console.log(aInstance.__proto__ === A.prototype); // true ``` 这里展示了实例 `aInstance` 的 `__proto__` 属性与构造函数 `A` 的 `prototype` 属性之间的关系[^2]。 --- #### 4. **描述用户输入 URL 后浏览器渲染页面的整体流程。** 整个过程大致分为以下几个阶段[^3]: 1. **URL 解析和 DNS 查询**: 浏览器解析 URL 并获取目标服务器 IP 地址。 2. **建立 TCP 连接**: 完成三次握手后形成稳定的通信通道。 3. **发起 HTTP 请求**: 发送 GET 或 POST 等类型的请求至服务端。 4. **接收响应数据**: 获取 HTML 文档及其他静态资源文件。 5. **解析 HTML 构建 DOM 树**. 6. **加载外部资源**(如 CSS、JS 文件). 7. **CSSOM 树构建**, 结合 DOM 形成最终 Render Tree. 8. **JavaScript 执行**: 动态调整结构或行为逻辑。 9. **页面绘制完成展示给用户**. --- #### 5. **列举几种优化网页性能的方法。** 可以从多个角度提升网站运行效率[^4]: - 减少不必要的 HTTP 请求数量; - 使用 Gzip 压缩传输内容降低体积; - 设置合理的缓存策略延长有效期限; - 将脚本放置于文档末尾以防止阻塞渲染; - 替代频繁操作 DOM 节点的方式比如采用 innerHTML 更新批量更改而非逐一添加子元素等技巧均有助于改善整体表现效果。 --- #### 6. **Vue.js 是什么?它有哪些主要特点?** Vue.js 是一款渐进式前端框架,允许开发者灵活选择组件化的开发模式来构建单页应用(SPA)[^4]。它的核心优势在于轻量级设计哲学、双向绑定机制支持快速实现界面同步更新以及强大的生态系统便于扩展功能模块等方面表现出色。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值