【面试题记录】2020前端秋招笔试面试题目记录

笔试题记录

1. 空元素 Empty Element （滴滴笔试）

空元素是HTML/SVG里的不可能存在子节点的元素。
个人理解就是：自闭和标签

HTML中的空元素：

• <br/> <hr> <img> <input/> <link> <meta>
• <area> <source> <track> <wbr> <base> <param> <keygen> <col> <colgroup> <command> <embed>

2. <video src="movie.ogg" controls="controls"> （滴滴笔试）

<video>video是闭合标签</video>，不用必须指定宽高
类似，<audio></audio>也是闭合标签

video和audio都有的属性：

• autoplay loop src controls

3. 否定伪类 :not()

伪类pseudo Class为一个元素的特定状态应用样式
伪元素pseudo Element为一个元素的特定部分应用样式

伪类：

• :active :hover :focus :visited :enabled disabled :invalid :lang() :not() :optional :out-of-range
• :readonly :read-write :required :root :scope :target :valid
• :checked :default :defined :empty :first :focus-within :host :indeterminate :in-range :left :link
• 长子first-child 嫡长子first-of-type 幼子:last-child 嫡幼子:last-of-type
• 自定义规则:nth-child() :nth-of-type() 从后往前:nth-last-child() :nth-last-of-type()
• 独子:only-child :only-of-type

伪元素：

• ::after ::before ::first-letter ::first-line ::selection ::slotted

4. 状态码 （头条面试）

301 永久移动
302 临时移动
304 Not Modified
502 Bad Gateway
503 Service Unavailable

5. 获取元素?getElementByLabel()?

document.getXXX系列：

• getElementById() // id
• getElementsByClassName() // 类名
• getElementsByName() // name属性
• getElementsByTagName() // 标签名
• getElementsByTagNameNS() // 使用命名空间的XML文档

获取元素还有Selector:

• document.queySelector()
• document.querySelectorAll()

6. GET和POST区别 （腾讯、头条面试）

GET - 从指定的资源请求数据
POST - 向指定资源提交要被处理的数据

GET：

• 请求可被缓存
• 请求保留在浏览器历史记录中
• 可被收藏成书签
• 不应用于敏感数据
• 请求有长度限制
• 只应当用于取数据
• 请求参数只能是ASCII码，所以需要encode编码

POST：

• 请求不会被缓存
• 不保留在历史记录中
• 不能被收藏成书签
• 对数据长度无要求

7. 死锁

死锁产生的四个必要条件：

• 互斥条件
• .不可剥夺条件
• 请求和保持条件
• 循环等待条件

死锁预防：

• 破坏“不可剥夺”：一个进程不能获得所需的全部资源便处于等待状态，等待期间他占有的资源被隐式地释放
• 破坏“请求与保持”：一、静态分配：每个进程在开始执行时就申请他所需的全部资源。二、动态分配：每个进程在申请所需资源时它本身不占用系统资源。
• 破坏“循环等待”：按编号顺序进行

8. CSS优先级问题（伪类+属性选择器）

    <div class="main">
        <div class="test"></div>
    </div>
    <style>
        .main div{
    
            width: 200px;
            height: 200px;
            border: 1px red solid;
        }
        .test {
    
            border: 1px green solid;
        }
    </style>

.main div要比.test优先级高
ICE（Id > Class > Element）

    <div class="text">
        <p>伪类与类的优先级相等</p>
        <p>所以后者起作用</p>
    </div>
    <style>
        .text p{
    
            color: red;
        }
        p:first-child{
    
            color: green;
        }
    </style>

类和伪类优先级一致；元素和伪元素优先级一致

    <div>
        <p class="text" id="zpj">属性选择器</p>
    </div>
    <style>
        p[class="text"]{
    
            color: green;
        }
        [id="zpj"]{
    
            color: blue;
        }
        .text{
    
            color: red;
        }
    </style>

属性选择器的优先级等于类选择器

9. innerHTML和innerText

共同点是都可以读写。
text表文本；html表格式；inner是标签内部；outer包含标签本身；value只用于input和textarea

• innerText : 只要文本
• innerHTML : HTML格式
• outerText：包含标签自己
• outerHTML ：包含标签自己
• value ： input和textarea

10. 箭头函数

1. 箭头函数更适用于那些本来需要匿名函数的地方
2. 箭头函数不能用作构造函数
3. 没有自己的this、arguments、super和new.target

• 箭头函数不会创建自己的this，只能从自己的作用域链上一层继承this
• 使用剩余参数相较于使用arguments是更好的选择
• 箭头函数不要用作对象方法，this指向问题
• 箭头函数没有prototype属性
• 箭头函数不能使用yield关键字，不能用作生成器

高级用法：

// 加括号的函数体返回对象字面量
() => ({
   name: 'zpj'});
// 支持剩余参数和默认参数
(a =1,b =true,...rest) => {
   };
// 支持参数列表解构
([a,b]=[1,2], {
   name: c} ={
   name: a+b}) => a+b+c;

说到this，提一下setTimeout

setTimeout调用的代码运行在与所在函数完全分离的执行环境上。这会导致代码中的this指向window

bind改变this指向，只改变一次

new.target ：在普通函数调用中，指向undefined； 在类的构造方法中，指向被new执行的构造函数

// 1. 使用new.target来保证构造函数正确使用
function Foo(){
   
	if(!new.target) throw "Foo() must be called with new";
	// construction
}

// 2. 使用instanceof & new操作符干了什么（作业帮面试）