JavaScript 闭包后的面试题
1、闭包的面试题
使用原生 js,addEventListener 给每个li元素绑定一个click事件输出li的顺序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>闭包</title> <style> ul{ list-style:none; } li:nth-of-type(2n){ background-color:darkgoldenrod; } li:nth-of-type(2n + 1){ background-color:#00FFFF; } </style> </head> <body> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> <script> </script> </body> </html>
这题表面是考 addEvenListener 绑定事件实际是考闭包,绑定事件 addEventListener 和 onclick 差不多,onclick写着更简便一些
1. onclick相当于给对象加一个属性
2. 只不过 onclick 把函数 function(){ console.log(this.innerHTML); } 绑定到了li元素身上, 总的来说把里面的函数保存到了外部
3. 利用立即执行函数,用闭包解决闭包
function test(){ var liCollection = document.getElementsByTagName("li"); for(var i = 0; liCollection.length > i; i++){ (function(num){ liCollection[num].onclick = function(){ console.log(this.innerHTML); alert(liCollection[num].innerHTML); } }(i)); } } test();
2、计算一个字符串的字节长度
写一个方法,求一个字符串的字节长度。
提示:
一个中文占两个字节,一个英文占一个字节
字符串有一个方法 charCodeAt(),可以返回指定字符串的 Unicode 编码,返回值是 0-65535 之接的整数,
当返回值 <=255 时为英文,
当返回值 >255 时为中文
语法:
charCodeAt( index )
var str = "Hello world"; console.log(str.charCodeAt(1)); // 输出字符H的Unicode编码是101
定义计算字符串长度的 retBytesLength(target) 方法
1. 一个英文字符一个字节,一个中文字符二个字节
2. 先判断字符串每一位的ASCII码,小于等于255是英文,大与255的是中文,最后就能求出相应的结果
function retBytesLength(target){ var count = 0, len = target.length; for(var i = 0; len > i; i++){ if(target.charCodeAt(i) <= 255){ count ++; }else if(target.charCodeAt(i) > 255){ count +=2; } } return count; } var str = "Hello world 你好"; console.log(retBytesLength(str)); // 16
优化一下,
找到一个规律,大于 255 的只不过多了一个字节而已,就是说汉字比英文字符多了一个字节,
基础字符串长度不变,看看有没有汉字,循环遇到汉字的时候就加一个,程序简单多了效率更高。
程序再简化一下,才是最终整洁高效的代码
function retBytesLength(target){ var count, len; count = len = target.length; // 这里计算一次字符串长度,赋值len在下面循环里调用,不用每次循环都获取一次字符长度 for(var i = 0; len > i; i++){ if(target.charCodeAt(i) > 255){ count ++; } } return count; } var str = "Hello world 你好"; console.log(retBytesLength(str));
3、微店2017笔试题
先学 "逗号操作符"
(2, 3) 这块必须加括号,不加括号优先级顺序识别会发生混乱,
逗号是一个计算符,由于有括号的加持会先计算逗号运算符,然后把结果赋给变量 a
var a = (2, 3); // 3
逗号操作符的意思是
1. 先看逗号前面的表达式,如果前面表达是需要计算就先计算
2. 再计算逗号后面的表达式,如果后面表达式需要计算就计算后面的表达式
3. 都计算完了之后,会把逗号后面的计算结果返回去
var a = (1 - 1, 1 + 1); // 2 var a = (9 - 1, 1 + 1); // 2
接下来看这道题,写出程序的执行结果
var f = ( function f(){ return "1"; }, function g(){ return 2; } )(); console.log(typeof f); // Number
1. 外面的括号优先级高,里面有逗号运输符,把最后一个函数 g 返回
2. 剩下的形成一个立即执行函数,执行结果返回数字类型 2,最后变成 var f = 2;
var f = (
function g(){
return 2;
}
)();
3. typeo f 返回数字类型 Number
最厉害的问题天使:
函数 f 不会和变量 var f,预编译的时候会不会覆盖?有一个优先级,先看括号里面的逗号运算符,返回逗号后面的函数 g。
4、写出程序的执行结果
var x = 1; if(function f() {}){ x += typeof f; } console.log(x); // 1undefined
分析
1. if 括号里是 functionf(){} ,怎么分析这个问题?if( 条件) if 括号里的条件 functionf(){} 不是为 false 那六个值,那肯定能进入判断
2. 但是这个函数 functionf(){} 当完条件之后,函数他自己产生了什么变化?
括号一定会把里面变成表达式,变成表达式他就不是函数定义了,函数名f 从此后消失了。
3. f 名消失了,未经过声明的变量应该报错,但是只有放到 typeof 里是唯一不报错的操作符,
所以 typeof f 返回字符串类型的 "undefined"
4. 变量 x 等 于1,数字 1 加上 undefined 等于NaN,
但 typeof 返回的是字符串类型的 "undefined",字符串加什么都是字符串,所以最后的结果是 "1undefined"
5、记录一些面试题
1. html顶部DOCTYPE有什么作用?有什么影响
2. Display的参数值极其含义
3. 描述一下盒子模型
4. css3伪类都有哪些
5. position属性有哪些值,有什么区别
6. 如何创建一个div,并添加到页面里
7. 写一个正则表达式,检验字符串首尾是否含有数字