1.下面的代码输出多少？修改代码让 fnArri 输出 i。使用 两种以上的
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //
- 将代码分解：
var fnArr = [];
var f2 = function(){
return i;
};
for (var i = 0; i < 10; i ++) {
fnArr[i] = f2;
}
var f = fnArr[3];
console.log( f() );
由于fnArr[i] 等于一个函数，其实就是等于一个地址，所以地址的值一定是i的作用域的最终值。所以，如果想让i跟随for循环变化，就要给i新增一个局部作用域，这样就能跟随全局作用域的i的变化而变化，而不是得到全局作用域i的最终值。
- 修改代码让fnArri输出i
1.使用一个函数将return i包裹。
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(i){
return function(){
return i;
};
}(i);
}
console.log( fnArr[3]() ); //
2.使用立即执行函数，保护函数内的变量不会被全局污染。
var fnArr = [];
for (var i = 0; i < 10; i ++) {
!function (i) {
fnArr[i] = function () {
return i;
}
}(i);
}
console.log( fnArr[2]() ); //
3.使用es6的声明方式。
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){
speed = s;
}
function getSpeed(){
console.log(speed);
}
function accelerate(){
speed += 10;
}
function decelerate(){
speed -= 10;
}
function getStatus(){
if(speed === 0){
console.log('stop');
}else{
console.log('running');
}
}
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会等所在的js文件夹的所有代码加载完再执行。
4.下面这段代码输出结果是? 为什么?
var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){}
console.log(flag);
setTimeout还是会最后执行，又因为while循环没有中断条件，所以页面不会有输出，因为你根本打不开。
5.下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）
for(var i=0;i<5;i++){
setTimeout(!function(i){
console.log('delayer:' + i );
}(i), 0);
console.log(i);
}
6.如何获取元素的真实宽高
1.使用getComputedStyle获取css中所有属性, 然后再用getPropertyValue获取具体的某项属性的属性值。具体用法参考mdn
比如:
var div = document.querySelector('div');
var style = window.getComputedStyle(div,null);
var width = style.getPropertyValue('width');
var height = style.getPropertyValue('height');
console.log(width + '\n' + height);
2.使用offsetWidth/offsetHeight来获取元素的宽高，这个宽高包括边框、内边距、滚动条、内容。可以认为是IE盒模型的宽高。
7.URL 如何编码解码？为什么要编码？
- 为什么编码？
一般来说，URL中只能使用英文，数字，某些标点符号。所以如果出现了其他文字，比如说中文，就会导致URL出错，不同的操作系统、不同的浏览器、不同的浏览器字符集都会导致完全不同的编码结果，所以为了得出正确的结果，我们总是直接使用Javascript进行编码，不经过浏览器，直接发送给服务端。因为javascript输出的编码结果总是一直的，所以我们在服务器端得到的数据格式是统一的。 - encodeURI()对整个URL进行编码，但是一些特殊符号无法进行编码，比如"; / ? : @ & = + $ , #"，它的输出格式为utf-8，并且在每个字符前加上" % "。它的解码函数是decodeURI()。
- encodeURIcomponent()是对局部进行个别编码，所以它能编码encodeURI()无法编码的特殊符号，它的解码函数是decodeURIcomponent()。
8.补全如下函数，判断用户的浏览器类型
function isAndroid() {
var userAgent = window.navigator.userAgent;
if(/android/gi.test(userAgent)){
console.log('android');
}
}
function isIphone(){
var userAgent = window.navigator.userAgent;
if(/iphone/gi.test(userAgent)){
console.log('iphone');
}
}
function isIpad(){
var userAgent = window.navigator.userAgent;
if(/ipad/gi.test(userAgent)){
console.log('ipad');
}
}
function isIOS(){
var userAgent = window.navigator.userAgent;
if(/mac os x/gi.test(userAgent)){
console.log('ios');
}
}
isAndroid();
isIphone();
isIpad();
isIOS();
