常见面试题

一、 css部分

  • css 宽高自适应的正方形 原理

    1、最简单的方法,根据css3中的vw属性

    1
    2
    3
    4
    5
    div {
    width: 50%;
    height: 50vw;
    background-color: red;
    }

    2、根据父元素的宽度比,利用padding-bottom撑开容器

    1
    2
    3
    4
    5
    6
    div {
    width: 50%;
    height: 0px; /* 用来阻止内容使得高度溢出 */
    padding-bottom: 50%;
    background-color: red;
    }

    3、利用伪元素的margin(padding)-top撑开容器(为了解决方案二的max-height失效问题)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
    width: 50%;
    background-color: red;
    }
    div: after {
    content: '',
    display: block;
    margin-top: 50%;
    }
  • css实现两列布局,左边固定,右边自适应,且等高。

    1、浮动的方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    .container {
    overflow: hidden;
    }

    .left {
    background: #ccc;
    float: left;
    width: 200px;
    /* 此处的 margin(padding)-bottom 尽可能设大(小)一点,用以撑开独立的content */
    margin-bottom: -1000px;
    padding-bottom: 1000px;
    }

    .right {
    background: #eee;
    margin-left: 200px;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
    }

    /* 设置最小高度 */
    .left,
    .right {
    min-height: 200px;
    height: auto !important;
    height: 200px;
    }

    2、利用display: table方式实现等高

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .container {
    display: table;
    width: 100%;
    }

    .left {
    width: 100px;
    display: table-cell;
    background-color: red;
    }

    .right {
    display: table-cell;
    background-color: blue;
    }

    3、利用flex方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .container {
    display: flex;
    flex-direction: row;
    }

    .left {
    background-color: red;
    width: 200px;
    }

    .right {
    background-color: blue;
    display: block;
    width: calc(100% - 200px);
    }

    .left,
    .right {
    min-height: 200px;
    height: auto !important;
    height: 200px;
    }
  • css实现三角形可参考

    1
    2
    3
    4
    5
    6
    7
    div {
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    }
  • 列举行内标签,块级标签 特点 / 区别

    行内标签: a span label input textarea img select code u

    块级标签: div table p h1…h6 ul ol li dl dd dt form hr

    特点 / 区别:

    块级独占一行;行内串行填充一行

    块级子元素可为块级或者行内;行内只可为行内

    块级可控制高度及边距;行内不可设置高度及边距

  • 快速排序

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function quickSort(arr) {
    if (arr.length <= 1) {
    return arr;
    }

    const left = [], right = [];
    const pivotIndex = Math.floor(arr.length / 2);
    const pivot = arr.splice(pivotIndex, 1)[0];

    for (let i = 0; i < arr.length; i++) {
    if (arr[i] < pivot) {
    left.push(arr[i]);
    } else {
    right.push(arr[i]);
    }
    }

    return quickSort(left).concat([pivot], quickSort(right));
    }
  • ajax实现

    重点:XMLHttpRequest对象

    1. 实例化XMLHttpRequest对象
    2. 连接服务器
    3. 发送请求参数 request
    4. 返回响应数据 response
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    // 调用方式
    ajax({
    url: 'http://localhost:8080/getUser',
    type: 'get',
    success(res) {
    console.log(res);
    },
    error(err) {
    console.error(err)
    }
    });

    // ajax伪代码
    function ajax(params) {
    const { type, url, success, error } = params;
    const xhr = new XMLHttpRequest();

    xhr.open(type, url, true);

    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
    const { status } = xhr;
    const type = xhr.getResponseHeader('Content-type');
    if (status === 200 && type === 'application/json') {
    const response = JSON.parse(xhr.responseText);
    success && success(response);
    } else {
    error && error(status);
    }
    }
    }
    }

    // post方式需要发送请求头
    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    // xhr.send(data);
  • 跨域的请求方式,及实现

    该部分可查看 此链接

  • jsonp原理

    一句话,动态创建script元素,提供一个回调函数来获取数据,后端返回callback名包裹的字符串。

  • 拖拽事件

    该部分可查看 此链接

  • 事件代理

    一句话,将子元素的事件操作交给父元素,举个例子,通过监听ul,操作li的行为。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     <ul id='list'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    <script>
    document.getElementById('list').addEventListener('click', function (e) {
    alert(e.target.innerHTML);
    });
    </script>
  • 事件冒泡、捕获

    事件冒泡:从内向外(子元素到父元素[假装形象😜]

    事件冒泡:从外向内(父元素到子元素[假装形象😜]

    事件默认:冒泡,即useCapture: false

  • call applay

    一句话,使用方法相同,都是借用别人的方法来调用,就像调用自己一样。

  • bind函数的原理

    接受一个函数和一个环境,并返回一个在给定环境中调用给定函数的函数,并且将所有的参数原封不动的传递过去。语法如下:

    1
    2
    3
    4
    5
    function bind(fn,context){
    return function(){
    return fn.apply(context,arguments)
    }
    }
  • 什么是闭包 好处 坏处

    考察作用域

    当前作用域总是能够访问外部作用域中的变量

    好处

    1. 缓存 - 处理耗时的函数,下次调用内存中留存地址

    2. 实现封装,防止变量跑到外层作用域中,发生命名冲突

    3. 匿名自执行函数,匿名自执行函数可以减小内存消耗

      坏处

    4. 内存泄漏

    5. 跨作用域,消耗性能

  • reduce实现map

    1
    2
    3
    4
    5
    function map(arr) {
    return arr.reduce((acc, current) => {
    acc.push(current);
    }, [])
    }
  • 实现range函数

    1
    2
    3
    function range(num) {
    return [...Array(num).keys];
    }
  • 判断对象是否是数组,如何将非数组转换为数组

    typeOf(obj)

    obj instanceof Array

    obj.constructor == Array

    obj.toString() === “[object Array]”

  • 前端性能优化

    cdn 图片资源webp格式 减少使用过多的第三方库 合并公共的css文件 存储文件到sevice worker中

  • react组件传值 子组件嵌套过深 如何解决传值 子组件如何监听传值的变化

    善用context,直接从父组件到末端子组件