2019前端面试常常会被问到的问题

不断的更新，这是一个超长文章，都是我一边面试一边写的总结。还有就是，这是一个初级水平（1-3年）的前端面试，可能涉及的算法不会太多。

2019.12.07更新

我也算是一个前端新手，所以这篇文章对新手可能比较适用。

在这里分为几个方面总结：

1. HTML
2. CSS
3. JavaScript
4. 框架类
5. 小程序
6. 其他

1. HTML

H5的新特性

• 标签的语义化

  • Header,footer,section,nav,aside,article...

• 增强型表单(input的type)

  • Color,date,email,number,range,tel
• 音视频
• canvas

• 地理位置

  • getCurrentPosition(); watchPosition(); clearWatch();
• 扡拽
• 本地存储

• 新事件

  • Onresize:调整窗口大小
  • Ondrag：拖动元素
  • onscroll
  • Onmousewheel: 鼠标滚轮
  • onplay
  • onpause
• websocket
• webwoker

HTML加事件的方式

1. 标签上加

   <input onclick="fn()" type="button" value="点我"/>

• 一定要加（）

  • 不好维护
  • 进差问题

1. DOM一级事件

   var oBtn = document.getElementById('btn');
   oBtn.onclick = fn;

2. DOM 二级事件

   oBtn.addEventListener('click',fn,false);
   oBtn.removeEventListener('click',fn,false);

2. CSS

css的定位有哪些

Position:

• static;普通流定位（默认）
• relative；相对定位，参考元素本身，不会脱离文档流
• absolute;绝对定位，
• fixed;固定定位，

float:

• Left;
• Right;

这里补充一下清浮动的方法吧：

1. 为父元素设高度（不知道具体高度就没有办法设定）；

2. 在浮动元素最下方加入一个块级元素，并设定css: clear: both;

   <div style="clear: both"></div>

3. 父元素设定：overfloat: hidden;(超出的内容会隐藏）;

4. ::after伪类法：

   .clearfix::after{

   ​ content: '';

   ​ display: block;

   ​ clear: both:

   }

5. 给父元素设定定位：如relative,absolute;

元素的居中

css2居中：

• 水平

  • 将要居中的元素display为inline/inline-block,然后父元素text-aline: center;
  • 将块级元素定一个宽度，然后margin: 0 auto;

• 垂直

  • 行内元素（单行），设置相同的height和line-height;
  • 行内元素（多行），设置上下相同的padding;
  • 行级盒子： 小图标和标题对齐设置：vertical-align: middle;

• 水平垂直居中

  • 绝对定位： top: 50%; left: 50%;要知道块级的宽高，并且上、左margin要减去自己的上、左的一半（margin: -20px 0 0 -20px）；

css3水平居中：

• 水平

  • 父：

    display: flex;
    flex-direction: row;
    justify-content: center;

• 垂直

  • 父：

    display: flex;
    flex-direction: row;
    align-item: center;

• 水平垂直

  • 父：display: flex;

    子：margin: auto;

3. JavaScript

ES6的新特性

1. const和let
2. 解构赋值
3. 展开运算符
4. 箭头函数
5. Class
6. Symbol

7. Set和Map

   • Set():有序列表集合
8. Promise

9. 字符串：

   • 模板字符串
   • for...of

10. 对像：

    • 简写
    • 解构赋值

11. 函数：

    • 箭头函数
    • 函数默认值

数组去重

ES6

1. Set 结合Array.from()方法

   

2. Set结合展开运算符

   

   ES5

   1. 利用arr.indexOf(a),如查有a返回a首次出现的下标，如果没有就返回-1

   function deRepeat(arr){
       var newArr = [];
       for(var i = 0;i<arr.length;i++){
           if(newArr.indexOf(arr[i] === -1){
               newArr.push(arr[i]);
           }
       }
       return newArr;
   };

### 跨域问题

1. 跨域产生的原因（有三个）

   • 发出去的请求不是本域（协议、域名、端口任何一个不同都不是本域）
   • 发出去的请求心须是xhr（XMLHttpRequest）请求才会产生跨域；
   • 浏览器才会有跨域

2. 跨域解决方案

   • CORS跨域资源共享

     被请求方的服务端设置：Access-Control-Allow-Origin

     对IE10以下支持不好

   • 服务器代理

     A客户端访问A服务器，A服务器做代理去访问B服务器，将结果返回给A客户端。

   • JSONP

     利用了HTML标签src属性可以跨域的特点。（不支持POST请求）

### ajax,fetch之间的区别

1. ajax

利用的是XMLHttpRequest对像

var xhr = new XMLHttpRequest();
xhr.open('get',url);
xhr.send();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            console.log(xhr.responseText);
        };
    };
};

