2022-03-21 20:11 已编辑得物app_前端开发

关注

百度2021校招Web前端研发工程师笔试卷（第一批） ——笔试笔记

1、某主机的 IP 地址为 212.212.77.55，子网掩码为 255.255.252.0。若该主机向其所在子网发送广播分组，则目的地址可以是？ 212.212.79.255

由子网掩码可知前 22 位为子网号、后 10 位为主机号。IP 地址的第 3 个字节为 010011 01 ，后面2位是主机号，将主机号全置为 1，可得广播地址为 180.80.79.255

子网掩码252，即11111100，而后两位和第四部分是子网，而广播地址是子网号全为1，主网号不变。因此

212.212.77.55，即212.212.（100011-01）.55

广播号：212.212. 100011-11.255

即212.212.79.255

3、下列程序的运行结果是什么？ [“”, “ is ”, “ years old”] “Lydia” 21

function getPersonInfo (one, two, three) {
console.log(one)
console.log(two)
console.log(three)
}
const person = 'Lydia'
const age = 21
getPersonInfo `${person} is ${age} years old`

4、若数据元素序列 9，10，11，5，6，7，12，3，4是采用下列排序方法之一得到的第二趟升序排序后的结果，则该排序算法只能是？ 插入排序

5、下列程序的运行结果是什么？ 2

function addToList(item, list) {
return list.push(item)
}
const result = addToList("nowcoder", ["hello"])
console.log(result)

6、关于将 Promise.all 和 Promise.race 传入空数组的两段代码的输出结果说法正确的是：all 会被输出，而 race 不会被输出

Promise.all([]).then((res) => {
    console.log('all');
});
Promise.race([]).then((res) => {
    console.log('race');
});

Promise.all([ ])中，数组为空数组，则立即决议为成功执行resolve( )；

Promise.race([ ])中，数组为空数组，就不会执行，永远挂起

7、

filter返回一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

forEach对每个元素进行操作，对原数组造成影响，无返回值。

10、利用 sourcemap 定位线上 js 问题是必须掌握的技能，以下关于 sourcemap 文件说法不正确的是？在 chrome 渲染过程中，请求完 js 文件后会立即尝试请求对应的 sourcemap 文件并解析✖

利用 sourcemap 可以定位到具体的出错代码文件的行、列信息✔ ；sourcemap 文件通过记录列号的相对位置来提高性能✔ ；sourcemap 文件使用了 VLQ 编码做映射表✔

https://ruanyifeng.com/blog/2013/01/javascript_source_map.html

11、身在乙方的小明去甲方对一网站做渗透测试，甲方客户告诉小明，目标站点由wordpre***，请问下面操作最为合适的是？使用wpscan对网站进行扫描

12、如何仅获得下述值为3的DOM节点引用(不包含其他元素) ？ .ccc + li

相邻兄弟选择器+和~的区别：+会选取符合条件的一个元素进行获取（即3）

~会选取符合条条件的所有元素（即3和4）

13、下面哪个选项不能实现除第一个<li>标签外的<li>标签字体都为红色，即如下注释效果？

<ul class="word">
    <li class="text">1</li>       //字体为黑色
    <li class="text">2</li>       //字体为红色
    <li class="text">3</li>       //字体为红色
</ul>

14、关于html的canvas的绘制、缩放，下列说法正确的是？都不正确
图像绘制在canvas元素之外也可见✖ ；使用 drawImage方法绘制的图片可以用css3的tramsform:scale的属性实现缩放✖ ；默认情况下，canvas是一个可以获取焦点的元素✖

15、

1、min-height和height同时使用，谁大听谁的

2、max-height和height同时使用，谁小听谁的

3、height、min-heigth和max-height同时使用，分为以下情况

height > max-height > min-height 元素高度：max-height
height > min-height > max-height 元素高度：min-height
min-height > height > max-height 元素高度：min-height
min-height > max-height > height 元素高度：min-height
max-height > height > min-height 元素高度：height
max-height > min-height > height 元素高度：min-height

16、关于网络请求延迟增大的问题，以下哪些描述是正确的？使用tcpdump 抓包分析网络请求✔ ； 使用strace观察进程的网络系统调用✔ ； 使用Wireshark分析网络报文的收发情况✔

使用ping来测试 TCP 端口是不是可以正常连接✖ ping是网络层的，tcp是传输层的

17、对于以下代码分析

int test(int N)
{
    int i = 0;
    int cnt = 0;
    while (cnt<N)
    {
        i = i + 2;
        cnt = cnt + i;
    }
    return i;
}

以下选项最接近上面程序的时间复杂度是？

18、假设tempStr字符串长度为N(N足够大)，试分析以下算法平均时间复杂度和额外空间复杂度(传进来的tempStr不算额外的空间)最接近为多少?

