题目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 忽略大小写