十大热点javascript笔试题你都会么?
作者:韩子迟
原文地址:http://www.cnblogs.com/zichi/p/4359786.html
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、经典闭包
dom污染法:
闭包:
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://xxx.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
如有意见建议欢迎交流斧正~
关注数:10亿+ 文章数:10亿+
粉丝量:10亿+ 点击量:10亿+
微信群管理员请扫描这里
喜欢本文的朋友,欢迎关注公众号 程序员哆啦A梦,收看更多精彩内容
点个[在看],是对小达最大的支持!
如果觉得这篇文章还不错,来个【分享、点赞、在看】三连吧,让更多的人也看到~