private boolean isPalindrome(String tempStr){
        int len=tempStr.length();
        if (len==1) return true;
        for (int i=0,j=len-1;i<tempStr.length()/2;i++,j--){
            if (tempStr.charAt(i)!=tempStr.charAt(j)){
                return false;
            }
        }
        return true;
}

O(N)，O(1)

19、下面可以按照从小到大顺序排列显示磁盘中各个分区利用率的命令是

df | grep -o "\<[0-9]*%.*" -o | sort -n

df（disk free）查看文件系统磁盘使用情况
20、生产者与消费者模型是一个非常经典的同步与互斥问题，如下伪码实现了简单的消费者的功能(生产者的功能是往队列里面添加元素，消费者的功能是从队列里面取元素)

void consumption() {
    while(____){
         ____;
    }
    P(mutex);
    往队列里面取一个元素;
    V(mutex);
    ————————;
}

里面的P,V就是指PV操作，mutex是互斥信号量；现有如下方法：

isFull() : 表示队列元素满了

isEmpty(): 表示队列元素为空

m_notFull.wait(): 阻塞当前进程，直到队列元素不满

m_notFull.notify(): 队列元素不满了，唤醒某个进程

m_notEmpty.wait()：阻塞当前进程，直到队列元素不为空

m_notEmpty.notify():队列元素不为空了，唤醒某个进程

请你按选好方法，填到上面空行，完成消费者的功能

isEmpty()， m_notEmpty.wait()， m_notFull.notify()

21、牛牛管理这一片牧场，在这片牧场中，一共有 $\mathit n$ 头奶牛，为方便统计，它们排成了一排，编号为 $\text 1$ ~ $\mathit n$ 。

现在质检员牛妹在检测这些奶牛的质量，她列出了 $\mathit m$ 条特性，只有满足所有特性的奶牛才可称之为优质奶牛。

但是，牛牛现在只知道对于某条特性，某几段连续区间内的奶牛是满足条件的，如果这样依次排查，会浪费很多时间。由于牛妹时间很急，马上要赶往下一个牧场，所以，牛牛请你帮助他筛选优质奶牛。

let t  = parseInt(readline());
while (t) {
  const arr = [];
  let n, m;
  const line1 = readline();
  n = parseInt(line1.split(' ')[0]);
  m = parseInt(line1.split(' ')[1]);
  let cur = m;
  while (cur) {
    let k = parseInt(readline());
    let tempArr = (new Array(n+1)).fill(0);
    while (k) {
      const line2 = readline();
      const left = parseInt(line2.split(' ')[0]);
      const right = parseInt(line2.split(' ')[1]);
      for (let i = left; i <= right; i++) {
        tempArr[i] = 1;
      }
      k--;
    }
    arr.push(tempArr);
    cur--;
  }
  const res = [];
  for (let i = 1; i <= n; i++) {
    let flag = 1;
    for (let j = 0; j < m; j++) {
      if (arr[j][i] == 0) {
        flag = 0;
      }
    }
    if (flag) {
      res.push(i);
    }
  }
  print(res.length);
  print(res.join(' '));
  t--;
}

22、
本题展示了一个分页组件，界面中存在id=jsContainer的节点A，系统会随机实例化各种Pagination实例，请按照如下要求补充完成Pagination函数。
1、最多连续显示5页，居中高亮显示current页（如demo1所示)
2、total <= 1 时，隐藏该组件（如demo2所示）
3、如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素（如demo3所示）
4、当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)
5、total、current均为正整数，1 <= current <= total
6、当前界面中，节点A为系统执行 new Pagination(节点A，20, 10) 后的展示效果
7、请不要手动修改html和css
8、不要使用第三方插件

