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(j){
fnArr[j] = function(){
return j;
};
}(i);
};
console.log(fnArr[3]()); //输出3。
方法二:
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(j){
return function(){
return j;
};
}(i);
};
console.log(fnArr[3]()); //输出3。
方法三:
var fnArr = [];
var output = function(j){
fnArr[j] = function(){
return j;
};
};
for (var i = 0; i < 10; i ++) {
output(i);
};
console.log(fnArr[3]()); //输出3。
方法四:
var fnArr = [];
for (let i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
};
console.log( fnArr[3]() ); //输出3。
2、 封装一个汽车对象,可以通过如下方式获取汽车状态。
var Car = (function(){
var speed = 0;
function setSpeed(s){
speed = s;
};
function getSpeed(){
return speed;
};
function accelerate(){
speed += 10;
};
function decelerate(){
if(speed > 10){
speed -= 10;
}else{
speed = 0;
};
};
function getStatus() {
if(speed > 0){
return 'running';
}else{
return '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);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a); //输出1,3,2。因为setTimeout中的函数会在其它语句执行完之后再执行。
4、下面这段代码输出结果是?为什么?
var flag = true;
setTimeout(function(){
flag = false;
},0);
while(flag){};
console.log(flag); //不输出。因为 flag = true ,所以 while(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。
方法一:
for(var i=0;i<5;i++){
!function(j){
setTimeout(function(){
console.log('delayer:' + j );
}, 0);
}(i);
}; //输出delayer:0,delayer:1,delayer:2,delayer:3,delayer:4。
方法二:
for(var i=0;i<5;i++){
setTimeout(function(j){
return function(){
console.log('delayer:' + j );
};
}(i), 0);
}; //输出delayer:0,delayer:1,delayer:2,delayer:3,delayer:4。
方法三:
var output = function(j){
setTimeout(function(){
console.log('delayer:' + j );
}, 0);
};
for(var i=0;i<5;i++){
output(i);
};
方法四:
for(let i=0;i<5;i++){
setTimeout(function(){
console.log('delayer:' + i );
}, 0);
}; //输出delayer:0,delayer:1,delayer:2,delayer:3,delayer:4。
6、如何获取元素的真实宽高?
我们可以通过getComputedStyle来获取元素的真实宽高。它是一个可以获取当前元素所有最终使用的CSS样式的属性值,返回的是一个CSS样式声明对象([object CSSStyleDeclaration])。
例如:
var div = document.querySelector('div');
console.log(window.getComputedStyle(div).width);
console.log(window.getComputedStyle(div).height);
另外,在较低版本的IE浏览器下,我们需要使用currentStyle来进行这个操作。
7、URL 如何编码解码?为什么要编码?
-
编码:
encodeURI(),对统一资源标识符(URI)进行编码的方法。它使用1到4个转义序列来表示每个字符的UTF-8编码。
encodeURIComponent(),对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码。其中,encodeURI方法不会对下列字符编码:
1.ASCII字母
2.数字
3.~!@#$&*()=:/,;?+'而encodeURIComponent方法不会对下列字符编码:
1.ASCII字母
2.数字
3.~!*()'所以encodeURIComponent比encodeURI编码的范围更大。
前者被设计用来对一个URL中的值进行转义,会把这些功能字符也进行转义;而后者被设计来用于对完整URL进行URL Encode,于是URL中的功能字符,比如&, ?, /, =等等这些并不会被转义。 解码:
decodeURI(),可对 encodeURI() 函数编码的 URI 进行解码。
decodeURIComponent(),可对 encodeURIComponent() 函数编码的 URI 进行解码。由于URL的编码格式采用的是ASCII码而不是Unicode,因此URL中不能包含任何非ASCII字符(例如中文),否则在客户端和服务端浏览器支持的字符集不同的情况下,就可能出现问题。这也就意味着,如果URL中有汉字或其它非规定字符,就必须编码后使用。
另外,HTTP协议中通过URL传参是通过键值对形式进行的,格式上是以?、&和=为特征标识进行解析,如果键或者值的内容中包含这些符号,就会造成解析错误,所以要进行编码,用不会造成歧义的符号代替有歧义的符号。
8、补全如下函数,判断用户的浏览器类型。
function isAndroid(){
return /Android/i.test(navigator.userAgent);
};
funcnction isIphone(){
return /iPhone/i.test(navigator.userAgent);
};
function isIpad(){
return /iPad/i.test(navigator.userAgent);
};
function isIOS(){
return /(iPad)|(iPhone)/i.test(navigator.userAgent);
};