这10道javascript笔试题你都会么

Vincent_Ko
1,244 阅读13分钟
原文链接： www.cnblogs.com

simplify the life

这10道javascript笔试题你都会么

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.length === 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

 

　　如有意见建议欢迎交流斧正~

posted on 2015-03-25 10:36 韩子迟 阅读(10016) 评论(22) 编辑 收藏

Feedback

#1楼 2015-03-25 15:45 哥，你的肥皂掉了  

好难啊 支持(0)反对(0)   

#2楼[楼主] 2015-03-25 16:23 韩子迟  

@ 哥，你的肥皂掉了
自己想想疏通下就不难了~ 支持(0)反对(0) http://pic.cnblogs.com/face/675542/20170702143944.png   

#3楼 2015-03-25 16:24 hzm_frank  

自认为js还可以，没一道题能完全答对。 支持(0)反对(0) http://pic.cnblogs.com/face/466623/20150122105734.png   

#4楼[楼主] 2015-03-25 16:33 韩子迟  

@ hzm_frank
一起加油~ 支持(0)反对(0) http://pic.cnblogs.com/face/675542/20170702143944.png   

#5楼 2015-03-25 17:59 我是糖糖  

哈哈哈哈各种肯定题啊 支持(0)反对(0)   

#6楼 2015-03-25 18:02 虾吵吵  

1.闭包
2.变量作用域
3.this
许多经常写javascript的人也没都搞清楚的3件事。 支持(0)反对(0) http://pic.cnblogs.com/face/u31363.jpg   

#7楼 2015-03-27 17:31 DoubleFlower  

学习学习 支持(0)反对(0)   

#8楼 2015-03-29 09:19 奔跑的Man  

最后一个有问题吧，
if(a === 1) return obj;

修改为 支持(0)反对(0) http://pic.cnblogs.com/face/675818/20161225095349.png   

#9楼 2015-03-29 09:20 奔跑的Man  

@
if(a.length === 1) return obj; 支持(0)反对(0) http://pic.cnblogs.com/face/675818/20161225095349.png   

#10楼[楼主] 2015-04-02 19:54 韩子迟  

@ 奔跑的Man
的确是我的失误，感谢指出，已修复~ 支持(0)反对(0) http://pic.cnblogs.com/face/675542/20170702143944.png   

#11楼 2016-02-21 11:34 LiuYier  

这一句： arguments[0](); 返回的是函数的长度？ 今天才知道 支持(0)反对(0) http://pic.cnblogs.com/face/792333/20160323234333.png   

#12楼[楼主] 2016-02-22 21:27 韩子迟  

@ LiuYier
不是啊...自己看题目中的函数... 支持(0)反对(0) http://pic.cnblogs.com/face/675542/20170702143944.png   

#13楼 2016-03-05 09:57 dxcqcv  

第7题，table hash方法中maxn归下位吧，不然只能算出第一个字母的，如
else {
obj[s[i]] = 1;
maxn = -1;
... 支持(0)反对(0)   

#14楼[楼主] 2016-03-06 10:46 韩子迟  

@ dxcqcv
归下位？ 支持(0)反对(0) http://pic.cnblogs.com/face/675542/20170702143944.png   

#15楼 2016-03-11 09:14 dxcqcv  

@ 韩子迟
引用@dxcqcv
归下位？
是我没仔细看题目，以为是遍历所有字母的数量了，不好意思，搞错了。 支持(0)反对(0)   

#16楼[楼主] 2016-03-11 09:17 韩子迟  

@ dxcqcv
恩恩~ 支持(0)反对(0) http://pic.cnblogs.com/face/675542/20170702143944.png   

#17楼 2016-08-25 11:04 coolgod  

第7题第一种解法的代码有点冗余，if和else分支里重复了，可以简化为：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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]]++;   } else {     obj[s[i]] = 1;   }     if(obj[s[i]] > maxn) {       maxn = obj[s[i]];       letter = s[i];     } }   alert(letter + ': ' + maxn);
支持(0)反对(0)   

#18楼 2016-08-25 11:14 coolgod  

@ LiuYier
arguments是一个类似的数组的object（但和数组不一样），arguments[0]就是传给method的第一个参数，即fn（第二个参数是1），这时候fn里的this指向argument这个object，而argument这个object的length属性就是参数的个数。
以下为引用MDN文档：
The arguments object is not an Array. It is similar to an Array, but does not have any Array properties except length 支持(0)反对(0)   

#19楼 2016-08-25 11:38 coolgod  

第9题貌似也可以用闭包来实现：
?
1 2 3 4 5 6 7 8 9 function JSClass() {   this.m_Text = 'division element';   this.m_Element = document.createElement('div' );   this.m_Element.innerHTML = this.m_Text;   var that = this;   this.m_Element.addEventListener('click', function(){     that.func();   }); }
支持(0)反对(0)   

#20楼[楼主] 2016-08-25 11:48 韩子迟  

@ coolgod
哈哈，想要得到需要的结果，实现方式总是五花八门，比如也可以用 bind， 等等 支持(0)反对(0)http://pic.cnblogs.com/face/675542/20170702143944.png   

#21楼 2017-03-04 16:33 FatDong  

没有var声明的变量不一定是全局变量

```
function foo(){
var c;
function bar(){
c = 1
}
bar();
}
foo();
console.log(c); //c is not undefined
``` 支持(0) 反对(0)http://pic.cnblogs.com/face/1036860/20161006194748.png   

#22楼[楼主]36318622017/3/4 20:55:54 2017-03-04 20:55 韩子迟  

@ FatDong

你这例子举的有点看不懂了，想表达什么？ 支持(0)反对(0)http://pic.cnblogs.com/face/675542/20170702143944.png    刷新评论刷新页面返回顶部 注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。 【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库！
【前端】SpreadJS表格控件，可嵌入应用开发的在线Excel
【推荐】如何快速搭建人工智能应用？
【活动】AI技术全面场景化落地实践
【大赛】2018首届“顶天立地”AI开发者大赛
腾讯云0710 最新IT新闻:
· Opera成功上市：周亚辉二次创业 要做海外版今日头条
· 小米公告：与全球发售有关的稳定价格期于7月28日结束
· 一箭双星，我国成功发射第33、34颗北斗导航卫星
· Uber投资人致信创业者：市场或将崩溃，请大家筹备资金、抓住机会
· IBM本来要用Watson来抗癌，结果被却医生骂为Shit
» 更多新闻... 最新知识库文章:
· 历史转折中的“杭派工程师”
· 如何提高代码质量？
· 在腾讯的八年，我的职业思考
· 为什么我离开了管理岗位
· 那些让人睡不着觉的bug，你有没有遭遇过？
» 更多知识库文章...

导航

统计信息

  • 随笔 - 268
  • 文章 - 0
  • 评论 - 933
  • Trackbacks - 0

News

搜索

   

随笔分类(268)

随笔档案(268)

积分与排名

  • 积分 - 381791
  • 排名 - 438

最新评论

阅读排行榜

评论排行榜

推荐排行榜

Powered by:
博客园
Copyright © 韩子迟

avatar
文章
阅读
粉丝