2. <span style="color: red">fetch</span>请求

fetch(url)
    .then(function(resopnse){
        return response.json();
    })
    .then(function(data){
        //第二个then才是我们要的东西
        console.log(data);
    })
    .catch(function(error){
        console.log(error);
    });

<span style="color: #5cb85c">总结:</span>

• fetch语法简洁，更加语义化；
• 基于标准Promise，支持async/await;
• 但是对IE支持不友好；
• fetch请求不带cookie

switch与if哪个性能更好？

switch性能更好，用的是索引的方式，而if是一个一个的比较下去

闭包

1. 经典题：

   （有一个面试考了一次，全做错，有一些人永远也无法理解闭包，我就是其中之一）

   function fun(n,o){
       console.log(o);
       return {
           fun: function(m){
               return fun(m,n);
           }
       }
   };
   var a = fun(0);a.fun(1);a.fun(2);a.fun(3);
   var b = fun(0).fun(1).fun(2).fun(3);
   var c = fun(0).fun(1);c.fun(2);c.fun(3);
   //undefine 0 0 0 ;
   //undefine 0 1 2 ;
   //undefine 0 1 1 ;

4. 框架类

Vue.js

1. 组件间通信方式

Vue与react的区别

• 相似之处：

  • 都是用了virtal DOM
  • 都专注于UI层，其他的功能如路由、状态管理交给同伴框架处理

• 区别

  • react为JSX语法，Vue鼓励使用HTML模板
  • 重新渲染和优化：react会刷新整个组件树，Vue会跟据依赖关系相应的刷新
  • vue是双向数据绑定的，react是单向数据流

• 你会用哪一个

  • 总的来说，这其实是一个主观题。自己可以有很多的自己的想法
  • 轻量级，更快速，单页面应用：vue(有更简单的语法、易于开发）
  • 移动应用程序，专业的社区支持，大型应用程序： React

  • 无论哪一个，都没有相当大的差异

    到目前为止，笔者已经在两家公司工作过了，现在是第二家，用的都是vue,面试的公司大多数也是用vue的。所以总的来说，在深圳，vue的公司比较多。笔者也用了vue结合native.js来做了一个IOS和Android的应用，总的来说，不是很好用，不知道react-Native怎么样，但是native.js给我的一个感觉就是社区很不活跃，我发的第一个求助贴一个多月了到现在还没有人回复，但是我的项目都上线了。

5. 小程序

各种ID

1. openID每一个微信用户的唯一标识符

   也就是你每一次向微信官方获取的都是一样的。

   但是有一点要注意：小程序、微信公众号网页、app获取到的openID是不一样的（虽然都是同一个微信）

2. appID: 小程序ID,在开发都工具中用到
3. AppSecret： 小程序密钥

   小程序前端调用wx.login()获取到一个code，

   后端将code、appID和AppSecret发给微信官方，会返回openID和session_key

跳转的五种方法

1. wx.navigateTo

   • 保留当前页面，跳转到应用内的某个页面。
   • 但是不能跳到tabbar页
   • 使用wx.navigateBack可以返回到原页面
   • 小程序页面栈最多十层

2. Wx.redirectTo

   • 关闭当前页，跳转到指定页
   • 返回时会重新加载

3. Wx.reLaunch()

   • 与wx.redirectTo很相似
   • 先关闭了内存中所有保留的页面再转到指定页

4. wx.switctTab

   • 跳到babbar页

5. wx.navigateBack

   • 返回上一页或上页多级页
   • getCurrentPages()可以获得页面栈
6. 最后：navigator标签也是可以跳转的

6. 其他

移动端适配有哪些方案

1. flexible
2. media query
3. Rem

前端性能优化

7.HR会问的（有一些在技术面也会问到）

你在工作（项目）中遇到最困难的问题是什么，你是怎解决的？