蘑菇街2019实习生题目总结

最新推荐文章于 2022-04-03 22:24:51 发布

Milly_Liu

最新推荐文章于 2022-04-03 22:24:51 发布

阅读量224

点赞数 1

分类专栏：前端刷题总结

本文链接：https://blog.csdn.net/qq_38148024/article/details/104770398

版权

前端刷题总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天开始刷公司真题，先从稍微简单的实习生的题目开始，加油鸭！！！ Victory won’t come to me unless I go to it.

选择

CSS样式的优先级问题（CSS权重问题）：
- 优先级规则：有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
- （1）!important，加在样式属性值后，权重值为 10000
  （2）内联样式，如：style=””，权重值为1000
  （3）ID选择器，如：#content，权重值为100
  （4）类，伪类和属性选择器，如： content、:hover 权重值为10
  （5）标签选择器和伪元素选择器，如：div、p、:before 权重值为1
  （6）通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
  来源：https://www.cnblogs.com/fwl8888/p/9184658.html
对闭包的理解
- 闭包就是函数+函数内部能够访问到的变量的组合。
- 为什么要函数套函数？是为了构造出一个局部变量。
- 为什么要return一个函数，是为了让外部能够访问到这个函数，也就能够访问到这个函数内部的变量。
- 闭包的作用：定义的全局中的变量不想被随便的访问和修改时会考虑设置局部变量，而局部变量又不能被访问，所以暴露一个访问器也就是return的那个函数，来实现局部变量的间接访问。
- 对于闭包的理解可以参考这里
预解析问题
正则匹配问题
元字符的含义：参考MDN
- . 表示任意一个除了 \n 以外的字符
- [] 里面是什么就表示其中的一个什么，举例： [0-9] 表示0到9(包含)中的其中一个数字，[a-zA-Z]表示26个小写英文字母和26个大写英文字母中的其中一个字母
- | 表示或，是优先级最低的，最后才计算这个运算符
- () 含义： 1. 改变优先级； 2. 提取组(分组)

限定符：

{n} 表示前面的表达式必须出现n次， [a-z]{3} ytr
{n,} 表示前面的表达式至少出现n次，最多不限
{n,m} 至少出现n次，最多出现m次
* 表示出现0次或多次， {0,}
+ 表示出现1次或多次， {1,}
? 表示0次或1次？的另外一个意思是：终止贪婪模式

简写表达式：

[0-9]
\d 表示数字[0-9] 1 2 3 4 5 6 7 8 9 0
\D 表示非数字[^0-9]
\s 表示所有空白符：空格，制表符
\S 表示\s的反面，非空白符
\w 表示非特殊符号[a-zA-Z0-9]
\W 表示特殊符号[^a-zA-Z0-9_]

常见的几个正则匹配：

身份证号码(15位或者是18位)： ([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX])或者([1-9][0-9]{14})([0-9]{2}[0-9xX])?
邮箱： [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}

JS基本类型与引用类型的理解 — 参考这里
Event Loop的理解

不同的任务源会被分配到不同的 Task 队列中，任务源可以分为微任务（microtask）和宏任务（macrotask）。在 ES6 规范中，microtask 称为 jobs，macrotask 称为 task。setTimeout是宏任务，而Promise是微任务，所以按顺序来执行的话，宏任务被放在最后，微任务的then放在次后。

参考阮老师的文章
 一次弄懂Event Loop
Promise对象
```
  Promise对象只有三种状态。
 - 异步操作“未完成”（pending）
 - 异步操作“已完成”（resolved，又称fulfilled）
 - 异步操作“失败”（rejected）
```
这三种的状态的变化途径只有两种。
- 异步操作从“未完成”到“已完成”
- 异步操作从“未完成”到“失败”。
  这种变化只能发生一次，一旦当前状态变为“已完成”或“失败”，就意味着不会再有新的状态变化了。因此，Promise对象的最终结果只有两种。
  异步操作成功，Promise对象传回一个值，状态变为resolved。
  异步操作失败，Promise对象抛出一个错误，状态变为rejected。
前端常见的攻击方式 —

