整理下《前端江湖面试》对本身有益的题目。

时间  2019-11-10
标签 整理 前端江湖面试 本身 有益 题目 栏目 快乐工作 繁體版
原文   原文链接

面试题目汇总

前言

近期在找工做，也在读 前端面试江湖 这本书，书中整理了不少基础的面试题目，在书中也发现了一些错误。
好记性不如烂笔头，因而整理下对本身有益的题目，都是一些较为基础的题目,后期还会更新。时时刻刻勉励本身，注重基础。
如今在找工做，初中级前端，若有哪位热心的仁兄公司在招前端，但愿@我一下，目标广州，前端路很长，但愿一块儿努力向前。css

js初级之操做字符串

  1. 截取字符串 var a = "www.qdjhu.com中的qdjhu"。html

    • 考察知识点，substr()第一个参数为起始位置，第二个参数为截取的长度，注意第一个参数为负数则从末尾往前找，第二个参数为负数则返回空字符串，此方法不会修改原字符串，只是查找并返回查找的结果，与slice()方法不一样的是，slice()方法第二个参数为结束位置，slice()的第一个参数若是大于第二个参数则返回空字符串。
      a.substr(4,5)或者a.slice(4,9)

  2. 判断字符串是不是这样组成的，第一个必须是字母，后面的可使字母，数字，下划线，总长度为5-20。前端

    • 考察知识点，正则。[a-zA-Z]是匹配全部字母，w表示匹配任意字母，数字，下划线。{n}表明重复几回，{n,m}表明重复至少n次，至多m次。
      var a = /^[a-zA-Z]{1}\w{4，19}/

  3. 给定一个字符串 "IamWangZhiJun",要求查找里面的字符串Wang。vue

    • 考查知识点，对String对象的操做，indexOf()方法表示查找一个字符串在另外一个字符串中的位置，返回一个整数，字符串匹配开始的位置。java

      var a ="IamWangZhiJun"
          var b ="Wang"
          var c =a.indexOf(b) //3
          var d = a.substr(c,b.length)

  4. 如何实现一个删除字符串左边为空白字符的方法。node

    • 知识点1，replace(),第一个参数为匹配模式（正则），第二个参数为替换的内容。

    • 知识点2，量词符和贪婪模式，？表示0次或者1次{0，1}，*表示0次或者屡次{0，}，+表示1次或者屡次{1,}。默认状况下匹配贪婪模式。ios

      function leftTrim(str){
        return str.replace(/^\s*/,"")
        };
        var a = leftTrim("   abc")//abc

  5. JavaScript 的typeof 都返回那些数据类型。css3

    • 知识点，js的6种数据基本类型。underfined,String,Number,Object,function,boolean 。

  6. 请定义一个函数，实现字符串的反转。web

    • 知识点，主要是把字符串从末尾开始的每个元素截取后，在从新组成一个新字符串，用到的方法charAt(), 返回指定位置的字符，注意是从0开始。面试

      function reverStr(str){
      var temStr = "";
      for(var i = str.length-1:i>=0:i—-){
      temStr+=str.charAt(i)}
        }
         returun temStr;
      }
7. 字符串的操做主要有那些。
 * 查找类型
      *   indexOf()，返回匹配开始的位置。
      *   search(),返回匹配的第一个位置。
      *   match()，返回一个数组，成员为匹配的字符串。
      *   length(),返回字符串的长度
    
 * 截取，拼接,替换类
      *    slice(),从原字符串中取回字符串并返回,第一个参数为起始位置，第二个参数为结束位置。
      *    substr(),从原字符串中取回字符串并返回，第一个参数是子字符串的开始位置，第二个参数是子字符串的长度。
      *    concat(),方法用于链接两个字符串，返回一个新字符串，不改变原字符串。
      *    replace(),第一个参数为被替换的内容，第二个参数为要替换的内容，通常只匹配一个。
      *    charAt()方法返回指定位置的字符，参数是从0开始编号的位置。
      *    trim()
 *    转换类
      * split(),第一个参数为起始位置 第二个参数为限定放回数组的成员数，注意，第一个参数若是为空，则返回数组的成员是原字符串的每个字符。此方法会将字符串装换为数组。

