网易 前端工程师面试题

🌙
手机阅读
本文目录结构

网易2020校招笔试- 前端开发工程师(提前批)

this指针问题

有一类二叉树用三叉链表来存储的时候除了带有指向左右孩子节点的两个指针,还有指向父节点的指针,那么这样一棵二叉树有2个节点,那么有多少指针指向NULL(注:根节点的父指针指向NULL,对于不存在的节点表示为NULL)?

正确答案: D

1
2
3
4
5

下面关于HTTP协议的说法错误的是( )

正确答案: C

HTTP报文分为请求报文和响应报文
HTTP请求行由请求方法、URL和协议版本组成
每个服务器都支持包括GET\HEAD\PUT等7种请求方法
HTTP响应行由协议版本、状态码和状态描述符组成

排序算法

判断一个数组或序列是正序,倒序还是乱序,需要我们将这个数组完整的遍历一遍通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应的位置并插入的排序算法是( )

正确答案: C

选择排序
希尔排序
插入排序
归并排序

下面代码的输出是

const arr = [];
const testObj = {};
console.log(arr === "");
console.log(arr == "");
arr.toString = () => 1;
console.log(arr === 1);
console.log(arr == 1);
arr.valueOf = () => 2;
console.log(arr == 2);
arr.valueOf = () => testObj;
console.log(arr == testObj);

正确答案: A

false true false true true false
false false false true false false
false true false false true true
false true true true true false

下面代码的输出是

let a = 0;
const obj = {
    a: 1,
    b: function() {
    console.log(this.a);
    }
}
const obj1 = {
    a: 2
}
const fun = obj.b;
fun(); 
fun.apply(obj); 
fun.bind(obj1).apply(obj); 
const fun1 = fun.bind(obj1);
new fun(); 

正确答案: C

0 1 2 2
0 1 2 undefined
undefined 1 2 undefined
undefined 1 2 2

下面代码的输出是:

function func() {
    this.name = "Hellen";
}
console.log(typeof func.prototype);
func.prototype.getName = function() {
    console.log(this.name);
}
const Obj = {};
Obj.__proto__ = func.prototype;
func.call(Obj);
if (Obj.getName) {
    console.log("yes");
    Obj.getName();
}
console.log("end");

正确答案: C

function end
function yes Hellen end
object yes Hellen end
Object end

Funtion.prototype的原型链最终指向的哪?

正确答案: B

Funtion
Object
Null
Array

下面代码的输出是

function func(source) { 
    var target = {}; 
    for (var key in source) { 
        if (Object.prototype.hasOwnProperty.call(source, key)) {
             if (typeof source[key] === 'object') { 
                target[key] = func(source[key]); 
             } else { 
                target[key] = source[key]; 
             }
        } 
    } 
    return target; 
}
var a = { a1: "a1", a2: { b1: "b1", b2: "b2" }, a3: undefined, a4: null, a5: 1 };
var b = func(a); 
console.log(b);

正确答案: A

{a1: "a1", a2: {b1: "b1", b2: "b2"}, a3: undefined, a4: {}, a5: 1}
{a1: "a1", a2: {b1: "b1", b2: "b2"}, a3: null, a4: null, a5: 1}
{a1: "a1", a2: {b1: "b1", b2: "b2"}, a3: undefined, a4: undefined, a5: 1}
{a1: "a1", a2: {b1: "b1", b2: "b2"}, a3: undefined, a4: null, a5: 1}

计算面积的问题

<canvas width="250" height="250"></canvas>,

有个矩形长20px,高10px,css中width:250px,height:500px; 请问这个矩形渲染出来的面际是多少?

正确答案: C

200
300
400
800

下列布局在页面上的宽度比是多少?

// css
.flex {
display: flex;
width: 200px;
height: 100px;
}
.left {
flex: 3 0 50px;
background: red;
}
.right {
flex: 2 0 100px;
background: blue;
}
// html
<div class="flex">
    <div class="left"></div>
    <div class="right"></div>
</div>

正确答案: A

2:3
1:3
3:2
1:5

事件相关的编程题

如下图所示,请实现如下功能,当鼠标移到黑底客户服务区块后,出来白底卡片内容,鼠标移出后,卡片内容消失,并且当鼠标在白色部分上移动时白色框不能消失。

要求实现该功能完整的html、css及js代码

参考:三角形图标的样式为 trangle-down如下:

.triangle-down{
    width:0;
    height:0;
    border-left:5pxsolidtransparent;
    border-right:5pxsolidtransparent;
    border-top:5pxsolidblack;
}

参考答案:

