题目1: 下面的代码输出多少？修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //'10'
//方法一
var fnArr = [];
for (var i = 0; i < 10; i ++) {
(function(i){
fnArr[i] = function(){
return i;
};
})(i)
}
console.log( fnArr[3]() );
//方法二
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = (function(i){
return function () {
return i;
};
})(i);
}
console.log( fnArr[3]() );
//方法三
var fnArr = [];
for (let i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() );
题目2： 封装一个汽车对象，可以通过如下方式获取汽车状态
var Car = (function(){
var speed = 0;
function setSpeed(s){
return speed = s;
}
function getSpeed() {
return speed;
}
function accelerate() {
return speed += 10;
}
function decelerate() {
return speed > 0 ? speed -= 10 : speed;
}
function getStatus() {
return speed > 0 ? 'running':'stop';
}
return {
"setSpeed": setSpeed,
"getSpeed": getSpeed,
"accelerate": accelerate,
"decelerate": decelerate,
"getStatus": getStatus
}
})();
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus(); //'stop';
//Car.speed; //error
题目3：下面这段代码输出结果是? 为什么?
var a = 1;
setTimeout(function(){
a = 2;
console.log(a);//‘2’,setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行
}, 0);
var a ;
console.log(a);//'1'
a = 3;
console.log(a);//'3'
题目4：下面这段代码输出结果是? 为什么?
var flag = true;
setTimeout(function(){//等到本次执行的所有代码都执行完，才会执行
flag = false;
},0)
while(flag){}//首先执行，此时setTimeout未执行，flag恒为true，因此这一句会无限循环
console.log(flag);//因为上一句代码无限循环，所以这一句不会执行
题目5： 下面这段代码输出？如何输出 delayer: 0, delayer:1...（使用闭包来实现）
for(var i=0;i<5;i++){
setTimeout(function(){
console.log('delayer:' + i );
}, 0);
console.log(i);
}
输出：
0
1
2
3
4
delayer:5
delayer:5
delayer:5
delayer:5
delayer:5
使用闭包实现输出delayer: 0, delayer:1...：
for(var i=0;i<5;i++){
setTimeout((function(i){
return function () {
console.log('delayer:' + i );
}
})(i), 0);
console.log(i);
}
或
for(var i=0;i<5;i++){
(function (i) {
setTimeout(function(){
console.log('delayer:' + i );
}, 0);
})(i);
console.log(i);
}
题目6： 如何获取元素的真实宽高
- clientWidth和clientHeight
这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：
a. 增加边框，无变化；
b. 增加外边距，无变化；
c. 增加滚动条，最终值等于原本大小减去滚动条的大小；
d. 增加内边距，最终值等于原本大小加上内边距的大小；<div id="test"></div> #test{ background-color: green; width: 200px; height: 200px; border: solid 5px red; /* 对应a理解，结果：200,200 */ margin: 10px; /* 对应b理解，结果：200,200*/ padding: 20px; /* 对应c理解，结果：240,240*/ overflow: scroll; /* 对应d理解，结果：223,223，>223=200（css大小）+40（两边内边距）-17（滚动条宽度）*/ } window.onload = function(){ var obj = document.getElementById("test"); alert(obj.clientWidth + "," + obj.clientHeight); };如果没有设置任何CSS的宽和高度，那么非IE浏览器会算上滚动条和内边距的计算后的大小，而IE浏览器则返回0（IE8已修复）
- scrollWidth和scrollHeight
这组属性可以获取滚动内容(可见内容)的元素大小。返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度。对于元素的实际大小，scrollWidth和scrollHeight理解如下:
①.增加边框，不同浏览器有不同解释（下面在IE8中运行正常，IE6运行不正常）：
a. Firefox和Opera浏览器会增加边框的大小，220x220
b. IE、Chrome和Safari浏览器会忽略边框大小，200x200
c. IE浏览器只显示它本来内容的高度，200x18（IE8已经修改该问题）
②.增加内边距，最终值会等于原本大小加上内边距大小，220x220，IE为220x38。
③. 增加滚动条，最终值会等于原本大小减去滚动条大小，184x184，IE为184x18
④. 增加外边据，无变化。
⑤. 增加内容溢出，Firefox、Chrome和IE获取实际内容高度，Opera比前三个浏览器获取的高度偏小，Safari比前三个浏览器获取的高度偏大。- offsetWidth和offsetHeight
这组属性可以返回元素实际大小，包含边框、内边距和滚动条。返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度。对于元素的实际大小，offsetWidth和offsetHeight理解如下：
①.增加边框，最终值会等于原本大小加上边框大小，为220；
②.增加内边距，最终值会等于原本大小加上内边距大小，为220；
③.增加外边据，无变化；
④.增加滚动条，无变化，不会减小；
对于元素大小的获取，一般是块级(block)元素并且以设置了CSS大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦<div id="test">test div element</div> #test{ background-color: green; width: 200px; height: 200px; border: solid 10px red; /*结果：220,220*/ margin: 10px; /*结果：220,220（无变化）*/ padding: 10px; /*结果：240,240*/ overflow：scroll; /*结果：240,240（无变化）*/ } window.onload = function(){ var obj = document.getElementById("test"); alert(obj.offsetWidth + "," + obj.offsetHeight); };
题目7： URL 如何编码解码？为什么要编码？
- url为什么要编码？
URL 是可移植的（portable）。它要统一地命名因特网上所有的资源，这也就意味着要通过各种不同的协议来传送这些资源。这些协议在传输数据时都会使用不同的机制，所以，设计 URL，使其可以通过任意因特网协议安全地传输是很重要的。
安全传输意味着 URL 的传输不能丢失信息。有些协议，比如传输电子邮件的简单邮件传输协议（Simple Mail Transfer Protocol，SMTP），所使用的传输方法就会剥去一些特定的字符。为了避开这些问题，URL 只能使用一些相对较小的、通用的安全字母表中的字符。
除了希望 URL 可以被所有因特网协议进行传送之外，设计者们还希望URL也可供人类阅读。因此，即使不可见、不可打印的字符能够穿过邮件程序，从而成为可移植的，也不能在 URL 中使用。
URL 还得是完整的，这就使问题变得更加复杂了。URL 的设计者们认识到有时人们可能会希望 URL 中包含除通用的安全字母表之外的二进制数据或字符。因此，需要有一种转义机制，能够将不安全的字符编码为安全字符，再进行传输。
- URL如何编码解码？
JavaScript提供四个URL的编码/解码方法。
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
区别
encodeURI方法不会对下列字符编码
ASCII字母
数字
~!@#$&*()=:/,;?+'
encodeURIComponent方法不会对下列字符编码
ASCII字母
数字
~!*()'
所以encodeURIComponent比encodeURI编码的范围更大。
encodeURIComponent会把http://编码成http%3A%2F%2F，而encodeURI却不会。
如果需要编码整个URL，然后需要使用这个URL，那么用encodeURI。
其中，空格被编码成了%20。但是如果用了encodeURIComponent，那么结果变为encodeURI("http://www.cnblogs.com/season-huang/some other thing"); //"http://www.cnblogs.com/season-huang/some%20other%20thing";
当需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"var param = "http://www.cnblogs.com/season-huang/"; //param为参数param = encodeURIComponent(param); var url = "http://www.cnblogs.com?next=" + param; console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"
题目8： 补全如下函数，判断用户的浏览器类型
function isAndroid(){
return /Android/.test(navigator.userAgent);
}
function isIphone(){
return /Iphone/.test(navigator.userAgent);
}
function isIpad(){
return /Ipad/.test(navigator.userAgent);
}
function isIOS(){
return /(Ipad)|(Iphone)/.test(navigator.userAgent);
}
网友评论