本文目录

第四范式 前端工程师面试题

🌙
手机阅读
本文目录结构

第四范式2019校园招聘前端笔试题

以下不属于JavaScript基本数据类型的是:

正确答案: D

Boolean
undefined
Symbol
Array

在W3C标准盒模型中,默认情况下块元素的总宽度为:

正确答案: A

content
content+2*padding
content+2*padding+2*border
content+2*padding+2*border+2*margin

关于状态码304,描述正确的是:

正确答案: C

Unauthorized
Gateway Timeout
Not Modified
Accepted

下列不属于行内元素的是:

正确答案: C

<span/>
<input/>
<td/>
<b/>

CSS权重问题

<style type="text/css">
    div.demo{
        color: black;
    }
    div.wrap .demo{
        color: yellow;
    }
    div.wrap > .demo{
        color: blue;
    }
    div.wrap + .demo{
        color: red;
    }
    div.demo + .demo{
        color: red;
    }
 </style>
<div class="wrap">
    <div class="demo">
        Hello
    </div>
  <div class="demo">
    World
  </div>
</div>

Hello 和 world 两个单词分别是什么颜色?

正确答案: C

black, black
yellow, blue
blue, red
blue, blue

JS输出值的问题

function Foo(){}
Foo.prototype.z = 3;
var obj = new Foo();
console.info(obj.z)
obj.z = 10;
console.info(obj.z);
delete obj.z;
console.info(obj.z);

请选择正确的输出值

正确答案: C

undefined10 10
3 10 undefined
3 10 3
都不正确

JS输出值的问题

var obj = {
   name:"zhangsan",
   sayName:function(){
     console.info(this.name);
   }
 }

 var wfunc = obj.sayName;
 obj.sayName();
 wfunc();
 var name = "lisi";
 obj.sayName();
 wfunc();

请选择正确的输出结果

正确答案: C

zhangsan zhangsan zhangsan zhangsan
zhangsan undefined lisi lisi
zhangsan undefined zhangsan lisi
zhangsan zhangsan zhangsan lisi

JS输出值的问题

compute(10,100);
var compute = function(A,B) {
  console.info(A * B) ;
};
 function compute(A,B){
   console.info(A + B);
 }
 function compute(A,B){
   console.info((A + B)*2);
 }
 compute(2,10);

请选择输出结果:

正确答案: B

110 12
220 20
220 24
220 12

跨域场景分析

http://www.4paradigm.com 网站上,以下哪种情况存在跨域?

正确答案: C

<script src="http://static.4paradigm.com/some.js"></script>
执行JS代码:$.get('http://www.4paradigm.com/some/path.json')
执行JS代码:$.post('http://account.4paradigm.com/register')
<iframe src="http://www.4paradigm.com:8080/help/" ></iframe>

JS正则问题

已知:

var reg = /^((0|-)?[1-9][0-9]*)$/

则string为以下哪个选项时,reg.test(string)的值为false;

正确答案: B

012
-012
123
-120

下列哪个行为会导致页面 reflow?

正确答案: A

改变div的display值
改变div的visibility值
改变div的color值
改变div的background值

关于箭头函数下列说法错误的一项是:

正确答案: D

函数体内this的指向是定义时所在的对象,而不是使用时所在的对象
箭头函数没有arguments
箭头函数不能使用yield命令
可以使用new创建一个箭头函数的实例

关于 BFC (block formatting context),以下说法错误的有:

正确答案: B

display 的值为 table-cell , table-caption和 inline-block 中的其中一个时,可触发 BFC
postion 的值为 relative 和 static 时可触发BFC
overflow-hidden 可作为常用 BFC 布局属性使用
只要元素可以触发BFC,就无须使用 clear:both 来清除浮动的影响

关于进程的基本属性,以下说法正确的是:

正确答案: A

进程是动态的、多个进程可以含有相同的程序和多个进程可以并发运行
进程是动态的、多个进程对应的程序必须是不同的和多个进程可以并发运行
进程是动态的、多个进程可以含有相同的程序和多个进程不能并发运行
进程是静态的、多个进程可以含有相同的程序和多个进程可以并发运行

关于 HTML ,以下说法错误的是:

正确答案: D

<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
HTML 语义化良好的页面丢失样式时也能呈现出清晰的结构。
HTML 语义化良好的页面有助于 SEO。
推荐使用 section 元素代替 article 元素及 nav 元素。

JS输出值问题

以下代码输出:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
  var elements = document.getElementsByTagName("li");
  for (var i=0;i<elements.length;i++){
     elements[i].onclick =function( ){
       alert(i); 
     };
 }

正确答案: D

1, 2, 3, 4
1, 1, 1, 1
3, 3, 3, 3
4, 4, 4, 4

对于只在表的首、尾两端进行插入操作的线性表,宜采用的数据结构为()

正确答案: C

顺序表
用头指针表示的单循环链表
用尾指针表示的单循环链表
单链表

选择排队作业中等待时间最长的作业优先调度,该调度算法是

正确答案: B

高响应比优先调度算法
先来先服务调度算法
优先权调度算法
短作业优先调度算法

已知一个有序表为12,18,24,35,47,50,62,83,90,115,134,当折半查找值为90的元素时,经过多少次比较后查找成功?

正确答案: B

5
2
3
4

以下关于图片格式说法错误的是

正确答案: D

SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失,适合小图标
JPEG适用于照片之类的色彩丰富的图片
PNG是无损压缩的,更适合需要高保真的修饰图片
gif支持动画,支持透明,对于色彩丰富的图片压缩效果也很好

