乐趣区

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

jiezi

不断的更新，这是一个超长文章，都是我一边面试一边写的总结。还有就是，这是一个初级水平（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
退出移动版