1- 算出代码的输出值；修改代码让 fnArri 输出 i
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //
结果：输出 10，因为循环的时候 fnArr[i] = function(){return i} 右边的函数只是相当于一个函数代码片段，还没有执行，要到fnArr3调用时右边的函数才会执行，此时循环已经结束，i已经变为了10.
- 修改代码：
//方法一：可以创建一个闭包，闭包内保存i
var fnArr = [];
for (var i = 0; i < 10; i ++) {
(function(n){
fnArr[i] = function(){
return n;
};
})(i)
}
console.log( fnArr[3]() );
//方法二
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = (function(i){ //用立即执行函数传递i
return function(){
return i;
}
})(i);
}
console.log( fnArr[3]() );
2- 封装一个汽车对象，可以通过如下方式获取汽车状态
var Car = (function(){
var speed = 0;
function setSpeed(s){
speed = s
}
...
return {
setSpeed: setSpeed,
...
}
})()
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
结果：
var Car = (function(){
var speed = 0;
function setSpeed(s){
speed = s
}
function getSpeed(){
console.log(speed);
}
function accelerate(){
speed = speed + 10;
}
function decelerate(){
speed = speed - 10;
}
function getStatus(){
if(speed != 0){
console.log("running");
}else{
console.log("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- 这段代码输出结果，why
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的运行机制是，将指定的代码即函数移出本次执行，等到下一轮EventLoop的时，再检查是否到了指定时间。如果到了就执行对应代码。如果不到就等下一轮Event Loop再判断。这就意味着setTimeout指定的代码都必须等到本次执行的所有代码都执行完，才会执行
4- 这段代码输出结果，原因
var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){}
console.log(flag);
- 该段代码没有输出结果
- 原因:
- setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行
- flag为true,while是死循环,会一直运行
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(){
var n = i
setTimeout(function(){
console.log('delayer:' + n );
}, 0);
})()
console.log(i);
}
6- 获取元素真实宽高 的方法总结：
- 使用window对象的
getComputedStyle()方法
//由于style对象只能得到DOM节点上的属性值，所以这种方式有很大缺陷
function trueAttr(ele,pseudoCla){
if (window.getComputedStyle) {
return getComputedStyle(ele,pseudoCla);
}else if(ele.currentStyle) {
return element.currentStyle;
//低版本IE支持的方式
}
}
7- URL 怎样编码解码，为什么要编码
var url = "https://www.baidu.com/";
//编码
var encode01 = encodeURI(url);
var encode02 = encodeURIComponent(url);
//解码
var decode01 = decodeURI(encode01);
var decode02 = decodeURIComponent(encode02);
-
区别
(1) encodeURI方法不会对下列字符编码：
ASCII字母
数字
~!@#$&()=:/,;?+'
(2) encodeURIComponent方法不会对下列字符编码
ASCII字母
数字
~!()'
所以encodeURIComponent比encodeURI编码的范围更大。 -
对网址的编码不同的操作系统、不同的浏览器、不同的网页字符集，将导致完全不同的编码结果，由于参数是键值对的形式通过URL进行传递，为了避免歧义，要统一，所以要进行编码，让服务器正确识别。
8- 补全函数，判断用户的浏览器类型
function isAndroid(){
}
funcnction isIphone(){
}
function isIpad(){
}
function isIOS(){
}
结果：
function isAndroid(){
return /Android/.test(navigator.userAgent);
}
funcnction isIphone(){
return /iPhone/.test(navigator.userAgent);
}
function isIpad(){
return /iPad/.test(navigator.userAgent);
}
function isIOS(){
return /(iPhone)|(iPad)/.test(navigator.userAgent);
}
网友评论