以下输出错误的是

正确答案: D

let a = {
    age: 1
}
let b = a
a.age = 2
console.log(b.age) // 2
let a = {
    age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1
let a = {
    age: 1
}
let b = {...a}
a.age = 2
console.log(b.age) // 1
let a = {
    age: undefined,
    jobs: function() {},
    name: 'yck'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // { age: undefined, jobs: function() {}, name: 'yck'}

下面说法错误的是:

正确答案: C

HTTP1.0中,默认使用的是短连接。也就是说,浏览器和服务器每进行一次HTTP操作,就会建立一次连接,但是任务结束就会中断连接。
HTTP1.1中,默认使用长连接。使用HTTP长连接会在响应头中加入Connection:keep-alive
HTTP和HTTPS是两种完全不同的连接方式。默认端口不一样,前者是80,后者是443
在网络模型中,HTTP和HTTPS都工作于应用层

当一个 Ajax 请求由于跨域问题导致请求不能顺利完成时,你觉得是哪个环节导致的?

正确答案: D

浏览器不会将跨域请求发送给服务器
服务器不会处理任何跨域请求
服务端接受到跨域请求后不会做任何响应
浏览器不会将存在跨域限制的服务端响应正常交给客户端代码去处理

25 辆车分成 5 组,每场比赛最多只能 5 辆车同时比赛,请问最少进行几场比赛可以赛出前三名?

正确答案: B

6
7
8
9

执行如下代码,控制台的输出是什么?

var arr = [];
console.log(typeof arr, Object.prototype.toString.call(arr));

正确答案: C

array [object Object]
array [object Array]
object [object Array]
object [object Object]

获取input节点的正确方法是

<form class="file" name="upload">
    <input id="file" name="file" />
</form>

正确答案: C

document.querySeletorAll('file')[0]
document.getElementById('file')[0]
document.getElementsByTagName('input')[0]
document.getElementsByClassName('file')[0]

以下哪个是不稳定排序

正确答案: D

冒泡
插入排序
归并排序
快速排序

CSS生效值运算

阅读如下代码:

<style type="text/css">
  .a, .b, .c {
    box-sizing: border-box;
    border: 1px solid;
  }
  .wrap {
    width: 250px;
  }
  .a {
    width: 100px;
    height: 100px;
    float: left;
  }
  .b {
    width: 100px;
    height: 50px;
    float: left;
  }
  .c {
    width: 100px;
    height: 100px;
    display: inline-block;
  }
 </style>
 
 
<div class="wrap">
    <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

请问 wrap 这个 div 的高度是多少?

正确答案: B
100px
150px
200px
250px

["1", "2", "3"].map(parseInt) 的结果是什么?

正确答案: C

[1.0, 2.0, 3.0]
[1, 2, NaN]
[1, NaN, NaN]
[1, 2, 3]

产品经理期望管理员点击“删除”按钮时可以删除某个用户,关于实现该功能哪些描述是正确的:

如下 HTML 代码展示了一个用户列表:

<ul id="user-list">
    <li>用户1 <button data-id="1">删除</button></li>
    <li>用户2 <button data-id="2">删除</button></li>
    <li>用户3 <button data-id="3">删除</button></li>
    <li>用户4 <button data-id="4">删除</button></li>
    <li>用户5 <button data-id="5">删除</button></li>
</ul>

产品经理期望管理员点击“删除”按钮时可以删除某个用户,关于实现该功能哪些描述是正确的:

正确答案: C

首先需要为每个 button 元素绑定点击事件:$('button').on('click', removeUser);
通过点击时间获取用户的 ID:$(e.target).attr("data-id");
将列表项从页面上删除之前,需要先调用后端 API,$.delete('/delete/user/xxx').then(() => {   // 将用户从页面上移除  })
在单页应用中,如果动态添加一条新的用户记录,需要重新对该记录的删除按钮进行事件绑定。

给定一个字符串(数字或大小写字母), 找出最长的对称的子串(如有多个,输出任意一个)。

例如: 输入:“abbaad” 输出:“abba”

https://www.nowcoder.com/questionTerminal/93f6c5b032bf473696373ab0d834b0fc

给定两个数字(0-9)字符串(长度不限)求它们的乘积。

https://www.nowcoder.com/questionTerminal/ff74b3d786de4a30b4cd49b8ad97467f

2020第四范式秋招前端开发笔试题

解析URL

题目描述:请实现一个函数 parseUrl,将一段字符串解析为object。

url:http://www.xiyanghui.com/product/list?id=123456&sort=discount#title

https://www.nowcoder.com/test/question/done?tid=39066475&qid=806353

钩子函数

题目描述:请实现一个钩子函数,钩子函数可以理解为事件被动地被监听着,一旦满足条件就执行,可以执行多次(被监听到多次)

https://www.nowcoder.com/test/question/done?tid=39066475&qid=806354#summary

HTML字符串转换为domTree数据结构

题目描述:给到html字符串

<div id="test" class="myDiv"><div><p id="testP"></p><span></span></div><input type="text"/></div>

实现函数 toDomTree() 最后可以得到如下数据

[
  {
    "label": "div",
    "children": [
      {
        "label": "div",
        "children": [
          {
            "label": "p",
            "children": []
          },
          {
            "label": "span",
            "children": []
          }
        ]
      },
      {
        "label": "input"
      }
    ]
  }
]

https://www.nowcoder.com/test/question/done?tid=39066475&qid=806355#summary

参考链接

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了