个人2017前端面试题汇总

个人2017前端面试题汇总

html

• H5新标签
  audio, video, canvas, svg等等

css

• @import和link引入css的区别

  1. link是html标签；@import由css提供。

  2. link引用css，在页面加载时同时加载；@import引入的css需要在页面加载完成之后加载。

  3. link是html标签，无兼容问题；@import低版本的浏览器不支持。

  4. link方式的样式的权重高于@import的权重。

• css3新特性
  
  1. border-radius：半圆，椭圆
  2. box-shadow：多重边框
  3. text-shadow：文字阴影
  4. linear-gradient：条纹背景

• 清除浮动的几种方法

  1. 父元素设置overflow: hidden;
  2. 在浮动元素后加空标签设置clear: both;
  3. 
     

     
     .clearfix:before,
     .clearfix:after {
             display: table;
             content: '';
     }
     .clearfix:after {
             clear: both;
     }
     .clearfix {
             *zoom: 1;
     }

• 如何让一个元素垂直居中

  1. div {
             position: fixed;            
             width: 140px;            
             height: 140px;            
             top: 0;            
             right: 0;            
             bottom: 0;            
             left: 0;            
             margin: auto;            
             background: black;
         }
     

  2. .parent {
             position: relative;
         }
         .child {
             position: absolute;            
             width:200px;            
             height:200px;            
             top:50%;            
             left:50%;   
             background: red;        
             transform: translate(-50%, -50%);
         }

  3. .parent {
             position: relative;
         }
         .child {
             position: absolute;            
             width:200px;            
             height:200px;            
             top:50%;            
             left:50%;   
             background: red;        
             margin-left: -100px;
             margin-top: -100px;
         }

  4. flex布局

     .parent {
             display: flex;
             justify-content: center;
             align-items: center;
         }
         .child {          
             width:200px;            
             height:200px;     
             background: red;        
         }

javascript

• 对象的深拷贝和浅拷贝
  浅拷贝对对象拷贝其内存地址而深拷贝在堆内存中开辟了一个新的地址
  实现深拷贝： 递归

• 数组有哪些方法

  1. shift() 删除并返回数组的第一个元素。

  2. pop() 删除并返回数组的最后一个元素。

  3. push() 向数组的末尾添加一个或多个元素，并返回新的长度。

  4. unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

  5. slice() 方法可从已有的数组中返回包含从 start 到 end （不包括该元素）的数组元素，该方法不会修改原数组。arrayObject.slice(start,end)

  6. splice() 向数组添加或删除项目，然后返回被删除的项目，该方法会改变原数组。arrayObject.splice(index,howmany,item1,.....,itemX)

  7. concat()方法用于连接两个或多个数组。该方法不会改变现有的数组。arrayObject.concat(arrayX,arrayX,......,arrayX)

• 对闭包的理解
  函数外部可以访问到该函数的内部变量，因为js作用域是会从当前函数作用域一级一级向上查找变量。所以在一个函数内部返回一个函数，这个函数可以读取其父级的布局变量。
• 基本数据类型有哪些
  Undefined, Null, String, Boolean, Number, Object, Symbol
  Symbol作为对象的属性名可以防止被改写。

• 随机生成有20个[2, 100)之间的数值的数组并排序

  function fn(min, max, num) {
  var arr=[];
  for (var i = 0; i < num; i++) {
      arr.push(Math.random()*(max-min)+min);
  }
  for (var j = 0; j < num; j++) {
      for (var k = 0; k < num-1-j; k++) {
          if (arr[k]>arr[k+1]) {
              var temp=arr[k];
              arr[k]=arr[k+1];
              arr[k+1]=temp;
          }
      }
  }
  return arr;
  }
  var arr=fn(2, 100, 20);

• 跨域
  js在不同的域之间不能进行数据通信，不同的域指协议，域名，端口不同。
  实现跨域的方法：
  
  1. 通过script。
• get 和 post 的区别
  
  1. get对数据长度有限制
  2. get安全性较差，发送的数据是url的一部分

• 数组去重

  var arr=[1,1,2,3,4,5,3,2];
  var set=new Set(arr);
  [...set] //[1, 2, 3, 4, 5]

• 实现斐波那契数列

others

• vue-router传参以及获取参数
• Promise对象
• 前端性能优化
• 浏览器兼容