Go to comments

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. 写一个正则表达式,检验字符串首尾是否含有数字



Leave a comment 0 Comments.

Leave a Reply

换一张