小白前端面试题（3）--wecode

WeCode前端工程师笔试题

1.  Http中GET和POST的区别，列举并解释HTTP常用状态码

 

（1）使用Get请求时,参数在URL中显示,而使用Post方式,则放在send里面

 

（2）使用Get请求发送数据量小,Post请求发送数据量大

 

（3）安全性：使用Get请求安全性低，会被缓存，而Post请求反之，post易于防止CSRF

 

（4）使用场景：get一般用于查询操作，post一般用于用户提交操作

 

（5）get参数拼接在url上，post放在请求体内（数据体积可以更大），因此当进行上传提交操作时如果较大就是用post

 

2.  cookie、sessionStorage、localStorage的区别

 

（1）容量

 

Cookie存储大小最大为4KB，而 localStorage sessionStorage 最大可存5M

 

（2）API易用性

 

Cookie只可用document.cookie=’...’来修改;

 

localStorage sessionStorage有俩个setItem getItem简单易用API

 

（3）是否跟随http请求发送出去

 

Cookie当HTTP请求时需要发送到服务器端；

 

localStorage sessionStorage不会随着http请求被发送出去

 

3.  列出并描述position的取值

 

1. relative：相对定位，相对于自己原来的位置进行移动，移动后，原来的位置继续占有

 

1. absolute：绝对定位，相对于最近一级有定位的父元素进行移动，原来的

位置不继续占有

 

（3）fixed：固定定位，相对于浏览器的可视窗口进行移动，原来的位置不继续占有

 

（4）sticky：粘性定位，相对于浏览器的可视窗口进行移动，原来的位置继续占有

 

4.  解释一下浮动及其原理，有哪些清除浮动的方法

 

1. 给浮动元素的父元素添加高度：如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。

 

1. clear:both; 在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。

 

1. 伪元素清除浮动： 结合 :after 伪元素和 hasLayout。 可以完美兼容当前主流的各大浏览器给父元素使用overflow:hidden; 这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。

 

（4） br标签清浮动： br标签存在一个属性：clear。这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all。即能清除掉浮动。

 

5.  javascript怎么实现一个类。怎么实例化这个类

 

js是一门弱类型语言，与c++和java语言不同，并没有强调类。实际应用中用function实现它的内容。

class Person {

    constructor(name) {

        this.name = name;

    };

}

// 实例化

var p = new Person('zhangsan')类的实现可通过对原型操作来实现

 

原型就是一个可以复制的类，通过复制可以创建一个一模一样的新的类；

原型是一个对象模板，里面有一些公共的方法和类，每个js对象在创建的时候（除了null）就会有一个与之关联的另一个对象，这个对象就是原型，每个对象对可以从原型中继承属性；

 

 

 

6.  Vue中created、mounted、updated的先后顺序，及其区别

 

1. 先后顺序：

1.  beforeCreate：创建前，vue实例的data和挂载元素el都还拿不到

 

2.  created：创建后，能拿到data的值，但挂载元素el还拿不到

 

3.  beforeMount：挂载前，挂载元素el初始化，但还是虚拟的DOM节点

 

4.  mounted：挂载后，vue实例挂载成功

 

5.  beforeUpdate：更新前，data变化后触发

 

（2）区别：

1．created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

 

2．mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

 

3. Updated：更新后，data变化后触发

 

 

7.  解释Vuex的作用和用法

 

(1)vuex的作用

Vuex提供一个在多个组件间共享状态的插件

把需要多个组件共享的变量全部存储在一个对象里面

把这个对象放在顶层的Vue实例中，让其它组件可以使用

 

（2）vuex原理

Vuex是vue的一个插件，只能用在vue上，因为它高度依赖vue的插件系统

Vuex中的store对象，本质就是没有template的隐藏着的vue组件

 

（3）vuex框架核心流程

Vuex规定所有的数据操作，都必须通过Vue Components -> Actions -> Mutations -> State的流程来进行

也就是：

首先，在组件中关联actions：this.$store.dispatch()

接着，在actions中，关联mutations：context.commit()

最后，在mutations中，修改state：state.info = ...

 

（4）使用场景：需要构建一个中大型单页应用，可能会考虑如何更好地在组件外部管理状态时

 

8.  程序题：实现两个div，子div在父div内水平和垂直居中

 

<div class="father">

        <div class="son"></div>

</div>

 

 

    <style>

        .father {

            width: 300px;

            height: 300px;

            background-color: red;

            position: relative;

        }

        

        .son {

            position: absolute;

            width: 100px;

            height: 100px;

            background-color: blue;

            top: 50%;

            left: 50%;

            margin-top: -50px;

            margin-left: -50px;

        }

    </style>

 

9.  程序题：实现树的广度遍历

 

function widthTravel(tree) {

    let stack = []

    let queue = []

    queue.push(tree)

    while (queue.length) {

        let len = queue.length

        for (let i = 0; i < len; i++) {

            let curr = queue.shift()

            stack.push(curr)

            if (curr.children && curr.children.length > 0) {

                queue.push(...curr.children)

            }

        }

    }

    return stack

}

 

 

 

10.  程序题：给出一个字符串，统计出现次数最多的字符

 

function mostAppearChar(str) {

    let map = new Map()

    for (let i = 0; i < str.length; i++) {

        map.has(str[i]) ? map.set(str[i], map.get(str[i]) + 1) : map.set(str[i], 1)

    }

    let max = -Infinity

    let res = ''

    for (let [key, value] of map) {

        if (value > max) {

            max = value

            res = key

        }

    }

    return res

}