前端面试一定会问到的问题

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

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

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. 标签上加

• 一定要加（）

  • 不好维护
  • 进差问题

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;

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

### 跨域问题

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. fetch请求

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

总结:

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

4. 框架类

Vue.js

1. 组件间通信方式

5. 小程序

6. 其他

移动端适配有哪些方案

1. flexible
2. media query
3. Rem