8. 有一个字符串 abcd-ef-ghi,请用js把它处理成ghi&ed&abcd。
  * 知识点，字符串和数组之间的装换。
var a ="abcd-ef-ghi";
        var b = a.split("-");
        var result = b.reverse().join("&")
        ```

  1. 请编写代码拓展JavaScript中string对象，让其有一个方法删除字符串中全部英文句号"."。

    String.prototype.killPoint = function(){
return this.replace(/^\./g,"");
 }

  2. 将字符串"wang zhi j un"中由空格分割的每一个单词首字母大小写。

    function str(words) {
     words = words.split(" ");
     for(var i = 0;i<words.length;i++){
       words[i] = words[i].charAt(0).toUpperCase + words[i].slice(1);
     }
     return words;
  }
  var words = "wang zhi j un";
  str(words);

JS初级之变量,DOM，循环语句

  1. JS如何检测变量是一个string类型？请写出函数实现。

    function isString(str){
      if(typeof(str) === "string" || str.constructor === String){
         return true;
         }else{
          return false;
          }
      }
      var str = "hello world"
    • 这里须要注意的是也要判断这个值的数据类型。

  2. 请说明javaScript中的nodeName,nodeVaule,nodeType的区别

    *   nodeName 表示节点的名称
    *   元素节点的nodeName是标签名称
    *   属性节点的nodeName是属性名称
    *   文本节点的nodeName是#text
    *   文档节点的nodeName是#document
*   nodeVaule 表示文本内容
    *   对于文本节点，nodeVaule属性包含文本
    *   对于属性节点，nodeValue属性包含属性值
*   nodeType 属性返回节点的类型,经常使用的以下
    *   元素类型对应的节点类型为1
    *   属性类型对应的节点类型为2
    *   文本属性对应的节点类型为3

  3. 下列代码执行后，结果是什么

    for(i=0,j=0;i<6,j<10;i++,j++){
        var k =i+j
        }
        alert(k) //18
        for(i=0,j=0;i<10,j<6;i++,j++){
        var k =i+j
        }
        alert(k) //10
    • 知识点，在for语句中条件用逗号隔开，就至关于“而且”。
    • var t =(4,5,6),console.log(t) //6,这里也说明逗号表达式返回的结果是由最后一个表达式决定的。

  4. 统计从1-400之间的天然对数中含有多少个1？

    var count = 0;
      for(var i=0;i<=400;i++){
       for(var j=0;j<=i.toString().length;j++){
         if(i.toString()[j]=="1"){
          count++}
        }
      }
      alert(count)

  5. js中基本数据类型有哪些？本地对象，内置对象，宿主对象有那些？

    • 基本数据类型

      string,boolean,number,null,undefined,object。
    • 本地对象(经常使用)

Object,Function,String,Number,Boolean,Data,Array,RegExp。

  • 内置对象

    • 简单的说，内置对象是本地对象的一种，其中包含2种对象，Math,Global(isNaN,parseInt,parseFloat)

  • 宿主对象
    全部BOM,DOM都是宿主对象
    其中BOM经常使用对象有

    • localtion
    • navigation
    • screen
    • history

JS中级之函数

  1. 编写一个函数，参数为一个元素，返回指定元素的第一个元素，函数越简单越好

    function getFirst(el){
    var nodes = el.children;
    return nodes.length!=0?nodes[0]:null;
    }

  2. 简述JavaScript中this的理解。

    • this表明函数执行的时候，自动生成一个内部对象，在函数内使用
    • this指的是调用函数的那个对象

    • 一下讨论this的四种用法

      • 纯粹的函数调用，说明此时this表明全局对象。

        var x = 1;
     function test(){
     this.x = 0;//这里等同于x = 0;已改写
     }
     test();//window.test()
     alert(x);//0

      • 做为对象方法的调用，说明此时this指向这个的上级对象。

        function test(){
       alert(this.x);
       }
       var o = {};
       o.x=1;
       o.m = test;
       o.m()//1

      • 做为构造函数的调用，说明此时this是指向新对象，不是全局对象！！！

        var x = 2;
      function test(){
      this.x = 1;
       }
      var o = new test();
      alert(o.x)//1
      alert(x)//2

      • apply调用

        var x = 0;
      function test(){
      alert(this.x)}
      var o = {};
      o.x = 1;
      o.m = test;
      o.m.apply()//0,当参数为空的时候，默认调用全局
      o.m.apply(o)//1

  3. 什么是闭包？闭包的特性？对页面有什么影响？好处和坏处？请写出一个闭包的简单实例？

    • 闭包就是可以读取其余函数内部变量的函数。

    • 闭包特性

      • 闭包外层是一个函数
      • 闭包内层也是一个函数
      • 闭包会return内部函数
      • 闭包返回的函数内部不能有return
      • 执行闭包后，闭包内部的变量会缓存
      • 闭包只有被执行的时候才会调用

    • 好处和坏处

      • 方便上下文调用
      • 增强封装性
      • 坏处 浪费内存

    • 实例

      function a(){
         var i = 0;
         function b(){
           console.log(++i)
           // i=null 解决内存泄漏 
         }
         return b;
       } 
       var c = a();//执行a函数
       c()//执行b函数，也就是执行闭包，结果为1
       c()//2
       …

  4. IE和Firefox处理兼容。

    • 绑定事件监听

      function addEvent(elem,eventName,handler){
 if(elem.attachEvent){
    elem.attachEvent("on"+eventName,handler)
    }else if{
    elem.addEventListener(eventName,handler,false)}
    }else{
    elem["on"+eventName]
    }
            
     function removeEvent(elem,eventName,handler){
     if(elem.detachEvent){
     elem.detachEvent("on"+eventName,handler)
     }else if{
     elem.removeEventListener(eventName,handler,false)
     }else{
      elem["on"+eventName]
        }      
    }

    • 获取到event对象

      function getEvent(e){
return e ? e : windowm.event;
}
function getTarget(e){
return e.target||e.srcElement
}
//阻止默认和冒泡
function prevent(e){
if(e.prevent){
e.preventDefault();
}else{
e.returnValue = false
}
                }
                function stop(e){
                if(e.stopPropagation){
                e.stopPropagation();
                }else{
e.cancelBubble()}
               }

  5. 将$(".red").attr("sth",4)装换成Js实现

    • 知识点，获得的是数组，要遍历。

      var a = document.getElementsByClassName("red"); 
for(var i =0;i<a.length;i++){

}

6. 做用域问题

var a = {n:1};
var b =a;
a.x=a={n:2};//a.x={n:2};a={n:2}
console.log(a.x);//undefined
console.log(b.x);//{n:2}

理解，首先 `var a = {n:1}` a这里指向一个对象，`var b =a ` 则是将b也指
 向这个对象，第三行代码，实际是已经不共享对象了，a已经改写了，而b.x里面则添
 加了x = {n:2}，故有上结果。
7. Boolean对象和Boolean值

var x = new Boolean(false);
if (x) {
alert('hi');
}
var y = Boolean(0);
if (y) {
alert('hello');
}
//alert("hi"),undefined

8.什么是跨域？跨域的几种实现方法？
 * 跨域是经过js在不一样域进行数据传输或者通讯，当端口号，协议，域名 不一样的状况下，使用ajax是拿不到数据的。
 * 解决方法
 * 使用window.name进行跨域,
    a.html页面,好比说域名是www.abc.com/a.html;这里须要注意的是 数据只能是字符串形式。
<script>window.name = "我是a.html页面的数据，我是跨域请求的数据"</script>
  ```
   b.html页面，好比说www.baidu.com/b.html
 
  ```
  <iframe id="proxy" src="www.abc.com/a.html" style="display:none" onload="getdata()"></iframe>
  
  <script>
  var iframe = document.getElementById("proxy");
  function getdata(){
  iframe.onload = function (){
   var data = iframe.contentWindow.name;
   alert(data);
   }
   iframe.src = "about:blank";
  }
  </script>
  
  ```
  • 用H5 window.postMessage,可自行百度。

