下面的代码输出多少？修改代码让fnArri 输出 i。使用两种以上的方法
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //10，执行的时候i是全局变量10，所以整个数组元素执行后都会是10
如果想要让fnArr[i]执行后输出i,需要用函数构建一个新的局部作用域
- 第一种方法
var fnArr = [];
for (var i = 0; i < 10; i ++) {
var temp = function (i) { //这里的i是新声明的形参，最终是由函数执行时传入的实参决定
console.log(i); //这里的i是传入的参数 执行后输出0,1,2,3,4,5,6,7,8,9
}
temp(i); //i通过传参进入temp
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //3
整理后得到
var fnArr = [];
for (var i = 0; i < 10; i ++) {
!function (i) {
fnArr[i] = function(){
return i;
};
}(i);
}
console.log( fnArr[3]() ); //3
- 第二种方法
var fnArr = [];
for (var i = 0; i < 10; i ++) {
var temp = function () { //构建局部作用域
return function (){
return i;
}
}
fn = temp(i); //循环的过程中把i传入temp存值
fnArr[i] = fn;
}
console.log( fnArr[3]() ); //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 ++) {//使用var申明的变量在代码块外面能被识别，但是let命令却不能被识别，这样就实现了js的块级作用域，我们在使用条件语句 循环语句等就会不担心变量污染的问题了
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //10，执行的时候i是全局变量10，所以整个数组元素执行后都会是10
封装一个汽车对象，可以通过如下方式获取汽车状态
var Car = (function(){
var speed = 0;//speed = 30;speed = 40;speed = 30;speed = 20;
function setSpeed(s){
speed = s;
}
function getSpeed(){
return speed;
}
function accelerate(){
speed += 10;//speed = speed + 10
}
function decelerate(){
speed > 0?speed -= 10 : speed; //30
}
function getStatus(){
return speed > 0?'running':'stop';
}
return {
'setSpeed': setSpeed,
'getSpeed': getSpeed,
'accelerate': accelerate,
'decelerate': decelerate,
'getStatus': getStatus
'speed':'error'
};
})();
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 a = 1;
setTimeout(function(){
a = 2;
console.log(a); //2 作用域链 定时器被放入执行队列的最后
}, 0);
var a ;
console.log(a); //1 作用域链
a = 3;
console.log(a); //3 作用域链
下面这段代码输出结果是? 为什么?
var flag = true;
setTimeout(function(){ //定时器被放入执行队列的最后
flag = false;
},0)
while(flag){} //setTimeout会等待它执行完毕才会执行，此时flag永远是true，进入死循环。
console.log(flag);
下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）
for(var i=0;i<5;i++){
setTimeout(function(){
console.log('delayer:' + i ); ////代码会依次输出 0 1 2 3 4 ,delayer: 5 输出5次
}, 0);
console.log(i);
}
- 使用闭包
for(var i=0;i<5;i++){
setTimeout(function(i){
return function(){
console.log('delayer:' + i );
}
}(i), 0);
console.log(i);
}
获取元素的真实宽高
function trueStyle(element,pseduoElement){
//IE不支持window.getComputedStyle()，支持element.currentStyle();
return element.currentStyle ? element.currentStyle : window.getComputedStyle(element,pseduoElement);
}
let trueWidth = trueStyle(element).width;
let trueHeight = trueStyle(element).height;
URL 如何编码解码？为什么要编码？
- URL的编码/解码方法
JavaScript提供四个URL的编码/解码方法。
- decodeURI()
- decodeURIComponent()
- encodeURI()
- encodeURIComponent()
- 区别
encodeURI方法不会对下列字符编码
- ASCII字母
- 数字
- ~!@#$&*()=:/,;?+'
encodeURIComponent方法不会对下列字符编码
- ASCII字母
- 数字
- ~!*()'
所以encodeURIComponent比encodeURI编码的范围更大。
实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。
如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。 encodeURI("http://www.cnblogs.com/season-huang/some other thing"); //"http://www.cnblogs.com/season-huang/some%20other%20thing";
其中，空格被编码成了%20。但是如果你用了encodeURIComponent，那么结果变为
"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"
当你需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。
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"
参数中的 "/" 可以编码，如果用encodeURI肯定要出问题，因为后面的/是需要编码的
补全如下函数，判断用户的浏览器类型
function isAndroid() {
return /Android/.test(window.navigator.userAgent);
}
function isiPhone() {
return /iphone/i.test(window.navigator.userAgent);
}
function isiPad() {
return /ipad/i.test(window.navigator.userAgent);
}
function isIOS() {
return /(ipad)|(iphone)/.test(widow.navigator.userAgent);
}
