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

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

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

1. HTML
2. CSS
3. JavaScript
4. 框架类
5. 其他

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="点我"/>

• 一定要加（）

  • 不好维护
  • 时差问题，比如说 html 已经加载了，但是 js 还没有。这时候可以点击的了，但是没有用。

1. DOM 一级事件

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

2. DOM 二级事件

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

2.CSSS

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;
   };

4. 框架类

Vue.js

1. 组件间通信方式

5. 其他

移动端适配有哪些方案

1. flexible
2. media query
3. Rem