题目1: 下面的代码输出多少？修改代码让 fnArri 输出 i。使用 两种以上的方法
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() );
//不管是传参多少，输出都是 10
只有一个i
立即执行函数有一个独立作用域
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(i){
return function(){
console.log(i)
}
}(i)
}
console.log( fnArr[4]() ); // 4
var fnArr=[];
for(var i=0; i< 10; i++){
!function(i){
fnArr[i]=function(){
return i;
}
}(i)
}
console.log(fnArr[3]()) // 3
题目2： 封装一个汽车对象，可以通过如下方式获取汽车状态
var Car = (function(){
var speed = 0;
function setSpeed(s){
speed = s
}
function getSpeed(){
return speed
}
function decelerate(){
speed-=10;
return speed
}
function accelerate(){
return speed+=10;
}
function getStatus(){
if(speed>0){
return 'running';
}
else{
return 'stop'
}
}
return {
setSpeed: setSpeed,
getSpeed: getSpeed,
accelerate: accelerate,
decelerate:decelerate,
getStatus: getStatus,
speed: 'error'
}
})()
Car.setSpeed(30);
console.log(Car.getSpeed()); //30
Car.accelerate(); //+10
console.log(Car.getSpeed()); //40;
Car.decelerate(); //-10
Car.decelerate(); // -10
console.log(Car.getSpeed()); //20
console.log(Car.getStatus()); // 'running';
Car.decelerate();
Car.decelerate(); // 0时的状态为stop
console.log(Car.getStatus()); //'stop';
//Car.speed; //error
题目3：下面这段代码输出结果是? 为什么?
var a = 1;
setTimeout(function(){
a = 2;
console.log(a); //2
}, 0);
var a ;
console.log(a); //1
a = 3;
console.log(a); //3
输出结果: 1 3 2
首先需要考虑变量提升， setTimeout() 是在所有的代码都结束后，在执行 所以setTimeout 最后
提升变量：
var a;
var a;
a=1
console.log(a) //a=1
a=3
console.log(a) //a=3
执行定时器
a=2
console.log(a) //a=2
题目4：下面这段代码输出结果是? 为什么?
var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){}
console.log(flag);
输出： true
按照执行顺序，setTimeout()会最后执行
当flag=true 时， while(flag){}循环，
当为真时，一直死循环
其他的代码都等待循环后执行，
可是循环不会结束，其他代码得不到执行
题目5： 下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）
for(var i=0;i<5;i++){ //for循环后， 输出i=5
setTimeout(function(){
console.log('delayer:' + i ); //当循环完成后，i=5 时 输出
}, 0);
console.log(i); // 0 1 2 3 4
}
输出：
0
1
2
3
4
"delayer:5"
"delayer:5"
"delayer:5"
"delayer:5"
"delayer:5"
for(var i=0; i< 5;i++){
(function(i){ //当（）内没有i值时， i=5
setTimeout(function(){
console.log('delayer:'+ i)
})
})(i)
console.log(i)
}
题目6： 如何获取元素的真实宽高
- 宽高都写在样式表（外部样式 嵌入样式）中，获取元素宽高
<style>
.box{
width: 100px;
border: 2px solid ;
padding: 20px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
var box= document.querySelector('.box')
var bb=box.offsetWidth //content+ padding +border===width
console.log(bb)
输出： 144
//所以真实宽 = width-padding-border
注意： offset 计算时包括了padding和border
- 当元素宽高的样式 写在了行内（内联）样式中， 可以用
box.style.width //获取宽度
box.offsetWidth //获取宽度+ padding+border
两种方式都可以获取到
- 不同版本浏览器
//ie8版本之前通过 元素.currentStyle.width
var box= document.querySelector('.box')
console.log(box.currentStyle.width);
//ff,safari,opera,chrome,ie9及之后版本:通过window.getComputedStyle(元素).width
var box= document.querySelector('.box')
console.log(window.getComputedStyle(box).width);
输出 100px
是真实的div宽度
题目7： URL 如何编码解码？为什么要编码？
参考
为什么编码？
(1)URL 只能使用 ASCII 字符集来发送。
也就是 Url中只允许包含英文字母（a-zA-Z）、数字（0-9）、-_.~4个特殊字符以及所有保留字符，不能使用其他文字和符号 。这意味着 如果URL中有汉字，就必须编码后使用。
(2)HTTP协议中通过URL传参是通过键值对形式进行的，格式上是以？、&和=为特征标识进行解析，如果键或者值的内容中包含这些符号，就会造成解析错误，所以要进行编码，用不会造成歧义的符号代替有歧义的符号。
但是麻烦的是 标准的国际组织并没有规定具体的编码方法，而是交给应用程序（浏览器）设置的编码格式（utf-8 gbk .....）决定。 对于非ASCII字符，RFC文档建议使用utf-8对其进行编码得到相应的字节，然后对每个字节执行百分号编码。
获取URL 中的包含？后的字符串：
window.location.search
window.location.search
"?js,console,output"
var nn=window.location.search
console.log(nn)
VM432:2 ?js,你好,bbbb
undefined
typeof nn
"string"
if(nn[0]==='?'){
var str=nn.slice(1)
console.log(str)
}
js,你好,bbbb
var arr= str.split(',')
coonsole.log(arr)
["js", "你好", "bbbb"]
console.log(encodeURICompontent(arr[1]))// 对URL中的（部分）一个组件进行编码，而不是全部进行编码
"%E4%BD%A0%E5%A5%BD"
console.log(decodeURICompontent("%E4%BD%A0%E5%A5%BD"))
'你好'
//编码===文字转换为 编码
encodeURIComponent('?你好')
//解码 =====编码 转换为 文字
console.log(decodeURIComponent('%3Fa%3D%E4%BD%A0%E5%A5%BD%26bb'))
encodeURI和encodeURIComponent的编码区别：
encodeURI()对完整的URI编码，后者对URI的一个组件进行编码。
; / ? : @ & = + $ , #，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码
escape函数
真正作用是:
返回一个字符的Unicode编码值，为方便他们能在所有计算机上可读
具体规则是:
所有空格、标点以及其他非ASCII字符都用%xx编码替换;如果看到%u的编码，那就是escape函数
题目8： 补全如下函数，判断用户的浏览器类型
<script>
var test = window.navigator.userAgent;
//console.log(test);
function isAndroid(){
if(/Android/i.test(test)){
return console.log('isAndroid');
}
}
function isIphone(){
if(/iPhone/i.test(test)){
return console.log('isIphone');
}
}
function isIpad() {
if(/iPad/i.test(test)){
return console.log('isIpad');
}
}
function isIos(){
if(/iPad/i.test(test)){
return console.log('isIos');
}
}
function isMac() {
if(/Macintosh/i.test(test)){
return console.log('isMac');
}
}
isAndroid();
isIphone();
isIpad();
isIos();
isMac();
</script>
/i 忽略大小写
网友评论