ARP攻击就是通过伪造IP地址和MAC地址实现ARP欺骗，能够在网络中产生大量的ARP通信量使网络阻塞，攻击者只要持续不断的发出伪造的ARP响应包就能更改目标主机ARP缓存中的IP-MAC条目，造成网络中断或中间人攻击。不是前端的攻击方式。
XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。
CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（XSS），但它与XSS非常不同，XSS利用站点内的信任用户，而CSRF则通过伪装成受信任用户的请求来利用受信任的网站。与XSS攻击相比，CSRF攻击往往不大流行（因此对其进行防范的资源也相当稀少）和难以防范，所以被认为比XSS更具危险性。
SQL 注入：就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

常见HTTP请求状态码的含义，详细分析参考这里

200 - 请求成功
301-永久重定向
302-临时重定向
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
400 - 请求无效
403 - 禁止访问

CSS属性继承问题 — 参考这里
NaN是一种特殊的number,NaN与任何值都不相等,与自己也不相等。typeof NaN==='number'
typeof的值

typeof Symbol()    //"symbol"
typeof Number()    //"number"
typeof String()    //"string"
typeof Function()    //"function"
typeof Object()    //"object"
typeof Boolean()    //"boolean"
typeof null    //"object"
typeof undefined    //"undefined"

下列哪两种方法可以有效防御跨站伪造请求(CSRF)：检查Referer字段；添加校验Token。
阻止事件冒泡：

event.cancelBubble = true;

event.stopPropagation();

return false;

常见的不支持冒泡的事件

编程题目

一个前端布局的题目，主要考点是实现高度自适应和宽度自适应，绝对定位实现高度自适应，伸缩布局的应用。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header,
        .footer {
            background-color: #7ecef3;
            height: 100px;
        }
        /* 使用绝对定位实现高度自适应 */
        .sec {   
            width: 100%;
            position: absolute;
            top: 100px;
            bottom: 100px;
            display: flex;  /*伸缩布局*/
            background-color: pink;
        }
        .sec .sec-left,
        .sec .sec-right {
            width: 200px;
            background-color: #89c997;
            
        }
        .sec .sec-content {
            background-color: #53b9be;
            flex: 1;
        }
        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
        
    </style>
</head>
<body>
     <header class="header"></header>
    <div class="sec">
        <div class="sec-left"></div>
        <div class="sec-content"></div>
        <div class="sec-right"></div>
    </div>
    <footer class="footer"></footer>
    <!-- 以上的布局主要是使用定位的方式来实现高度自适应，使用伸缩布局的方式实现宽度的自适应 -->
</body>
</html>

JS编程题目：编写一个js函数,传入一个非空字符串,计算出现次数最多的字符,返回该字符及出现次数,结果可能包含多个字符。如传入“xyzzyxyz”,则返回:{y:3, z:3}。
- 解题思路：输入的是一个字符串，首先遍历字符串的每个字符，统计各个字符的个数，放在一个对象中。然后找到这个对象中所有值的最大值，并将对应最大值的键值对提取出来放在最终的对象中。
- 难点： 1、如何实现字符个数的统计 2、如何确定对象中的最大值。
- 代码：

function countStr(str) {  
    var countObj = {};
    var maxObj = {};
    for (var i = 0; i < str.length; i++) {
        // console.log('第'+i+'个字符时'+str[i]);
        // console.log('=================');
        if (!countObj[str[i]]) {
            countObj[str[i]] = 1;
        }else {
            countObj[str[i]]++;
        }  
    }
    // console.log(countObj);  返回的是输入字符串的统计个数对象
    // console.log(Object.values(countObj));  返回的是对象中所有的值组成的数组
    // console.log(Object.keys(countObj));  返回的是所有的键组成的数组

    for (var key in countObj) {
        if (countObj[key] === Math.max.apply(null, Object.values(countObj))) {
            maxObj[key] = countObj[key];
        }
        
    }
    return maxObj;
}

console.log(countStr('xyzzyxyz'))

Milly_Liu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
蘑菇街2019实习生题目总结

今天开始刷公司真题，先从稍微简单的实习生的题目开始，加油！！！Victory won’t come to me unless I go to it.选择CSS样式的优先级问题（CSS权重问题）：优先级规则：有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。（1）!important，加在样式属性值后，权重值为 10000（2）内...
复制链接

扫一扫