<!DOCTYPE html>
<html>
<head>
    <title>任务-4</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
            width:100%;
        }
        #container{
            width:200px;
            height:200px;
            padding:20px;
            border:1px solid #666;
            margin:50px 0 0 50px;
        }
        #box{
            height:30px;
            line-height:30px;
            width:100%;
            background-color:black;
            color:white;
            text-align:center;
            width:120px;
            cursor:pointer;
            border-bottom:1px solid rgba(0,0,0,.2);
            position:relative;
        }
        .before{
            width:0;
            height:0;
            border-top:6px solid white;
            border-left:6px solid rgba(0,0,0,0);
            border-right:6px solid rgba(0,0,0,0);
            border-bottom:6px solid rgba(0,0,0,0);
            position:absolute;
            top:12px;
            right:10px;
            display:block;
        }
        .after{
            width:0;
            height:0;
            border-top:6px solid rgba(0,0,0,0);
            border-left:6px solid rgba(0,0,0,0);
            border-right:6px solid rgba(0,0,0,0);
            border-bottom:6px solid #f60;
            position:absolute;
            bottom:12px;
            right:10px;
            display:none;
        }
        .active{
            background-color:rgba(0,0,0,.1) !important;
            color:#f60 !important;
        }
        ul{
            list-style:none;
            width:80%;
            height:auto;
            background-color:rgba(0,0,0,.1);
            padding:6px;
            display:none;
        }
        ul li{
            height:25px;
            line-height:25px;
            margin-left:15px;
            font-size:14px;
            cursor:pointer;
            color:rgba(0,0,0,.5);
        }
        ul li:hover{
            color:black;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="box"><span class="before"></span>客户服务<span class="after"></span></div>
<ul>
    <li>> 联系客服</li>
    <li>> 帮助中心</li>
    <li>> 知识产权保护</li>
    <li>> 规则中心</li>
</ul>
    </div>
 
<script type="text/javascript">
    let oDiv = document.querySelector('#box');
    let oUl = document.querySelector('ul');
    let box_before = document.querySelector('.before');
    let box_after = document.querySelector('.after');
    oDiv.onmouseenter = function(){
        oUl.style.display = 'block';
        oDiv.className = 'active';
        box_before.style.display = 'none';
        box_after.style.display = 'block';
    }
    oUl.onmouseenter = function(){
        oUl.style.display = 'block';
        oDiv.className = 'active';
        box_before.style.display = 'none';
        box_after.style.display = 'block';
    }
    oDiv.onmouseleave = function(){
        oUl.style.display = 'none';
        oDiv.className = '';
        box_before.style.display = 'block';
        box_after.style.display = 'none';
    }
    oUl.onmouseleave = function(){
        oUl.style.display = 'none';
        oDiv.className = '';
        box_before.style.display = 'block';
        box_after.style.display = 'none';
    }
</script>
</body>
</html>

设计一个uniqueify函数,可以根据用户自定义的 重复判定规则 进行数组元素去重

举个例子:

//情况一:
letarr0 = [1,1,1,0,5,6];
uniqueify(arr0);
//输出:[1,0,5,6]
 
//情况二:
letarr1 = [
    {id: 1, name:'xx'},
    {id: 1, name:'xx'},
    {id: 2, name:'xx'},
    {id: 1, name:'xx'},
    {id: 1, name:'xx'}
];
uniqueify(arr1, a=>a.id);//假如这里的去重规则依据为id
//输出:
[
    {id: 1, name:'xx'},
    {id: 2, name:'xx'}
];
 
//情况三:
letarr2 = [
    {name:'xx',sex:'male'},
    {name:'xx',sex:'female'},
    {name:'xx',sex:'male'},
    {name:'aa',sex:'male'},
    {name:'aa',sex:'male'}
];
uniqueify(arr2, a=>(a.name+a.sex));//假如这里的去重规则依据为名字和性别均相同,才算是相同
//输出:
[
    {name:'xx',sex:'male'},
    {name:'xx',sex:'female'},
    {name:'aa',sex:'male'}
];

参考:

function uniqueify(arr, cb) {
  let newArr = [];
  if (!cb) {
    //cb 不存在, 直接数组去重
    newArr = [...new Set(arr)];
  } else {
    // cb存在
    let obj = {};
    arr.forEach(item => {
      if (!obj[cb(item)]) {
        obj[cb(item)] = item;
        newArr.push(item);
      }
    });
  }
 
  console.log(newArr);
}

小易给你一个包含n个数字的数组 a1,a2,...,a3。你可以对这个数组执行任意次以下交换操作:

对于数组中的两个下标i,j(1<=i,j<=n),如果a1+aj为奇数,就可以交换aiaj

现在允许你使用操作次数不限,小易希望你能求出在所有能通过若干次操作可以得到的数组中,字典序最小的一个是什么。

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


小易在维护数据的时候遇到一个需求,具体来说小易有一系列数据,这些数据了构成一个长度为n的数字序列,接下来小易会在这个序列上进行q次操作。

每次操作有一个查询的数字x,小易需要将序列数据中所有大于等于x的数字都减一,并输出在本次操作中有多少个数字被减一了。

小易犯了难,希望你能帮帮他。

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

小易学习了辗转相除法之后,就开始实践这个算法在求解最大公约数上。

牛牛给小易出了一道不同寻常的求解最大公约数: 求解a和b的最大公约数,但是a和b的范围特别大。

小易遇到了困难,向聪明的你寻求帮助,希望你能帮帮他。

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

小易给定了一个长度为n的数字序列,对于每一个 1<=k<=n,小易希望能求解出所有长度为k的连续子序列的最大值中的最小值。

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

参考

其它语言的网易(非前端)

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

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

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

关注我: Github / 知乎

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

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

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

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

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