function Pagination(container, total, current) {
    this.total = total;
    this.current = current;
    this.html = html;
    this.val = val;
    this.el = document.querySelector('.pagination'); //TODO: 创建分页组件根节点
    if (!this.el) return;

    this.el.innerHTML = this.html();
    container.appendChild(this.el);
    //返回高亮的结果
    this.val();
    if (this.total <= 1) {
        this.el.className = 'hide'; //TODO: 判断是否需要隐藏当前元素
    }


    function html() {
        //1.如果总页数小于等于1，不需要填充字符串
        if (this.total <= 1) return '';

        //TODO: 生成组件的内部html字符串
        var inHtml = '';
        //2.如果总页数在2-5页，只需显示页数，不用显示首页和末页
        if (this.total <= 5) {
            //范围会在1 ~ this.total
            for (var i = 1; i <= this.total; i++) {
                if (i == this.current) {
                    inHtml += '<li class="current">' + i + '</li>'
                } else {
                    inHtml += '<li>' + i + '</li>'
                }
            }
        } else {
            //3.如果总页数在6页以上
            /*** 3.1 高亮页小于等于5 ***/
            if (this.current <= 5) {
                /*** 3.1.1 高亮页+2 <= 5,不需要换页 ***/
                //此种情况不会出现首页
                if (this.current + 2 <= 5) {
                    //范围会在1 ~ 5
                    for (var i = 1; i <= 5; i++) {
                        if (i == this.current) {
                            inHtml += '<li class="current">' + i + '</li>'
                        } else {
                            inHtml += '<li>' + i + '</li>'
                        }
                    }

                } else {
                    /*** 3.1.2 高亮页+2 > 5,需要换页 ***/
                    //此种情况需要首页
                    inHtml += '<li>首页</li>'
                    //保持高亮页前后各有2页
                    for (var i = this.current - 2; i <= this.current + 2; i++) {
                        if (i == this.current) {
                            inHtml += '<li class="current">' + i + '</li>'
                        } else {
                            inHtml += '<li>' + i + '</li>'
                        }
                    }
                }
                //最后加上末页
                inHtml += '<li>末页</li>'
            } else {
                /** 3.2 高亮页大于5 ***/
                /*** 3.2.1 高亮页满足前后都各有两页 ***/
                //此种情况肯定会有首页
                inHtml += '<li>首页</li>'
                //保持高亮页前后各有2页
                if (this.current + 2 <= this.total) {
                    for (var i = this.current - 2; i <= this.current + 2; i++) {
                        if (i == this.current) {
                            inHtml += '<li class="current">' + i + '</li>'
                        } else {
                            inHtml += '<li>' + i + '</li>'
                        }
                    }
                } else {
                    /*** 3.2.2 高亮页不满足前后都各有两页 ***/
                    //范围在 (this.total - 4) ~ this.total
                    // 因为this.current + 2 > this.total,要么高亮页是末页，要么高亮页后一页是末页，而首页与末页相差4
                    for (var i = this.total - 4; i <= this.total; i++) {
                        if (i == this.current) {
                            inHtml += '<li class="current">' + i + '</li>'
                        } else {
                            inHtml += '<li>' + i + '</li>'
                        }
                    }
                }
                //判断是否需要加上末页
                if (this.current+2 < this.total) {
                    inHtml += '<li>末页</li>'
                }

            }

        }
        return inHtml;
    }

    function val(current) {
        if (arguments.length === 0) return this.current;
        if (current < 1 || current > this.total || current === this.current) return;
        this.current = current;
        this.el.innerHTML = this.html();
    };
}

function Pagination(container, total, current) {
    this.total = total;
    this.current = current;
    this.html = html;
    this.val = val;
    this.el = document.createElement('ul'); //TODO: 创建分页组件根节点
    if (!this.el) return;
    console.log(this.el);

    this.el.innerHTML = this.html();
    container.appendChild(this.el);
    if (this.total <= 1){
        this.el.className = 'pagination hide'; //TODO: 判断是否需要隐藏当前元素
    } else{
        this.el.className = 'pagination';
    }

    function html() {
        // 2、total <= 1 时，隐藏该组件
        if (this.total <= 1) return '';
        var htmlstr = '';
        // 3、如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素
        if (this.total <= 5 && this.total>1){
            for(var i=1;i<=this.total;i++){
                this.current==i?htmlstr += `<li class="current">${i}</li>` : htmlstr += `<li>${i}</li>`;   
            }
        }else{
            // 最多连续显示5页，居中高亮显示current页
            if(this.current-2<=1){ 
                for(var i=1;i<=5;i++){
                    this.current==i?htmlstr += `<li class="current">${i}</li>` : htmlstr += `<li>${i}</li>`;   
                }
                htmlstr = htmlstr + '<li>末页</li>';
            }else if(this.current+2>=this.total){
                for(var i=this.total-4;i<=this.total;i++){
                    this.current==i?htmlstr += `<li class="current">${i}</li>` : htmlstr += `<li>${i}</li>`;   
                }
                htmlstr = '<li>首页</li>' + htmlstr;
            }else{
                for(var i=this.current-2;i<=this.current+2;i++){
                    this.current==i?htmlstr += `<li class="current">${i}</li>` : htmlstr += `<li>${i}</li>`;   
                }
                htmlstr = '<li>首页</li>' + htmlstr + '<li>末页</li>';
            }
        }
        //TODO: 生成组件的内部html字符串
        return htmlstr;
    }

    function val(current) {
        if (arguments.length === 0) return this.current;
        if (current < 1 || current > this.total || current === this.current) return;
        this.current = current;
        this.el.innerHTML = this.html();
    };
}