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

最新推荐文章于 2022-10-05 17:22:10 发布

等时钟成长

最新推荐文章于 2022-10-05 17:22:10 发布

阅读量2.4k

点赞数 3

分类专栏：面试常问面试题外传 JavaScript

本文链接：https://blog.csdn.net/pangji0417/article/details/100135321

版权

笔试题记录

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. 箭头函数

箭头函数更适用于那些本来需要匿名函数的地方

箭头函数不能用作构造函数

没有自己的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操作符干了什么（作业帮面试）