前端笔试试卷及解析

;面试宝典。 

倒计时

16、以下关于箭头函数的说法正确的是 :点击打开链接

ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿

 

普通函数中的this:

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

17、关于栈(stack)和堆(heap),下列说法正确的是

18、以下关于JSON的说法错误的是

解析:JSON基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。

JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对组合中的键名写在前面并用双引号 "" 包裹,使用冒号 : 分隔,然后紧接着值:

{"firstName": "Json"}

[]表示数组。

多个键值对之间用逗号分开。

19、同源策略指哪几部分相同

解析:同源是指,域名,协议,端口相同

20、以下关于同源策略的说法错误的是

解析:B.端口、协议、域名相同才叫同源。

C.同源策略是针对浏览器的,服务端不是浏览器。

21、以下描述正确的是?

 

解析:A. 调用的是来各自实例中的方法

B. 原型不会被修改

C. 查找方式是向上查找, 因此正确

D. 修改原型的同名方法不会影响本身的方法

22、在前端开发过程中使用 use strict 模式的目的是什么?

23、HTTP协议中可以控制缓存的有哪些?

解析:1.Expires:过期时间。(HTTP 1.0的字段)

浏览器再次发起请求的时候会先检查是否超过这个时间,如果没超过则直接从缓存中读取信息。但是如果浏览器的时间和服务器的时间不一致,就会出现问题。

2.Cache-control:max-age=6000(毫秒)/no-cache/no-store/private/public (HTTP 1.1的字段)

同时设置Expires和max-age的情况下,使用max-age

3.Last-Modified:最后一次修改时间。

4.Etag:被请求变量的实体标记

24、以下对Javascript作用域链的理解正确的是?

25、cookie 和 session 的区别描述正确的是

解析:Session是另一种记录客户状态的机制,不同的是Cookie保存在客户端浏览器中,而Session保存在服务器上。客户端浏览器访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。

如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话,那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案,客户来访的时候只需要查询客户档案表就可以了。

26、声明var a = b = true;,下列b等于true的是

27、下列无效的CSS选择器的是

28、关于XML和JSON区别的描述正确的是

解析:(1)可读性方面:基本相同,XML的可读性比较好;

(2)可扩展性方面:都具有良好的扩展性;

(3)编码难度方面:相对而言,JSON的编码比较容易;

(4)解码难度:JSON的解码难度基本为零,XML需要考虑子节点和父节点;

(5)数据体积方面:JSON相对于XML来讲,数据体积小,传递的速度比较快;

(6)数据交互方面:JSON与javascript的交互更加方便,更容易解析处理,更好的数据交互;

(7)数据描述方面:XML对数据描述性比较好;

(8)传输速度方面:JSON的速度远远快于XML。

29、以下代码,想要实现 a.add() 计算 a.x+a.y 的值,以下可行的方式有 

 

解析:d选项得是 b.add.bind(a)(); 才可以运行返回 this.x+this.y 的结果

30、下列哪些情况可触发reflow

解析:

体现:

repaint是某个DOM元素进行重绘;reflow是整个页面进行重排,也就是页面所有DOM元素渲染。

如何触发:

style变动造成repaint和reflow。

不涉及任何DOM元素的排版问题的变动为repaint,例如元素的color/text-align/text-decoration等等属性的变动。

除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。

常见触发场景:

1、触发repaint:

  • color的修改,如color=#ddd;
  • text-align的修改,如text-align=center;
  • a:hover也会造成重绘。
  • :hover引起的颜色等不导致页面回流的style变动。
  • 等等太多,一时间写出来也太难想了。

2、触发reflow:

  • width/height/border/margin/padding的修改,如width=778px;
  • 动画,:hover等伪类引起的元素表现改动,display=none等造成页面回流;
  • appendChild等DOM元素操作;
  • font类style的修改;
  • background的修改,注意着字面上可能以为是重绘,但是浏览器确实回流了,经过浏览器厂家的优化,部分background的修改只触发repaint,当然IE不用考虑;
  • scroll页面,这个不可避免;
  • resize页面,桌面版本的进行浏览器大小的缩放,移动端的话,还没玩过能拖动程序,resize程序窗口大小的多窗口操作系统。
  • 读取元素的属性(这个无法理解,但是技术达人是这么说的,那就把它当做定理吧):读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE));