9.判断当前浏览器的类型

var useAgent = window.navigator.useAgent;

if(useAgent.indexOf("Chorme")){
  alert("是Chorme浏览器")
};
if(useAgent.indexOf("Safari")){
  alert("是Safari浏览器")
};
if(useAgent.indexOf("Firefox")){
  alert("是Firefox浏览器")
};
主要涉及的知识点 是考察window对象下的navgator对象的useAgent属性，获得是字符串，返回最字符串进行操做。

HTML5，CSS3初级，中级面试题

  1. CSS3新特性有哪些？请作说明。很多于5条

    • 选择器类(稍微特别一点的)

      * first-child
* last-child
* nth-child
* :cheecked

    • 文字样式

      • @font-face

        @font-face{
       font-family:BorderWeb;
       src:url(BorderWeb.eot)
       }
       .border{
       font-family:"BorderWeb"
       }

      • text-overflow & white-space & word-warp

        .ellipsis{text-overflow:ellipsis; 
        overflow:hidden;
        white-space:nowrap; 
        width:200px; background:#ccc;}
      • text-decoration为文本添加下划线 默认值none
      • 边框，背景 样式
      • 圆角 border-radius,四个参数 从上左到下右 4个方位

      • 渐变，

        • 线性渐变.

          • linear-gradient(left,#333,#999)(默认是从上到下)

          • 第一个参数为方位，能够是对角,如left to。也能够是角度，注意这里是顺时钟，如180deg就是从下到上

        • 径向渐变.

          • radial-gradient(center,circle,yellow 10%,bule 30%)
        • 阴影，box-shadow.反射,box-reflect
        • 背景，background-clip

        • 布局

          • flex布局
          • 多列布局column,参数column-count,column-gap,column-rule

      • 动画,过渡

        * transition
  * transform
  * animation

  1. HTML有哪些新特性？

    • 新增标签

      • <header>
      • <footer>
      • <nav>
      • <section>
      • <artical>
      • <aside>
      • <figure> <figcaption>
      • <details>
    • 用于绘画的 canvas 元素
    • 用于媒介回放的 video 和 audio 元素
    • 对本地离线存储的更好的支持 Local storge，sessionStorage
    • 新的表单控件，好比 calendar、date、time、email、url、search，移动端体验更好
    • 新增获取地理位置，上传文件等API
    • 新的跨域通讯机制 window.postMessage

3.localStorage,sessionStorage,cookie 的区别

  • localStorage 用于持久化的本地存储，关闭页面还有，除非主动删除，不然一直存在，存储量大
  • sessionStorage 不是持久化的本地存储，关闭页面就不会有
  • cookie 是与服务器交互的，做为http规范的一部分而存在，在浏览器和服务器之间来回，存储量小

4.如何触发页面的回流reflow,重绘repaint,解释下它们的基本原理

  • DOM元素的修改，添加，删除。
  • 仅改变DOM元素的字体颜色，只有repaint
  • 应用新的样式或者修改任何元素外观的属性
  • resilze浏览器窗口，滚动
  • 读取元素 如(offsetTop,offsetLeft等等)

  • 原理解析

    • repaint 重绘 是当一个元素的外观被改变的时候产生重绘。
    • reflow 重排（回流），是当DOM发生改变，如宽高等。若是reflow 的频繁，会致使GPU使用率上升

    • 减小性能影响的方法

      1. 减小对DOM的操做，如 查询时候将值赋值给局部变量，减小循环对DOM的操做。
  2. 使用JSON格式来进行数据交换

5.transition的局限性

  • transition 须要事件触发
  • transition 是一次性的，不能重复，除非一在触发
  • transition 只有开始和结束2种状态，不能定义中间状态
  • transition 只能定义一个属性的变化，不能涉及多个属性。
  • transition 不能识别display的变化。

6.如何优化页面速度，提升页面响应。

  • 取消重定向，缘由是网站都会首先加载一个空白的页面，而后在定向到另外的页面。
  • 合并javaScript
  • 合并css
  • 使用css sprite
  • 启用GZIP
  • css,js引入文件位置，css放在<head>里面，js放在尾部
  • img标签要添加alt属性
  • 清除无效的a标签，并给a标签加上title属性
  • 缓存静态资源
  • 不用iframe/frame
  • 减小DNS域名查找时间，将DNS的时间设置为较低的水平，好比60-100ms进行一次DNS查询

7.如何提升前端性能

  • 用webStorage代替cookie,能够减小HTTP请求的数据量
  • 使用css3动画，开启GPU加速。translate3d()
  • 缓存HTML标记

8.如何对网站的文件和资源进行优化

  • 文件合并
  • 文件最小化
  • 使用cdn托管
  • 缓存的使用

9.请简单说明浮动和绝对定位的区别和应用。

  • 两者都会脱离文档流，并自动转换为块级元素。不一样的是绝对定位的元素是按照浏览器的左上角计算的或者对设置相对定位的父元素开始的，它的脱离文档流不占据空间，所以会产生覆盖页面上的其余元素，故有了z-index属性。
  • 浮动元素仍是基于正常的文档流，只是在文档流中抽出，并尽量的移动到最左侧或者右侧，文字内容会围绕在浮动元素周围，仍然在文档流中的元素会替补原先的空间。

10.说说移动端的兼容和常见问题解决方案(整理了本身用过的)

1. meta 元标签基础知识
  * 将窗口调整为设备窗口，并禁止用户缩放
      ```
      <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
      ```
  * 忽略页面中的数字识别为电话号码,Android平台对邮箱的识别
      ```
      <meta name="format-detection",content="telephone=no">
      ```
       ```
       <meta name="format-detection",content="email=no">
       ```   
  * 当网站添加到主屏幕快速启动方式,以及顶部导航条样式
       
       ```
       <meta name="apple-mobile-wep-app-capable",content="yes">
       ```
       ```
       <meta name="apple-mobile-web-app-status-bar-sytle",content="black">
       ```
2. 移动端字体
 * 中文使用默认字体，英文用Helvetica
3. 触摸事件的响应顺序
      ```
      一、ontouchstart 
      二、ontouchmove 
      三、ontouchend 
      四、onclick
      ``` 
      
4. Retina屏幕下问题解决
  * 移动端的视觉稿一般会设计为传统PC的2倍，一般把设计稿乘以2/1获得实际书写时候打大小
  * 图片则设置为 实际宽高的50%,如 background-position:50% 50%;
5. IOS系统下被触摸的时候有半透明遮罩
      ```
      a,button,input,textarea{-webkit-tap-heightlight-color:rgb(0,0,0,0);}
      ```
6. webkit表单元素的默认外观怎么重置
      ```
      .css{-webkit-appearance:none;}
      ```
7. 打电话，发邮件
      ```
      <a href="tel:020-62682400">打电话给020-62682400</a>
      ```
      ```
      <a href="email:13249791010@163.com">13249791010@163.com</a>
      ```
      
8. 移动端模拟hover效果，添加ontouchstart,ontouchend事件

  ```
   var btnBlue = document.querySelector(".btn-blue");
   btnBlue.ontouchstart = function(){
   this.className = "btn-blue btn-blue-on"

}

btnBlue.ontouchend = function(){
   this.className = "btn-blue"

}

9. ios下禁止调整字体大小
body{-webkit-text-size-adjust:100%}
     ```

10. ios下输入框取消大写
  ```

<input autocapitalize="off" autocorrect="off">

11. css3动画尽量地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位,用translate3D开启加速    
  
 11.说说移动端2栏布局，左侧定宽，右侧自适应的几种方法
   * HTML代码
<div class="main">    
  <div class="left">左侧固定</div>
  <div class="right">右侧自适应<div>
  </div>
  ```

  • 第一种方法，浮动+定位(等高布局)

    .main{
position:relative;
padding-left:100px;
display:inline-block;

}
.left{
position:relative;
float:left;
width:100px;
margin-left:-100px;
  
}
.right{
   float:left;
}
 .right,.left{
 height:200px;
 min-height:200px;
 height:auto !important;
 }
 ```

  • 第二种，浮动(等高布局)

    .main{
overflow:hidden;
}
.left{
float:left;
width:100px;
padding-bottom:9999px;
margin-bottom:9999px;
}
.right{
margin-left:100px;
padding-bottom:9999px;
margin-bottom:9999px;
}
.right,.left{
  height:200px;
  min-height:200px;
  height:auto !important;
  }

  • 第三种方法，定位+margin

    .left{
position:absolute;
top:0;
left:0;
width:100px;
height:400px;
}
.right{
margin-left:100px;
height:400px;
}

  • 第四种方法，定位

    .left{
position:absolute;
top:0;
left:0;
width:100px;
height:400px;
}
.right{
position:absolute;
top:0;
left:100px;
height:400px;
}

  • 第五种方法，flex

    .main{
display:flex;
}
.left{
width:100px;
height:400px;
}
.right{
flex:1;
height:400px;
}

  • 第六种方法 table

    .main{ 
display:table;
width:100%;
}
.left{
display:table-cell
width:100px;
height:400px;
}
.right{
display:table-cell
}

12.websocket是什么？和http有什么关联(只是基于本身的理解，暂无相关项目经验)

  • websocket属于H5新增的，websocket是基于http的,和http没有基本关系(或者说交集不大)，http只负责websokect的链接
  • http不是持久性的协议，websocket是持久性的协议，在http中一个request对应一个response,也就说明了 http的缺点 http是被动的，服务器端不能主动发起请求
  • ajax的轮询，每隔几秒发起一个请求给服务端，这样比较消耗内存,须要更快的响应速度
  • polling 则是采用阻塞模型(打电话，若是没信息值一直不挂)，则是须要更多的电话，ajax的轮询和 polling 的做用是实时推送
  • websokect解决的问题是，让服务端有主动性，只须要消耗一次的HTTP请求

先后端分离的理解

  • 近期先后端分离特别热门，一直搞不懂先后端分离是个什么鬼，有个什么做用。只知道之前前端把写好的页面发给后端，后端套用接口，这样就比较容易出现问题，工做量也比较繁琐。当我本身用vue作webapp，写json数据结构的时候，才稍微有点意识，之前直接是把数据写死或者从后台调用在html上显示，可是在用了vue以后，你是否是不多看见在html模板里面有直接的数据显示！！！基本都是先后端经过json在交流，前端用vue去实现组件化，工程化，可是有一个缺点是不利于seo优化，你html里面都没关键字怎么优化。最后关键一点，后端值负责数据，前端值负责显示。

  • 分离的好处

    • 之前崇尚全栈工程师，一我的不但管前端而且管后端，甚至数据库。长期以往，代码的解耦性可能不是很好。
    • 先后端分离之后，先后端值专一于只本身的开发工做，打造一个全栈式的团队。特色之二是实现先后端的解耦，先后端只须要按照沟通好的参数和接口，只要这个不改变，也只要前端人员修改代码，减小工做量。

  • 要不要先后端分离，分为三点。

    • 轻前端页面

      • 布局简单，样式较少，无css动画，只有少许的业务逻辑，只须要在不一样终端兼容

    • 重前端页面

      • 页面布局复杂，样式多，css动画多，有复杂的业务代码，须要在不一样终端和浏览器上作兼容。

    • 先后端均衡

      • 页面布局始终，样式适中，少量动画，业务逻辑较为简单，且只须要在不一样终端上兼容
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程