31、试着编写一个 arrayMerge() 函数,实现该函数被调用时,传递任意数量的数组,返回一个合并后的数组(可不局限于一种实现)。

function arrMerge(){

    var res = [];

    for(let i=0;i<arguments.length;i++){

        res = res.concat(arguments[i]);        

    }

    return res;

}

console.log(arrMerge([1,2,3],[2,3]))

32请用代码实现如下倒计时组件(包括HTML,JS,CSS代码),要求:支持单页面多次调用及移动端显示;

<!DOCTYPE html >  
<html xmlns=" http://www.w3.org/1999/xhtml">  
<head>  
    <title>Timer</title>  
</head>  
<body>  
    <div id="timer1"> //三个同时计算时间 
    </div>  
    <div id="timer2">  
    </div>  
    <div id="timer3">  
    </div>  
</body>  
  
<script type="text/javascript">  
     
    
       var addTimer = function ()
 {     
        var list = [],     
            interval;     
    
            return function (id, time) 
           {     
            if (!interval)     
                interval = setInterval(go, 1000);     
                list.push({ ele: document.getElementById(id), time: time });  //三行数据time1,time2,time3   
           }     
    
             function go() 
           {     
                 for (var i = 0; i < list.length; i++)//list[0]--time1减一,list[1]--time2减一,list[2]--time2减一
               {     
                      list[i].ele.innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0);     
                 if (!list[i].time)     
                      list.splice(i--, 1);  //若时间到则,则剪切出有值的time1与time2   
               }     
           }     
    
               function getTimerString(time)
            {     
                d = Math.floor(time / 86400),     
                h = Math.floor((time % 86400) / 3600),     
                m = Math.floor(((time % 86400) % 3600) / 60),     
                s = Math.floor(((time % 86400) % 3600) % 60);     
               if (time>0)     
                   return d + "天" + h + "小时" + m + "分" + s + "秒";       
              else return "时间到";     
            }     
 }();     
    
    addTimer(  "timer1", 99999  );     
    addTimer(  "timer2", 66666  );     
    addTimer(  "timer3", 00000  );   
</script>  
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">     
<html>     
 <head>     
  <title>js倒计时代码</title>  
  <script type="text/javascript">  
     
function countDown( maxtime,fn )     
{         
   var timer = setInterval(function()     
   {     
       if(maxtime>=0){        
             minutes = Math.floor(maxtime/60);        
             seconds = Math.floor(maxtime%60);        
             msg = "距离结束还有"+minutes+"分"+seconds+"秒";        
             fn( msg );     
             if(maxtime == 5*60) alert('注意,还有5分钟!');        
             --maxtime;        
        }        
         else{        
            clearInterval( timer );     
            fn("时间到,结束!");       
        }        
    }, 1000);     
}     
 </script>     

  
 <script type="text/javascript">  
     
    countDown( 6,function( msg )     
    {     
        document.getElementById('timer1').innerHTML = msg;     
    });     
         
    countDown( 6000,function( msg )     
    {     
        document.getElementById('timer2').innerHTML = msg;     
    })     
   
 </script>      
 </head>     
    
 <body>       



 <div id="timer1" style="color:red" mce_style="color:red"></div>     
<div id="timer2" style="color:red" mce_style="color:red"></div>     
        
 </body>     
</html>    
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>JS</title>
<script type="text/javascript">
    function countdown ()
    {
        var end = new Date (2018,7, 22, 18);
       var now = new Date ();
          
        var m = Math.round ((end - now) / 1000);
        var day = parseInt (m / 24 / 3600);
        var hours = parseInt ((m % (3600 * 24)) / 3600);
        var minutes = parseInt ((m % 3600) / 60);
        var seconds = m % 60;



        if (m < 0)
        {
            document.getElementById ("clock").innerHTML = '0';
            return;
        }
        document.getElementById ("clock").innerHTML = day + ":" + hours + ":" + minutes + ":" + seconds;
                + "秒";
        setTimeout ('countdown()', 1000);
    }
    window.onload = function ()
    {
        countdown ();
    }
</script>
</head>
<body>
    <span id="clock"></span>
</body>
</html>

面试 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值