秋招前端笔面试题

  1. 内联元素浮动会变成内联块级元素
  2. const(ES6)声明的变量,如果是对象,就不能更改,但对象的属性可以更改,原因是存储在const声明的变量里是指向真正存储对象所在地方的指针,指针不能更改,但指针指向的对象可以更改。
  3. 回调函数:英文名callback,即先不调用、等满足一定条件后再调用的函数。
  4. var有变量声明提升(注意变量的初始化部分并不会提升)
  5. Promise对象代表一个异步操作的最终结果,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。Promise是一个构造函数,用来生成Promise对象。Promise 新建后就会立即执行。Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。then()有两个参数,都是回调函数。第一个回调函数,在Promise 状态为resolved(这里的resolved指fulfilled) 时执行,第二个在状态为rejected时执行。catch方法,相当于then(null,reject)的一个变体。then和catch都会返回一个新的Promise对象。then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行。then里不能指定resolve和reject。Promise 对象的错误会一直向后传递,直到被捕获为止,捕获并执行完catch后,后面的then还会接着执行(如果没报错则直接跳过catch去执行后面的then)。一般来说,不要在then方法里面定义 reject 状态的回调函数(即then的第二个参数),总是使用catch方法。

Promise.resolve方法允许调用时不带参数,直接返回一个resolved状态的 Promise 对象。立即resolve的 Promise 对象,是在本轮“事件循环”(event loop)的结束时,而不是在下一轮“事件循环”的开始时。比如,setTimeout(fn, 0)在下一轮“事件循环”开始时执行,Promise.resolve()在本轮“事件循环”结束时执行,console.log('one')则是立即执行。

  1. Promise的优点(作用)和缺点?

优点:

1)  将异步操作以同步操作的流程表达出来,避免了写层层嵌套的回调函数

2)  Promise对象提供了统一的接口,使得控制异步操作更加容易。

缺点:

1)  无法取消

2)  当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)

  1. 宏任务和微任务?

宏任务:script(全局任务/JS主代码块)、定时器(setTiemout和setInterval)、I/O、渲染等

微任务:Promise、MutationObserver(突变观察者)

当执行栈空了的时候,先执行一个宏任务,然后执行全部的微任务;宏任务和微任务的区别就是执行顺序的不同。

  1. 事件循环?

1)  所有同步任务都在主线程上执行(这个主线程就是JS线程),形成一个执行栈

2)  主线程之外,还存在一个任务队列,当异步任务有了结果,就在任务队列里放置一个任务(每一个任务都有一个与之关联的用于处理这条任务的函数)

3)  一旦执行栈(主线程)中的所有同步任务执行完毕,任务队列中的任务就进入执行栈(主线程)执行(优先级:Promise>DOM事件>定时器)

4)  主线程不断重复上述步骤,这就是事件循环

PS:

1)  浏览器多线程,JS线程是其中的一个,此外还有渲染线程、定时器线程、DOM事件线程、HTTP请求线程

2)  渲染线程和JS线程是互斥的,所以下载、解析、执行JS会阻塞页面渲染(

   

 

多益网络笔试

单选、填空题

  1. 以下代码打印c输出什么?undefined

var b = new Array(3);

var c = b.forEach(item => item +1);

  1. 以下代码打印c输出什么?[NaN, NaN, NaN]

var b = Array.apply(null, Array(3));

var c = b.map(item => item + 1);

  1. 以下代码,a[102]和a[66]分别是?undefined和3

var a = new Array(1024);

a[0102] = 3;

  1. 以下代码输出什么?'fun3'

function fun3() {

    console.log('fun3')

}

function fun2() {

    fun3();

}

function fun1() {

    fun2();

}

fun1();

  1. 输出?undefined, 1

var a = b = 1;

(function() {

    console.log(a + ", " + this.b);

    var a = 2;

})()

  1. 以下代码输出?ƒ a() {

console.log(3)

}

console.log(a);

var a = 1;

var a = function() {

    console.log(2)

}

function a() {

    console.log(3)

}

  1. 若var a = 0.3,哪个返回ture?(C)
    1. a == true
    2. parseFloat('0' + a, 8) !== 0.3
    3. !!~(a - a)
  2. JPG、PNG、SVG分别在什么场合用?

JPG:照片

PNG:需要透明背景时

SVG:数据可视化(因为可以用JavaScript操纵)

  1. 制作级联菜单功能时调用的是下拉列表框的(A)事件。
    1. onchange
    2. onfocus
    3. onselect
    4. onclick 
  2. JavaScript中 window 对象的子对象不包含以下那个对象(D)
    1. document
    2. history
    3. self
    4. message
  3. 哪个元素不能添加伪元素?(img)
    1. div
    2. a
    3. img

解析:在html里追加的伪元素是位于标签内的(国内很多网站的翻译是“在元素前/元素后追加伪元素”,是错的),所以不能内嵌元素的元素都不能添加伪元素。

简答题

  1. localStorage和sessionStorage是什么?localStorage怎么用?

localStorage和sessionStorage是Web Storage API,浏览器通过它在本地存储键值对。

localStorage用法:

1)    添加或更新数据项:localStorage.setItem('myCat','Tom');,

2)    读数据项:var cat = localStorage.getItem('myCat');,

3)    移除数据项:localStorage.removeItem('myCat');或localStorage.clear();,后者不接受参数,只是简单地清空域名对应的整个存储对象。

  1. 用CSS画等腰直角三角形

div {

    height: 0;

    width: 0;

    border-top: 100px solid transparent;

    border-right: 100px solid transparent;

    border-left: 100px solid transparent;

    border-bottom: 100px solid green;

}

PS:如果要画扇形,就再加个border-radius: 100px;

  1. 什么是伪数组?怎么把伪数组转化为数组?

有length属性的对象,可以用方括号并提供基于0的数字索引来访问成员,但没有数组的方法。

Array.prototype.slice.call()、Array.prototype.concat.call()、Array.from()都可以把伪数组转化为数组;前两者把Array.prototype换为[]或把call换成apply也行。

 

阿里笔试

  1. 错误的是(D)
    1. 设置display: none的元素会从DOM中移除
    2. 设置display: none的元素仍能获取它的width和height
    3. 设置display: none的元素的图片资源仍会加载
    4. 设置display: none不会触发repaint
    5. 设置display: none的元素的所有子代元素不可见
  2. 错误的是(B)
    1. postMessage可以跨域
    2. JSONP既可get也可以post
    3. 服务端设置cookie时,尽可能httponly
  3. 编程题:扁平化 const input = {

a: 1,

b: [ 1, 2, { c: true }, [ 3 ] ],

d: { e: 2, f: 3 },

g: null,

}

function flatten(input) {

    var ret = {};

    function f(input, previousItem) {

        for (var item in input) {

            if (input[item] === null || input[item] === undefined) {

 

            } else {

                if (typeof input[item] === 'object') {

                    if (Array.isArray(input[item])) {

                        f(input[item], previousItem + (previousItem ? '[' : '') + item + (previousItem ? ']' : ''));

                    } else {

                        if (Array.isArray(input)) {

                            f(input[item], previousItem + (previousItem ? '[' : '') + item + (previousItem ? ']' : ''));

                        } else {

                            f(input[item], previousItem + (previousItem ? '.' : '') + item);

                        }

                    }

                } else {

                    if (Array.isArray(input)) {

                        ret[previousItem + (previousItem ? '[' : '') + item + (previousItem ? ']' : '')] = input[item];

                    } else {

                        ret[previousItem + (previousItem ? '.' : '') + item] = input[item];

                    }

                }

            }

        }

    }

    f(input, '');

    return ret;

}

  1. JS有什么“缺陷”?新特性是如何解决这些缺陷的?如果没有解决,那你有解决办法吗?

1)    依赖全局变量,所有的编译单元都载入一个公共全局对象中,程序越大,全局变量越难管理。新特性的解决办法:ES6模块。

2)    没有块级作用域。新特性的解决办法:let,const。

3)    自动插入分号,有时它会不合时宜地插入分号。我的解决办法:不指望它,始终手动加分号。

4)    typeof null返回'object'。我的解决办法:用my_value === null来检测null。

5)    如果传入parseInt()的字符串第一个字符是0,那么该字符串会基于八进制而不是十进制来求值。我的解决办法:始终给parseInt()传入第二个参数。

6)    加法操作符的复杂行为是bug的常见来源。我的解决办法:做数学加法前确保两个运算数都是数字。

7)    0.1+0.2不等于0.3。我的解决办法:做浮点数的加法前先通过乘个10的n次方把浮点数变成整数,做完加法后再除以这个10的n次方。

8)    typeof NaN === 'number' 返回true,所以没有现成的函数来判断一个值是否能用来做数学运算。我的解决办法:判断typeof value === 'number' && isFinite(value)(这样还排除了Infinity)

9)    数组不是真正的数组,性能可能比真正的数组糟糕。

10)==和!=运算符会转换值的类型,而转换的规则又复杂又难记,==还缺乏传递性(0 == '0'且0 == ''但'0' != '')。我的解决办法:不用==和!=。

11)with语句。我的解决办法:不用它。

12)eval()函数、Function构造函数、接受字符串参数时的setTimeout()和setInterval(),降低性能、安全性。我的解决办法:不用它们。

13)可以访问基本包装类型Boolean、Number和String是完全没必要的。我的解决办法:不用它。

 

三七互娱笔试

  1. XHR对象的readyState属性可能的值有(5)个
  2. 由3个结点可以构造出多少种不同的二叉树?(5)
  3. OSI模型中,负责组织和同步不同主机上各种进程间通信的层次是(会话层)
  4. 下列关于进程与线程的描述,哪一项不正确(E)
    1. 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位。
    2. 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运行单位。
    3. 同一进程中的多个线程可以并发执行,同一个线程可以创建和撤销另一个线程。
    4. 同一进程中的多个线程将共享该进程中的全部系统资源,如虚拟地址空间、件描述符和信号处理等等。
    5. 线程有自己独立的地址空间
    6. w3c 制定的 javascript 标准事件模型,以下正确的顺序以及描述是(B)
      1. 事件捕获->事件冒泡
      2. 事件捕获->事件处理->事件冒泡
      3. 事件冒泡->事件处理
      4. 事件冒泡->事件处理->事件捕获
      5. 事件处理->事件捕获->事件冒泡
      6. 只要请求跨域,CORS预检查请求是一次HTTP OPTIONS请求(错)(只有复杂请求有预检查,而且复杂请求在第一次请求之后一定时间内,都不用做相同的预检查)
      7. Web Storage(即localStorage和sessionStorage)只能存储字符串类型的数据(对)
      8. 请求头里可以有Cookie(对)
      9. 用js实现一个函数,判断输入的IP地址字符串是否为有效的IP地址
      10. 编程题:杀bug

function Hero(str) {

    var o = {

        time: 0,

        kill: function (num) {

            if (this.time === 0) {

                console.log('Kill ' + num + (num > 1 ? ' bugs;' : ' bug;'));

            } else {

                setTimeout(() => {

                    console.log('Kill ' + num + (num > 1 ? ' bugs;' : ' bug;'));

                }, this.time);

                this.time = 0;

            }

            return this;

        },

        recover: function (num) {

            console.log('Recover ' + num + ' bloods;');

            return this;

        },

        sleep: function (num) {

            this.time = num * 1000;

            return this;

        }

    };

    console.log('Hi! This is ' + str + '!');

    return o;

}

 

虎牙笔试

  1. 下面描述中正确的为?(CD)
    1. 线性表的逻辑顺序与物理顺序总是一致的。
    2. 线性表的顺序存储表示优于链式存储表示。
    3. 线性表若采用链式存储表示时所有结点之间的存储单元地址可连续可不连续。
    4. 二维数组是其数组元素为线性表的线性表。
  2. 假设你只有 100Mb 的内存,需要对 1Gb 的数据进行排序,最合适的算法是? (A)
    1. 归并排序
    2. 插入排序
    3. 快速排序
  3. 以下代码在严格模式不会报错

for (var i = 0; i < 2; i++) {

 

}

  1. 用class、Promise和动态规划实现找钱机器
  2. 尽可能多地写出水平垂直居中一个定宽定高的div的方法

 

猫眼一面

  1. 7层协议是哪7层,HTTP、TCP、UDP、IP分别在哪一层?

应用层、表示层、会话层、运输层、网络层、数据链路层、物理层。HTTP在应用层,TCP、UDP在运输层,IP在网络层。

  1. 合并两个有序数组,使合并后的数组仍然有序。

function mergeArray(a, b) {

    var c = [],

        length1 = a.length,

        length2 = b.length;

    for (var i = 0, j = 0; i < length1 && j < length2;) {

        if (a[i] < b[j]) {

            c.push(a[i]);

            i++;

        } else {

            c.push(b[j]);

            j++;

        }

    }

    while (i < length1) {

        c.push(a[i]);

    }

    while (i < length1) {

        c.push(b[j]);

    }

    return c;           

}

  1. overflow清除浮动的原理:BFC

 

虎牙一面

  1. 判断数组?

1)  Array.isArray(obj)

2)  Object.prototype.toString.apply(obj) === '[object Array]'

3)  instanceof

  1. 如何扩展Array(添加Array的所有实例都能用的新方法)?
  2. 雪碧图?
  3. 使用动画的注意事项(优化)?

 

第四范式一面

  1. 用CSS画扇形

div {

    height: 0;

    width: 0;

    border-top: 100px solid transparent;

    border-right: 100px solid transparent;

    border-left: 100px solid yellow;

    border-bottom: 100px solid transparent;

    border-radius: 100px;

}

 

第四范式二面

  1. 编程:找出一段英文文章中所有重复出现的单词并统计其出现的次数

function f(str) {

    var arr = str.toLowerCase().slice(0, -1).split(/[\s,\.]+/),

        ret = {};

    for (var i = 0; i < arr.length; i++) {

        if (ret.hasOwnProperty(arr[i])) {

            ret[arr[i]]++;

        } else {

            ret[arr[i]] = 1

        }

    }

    for (var key in ret) {

        if (ret[key] === 1) {

            delete ret[key];

        }

    }

    return ret;

}

  1. 以下代码输出?3 3 1

var x = 1;

var objA = {

    x: 2,

    fn: function () {

        console.log(this.x);

    }

};

var objB = {

    x: 3,

    fn: objA.fn

}

objA.fn.call(objB);

objB.fn();

var fn = objB.fn;

fn();

  1. 以下代码输出?1 3和1 1

function fnA(options) {

    this.x = options.x;

}

fnA.prototype.y = 3;

fnA.prototype.print = function () {

    console.log(this.x, this.y);

}

var options = {

    x: 1,

    y: 2

}

var A1 = new fnA(options);

options.x = 3;

A1.print();

fnA.prototype.y = 1;

A1.print();

  1. 以下代码输出?1 1和1 3

var obj1 = {

    x: 1

};

var num1 = 1;

var array1 = [obj1, num1];

obj1 = {

    x: 2

};

num1 = 2;

console.log(array1[0].x, array1[1]);

var array2 = array1;

obj1.x = 3;

array1[1] = 3;

console.log(array2[0].x, array2[1]);

  1. 用两个栈实现一个队列?

var stack1 = [],

    stack2 = [];

function push(node)

{

    return stack1.push(node);

}

function unshift()

{

    if (stack2.length === 0) {

        while (stack1.length) {

            stack2.push(stack1.pop());

        }

    }

    return stack2.pop();

}

 

京东笔试

  1. 日期类转换到原始值(一大串数字那个)能使用什么方法:valueOf
  2. post的请求参数是放在request body中的(HTTP请求报文由请求行、请求头、空行、可选的请求体组成,HTTP响应报文由状态行、响应头、空行、可选的响应体组成)
  3. 注意单复数形式:getElementsByTagName()、getElementsByName()、getElementsByClassName()、getElementById()
  4. 霍夫曼树
  5. 已知一颗二叉树中没有重复值,知道这颗树的前序,中序和后序遍历中的哪些不可以唯一确定这颗二叉树:B(前序和后序只是反映了结点间的父子关系,没有反映出左右关系)
    1. 前序和中序
    2. 前序和后序
    3. 中序和后序
    4. 以上三种都可以唯一确定一颗二叉树
    5. 若串S='software',其子串的数目是:B(空串也是子串)
      1. 8
      2. 37
      3. 36
      4. 9

 

用友笔试

  1. 利用归并排序方法对数字序列:5,19,17,21,11,8,1进行排序,共需要进行( )次比较:11
  2. IPv6的地址长度:128
  3. Cookie和localStorage可以在同源的窗口共享,sessionStorage不可以
  4. Cookie数据始终在同源的HTTP请求中携带(即使不需要)
  5. var和let声明后未赋值,表现相同
  6. 如何隐藏一个DOM元素

1)  display: none

2)  visibility: hidden

3)  opacity: 0

4)  用定位把元素移动屏幕外

  1. BOM的核心对象是window(BOM以window对象为依托),document对象是window对象的一个属性
  2. 是内联元素
  3. 以下哪些方法不能创建新节点:D
    1. createElement
    2. createTextNode
    3. createAttribute
    4. createDocumentFragment

PS:特性(Attribute)虽然是节点,但不被认为是DOM文档树的一部分

  1. Ajax通过服务器端代理可以实现跨域
  2. Ajax的核心是通过XMLHttpRequest获取非本页内容

 

BIGO笔试

  1. 平均时间复杂度为O(n)的排序算法是:计数排序
  2. HTTP/1.1默认启用持久连接:对
  3. TCP/IP的四元组是:源IP地址、目的IP地址、源端口、目的端口
  4. OSI的7层:应用层、表示层、会话层、运输层、网络层、数据链路层、物理层
  5. 编程题:跳台阶

斐波那契

  1. Unicode、UTF-8、UTF-16、UTF-32的关系

Unicode对世界上大部分的文字系统进行了整理、编码,使得计算机可以用更为简单的方式来呈现和处理文字。 UTF-8、UTF-16、UTF-32是Unicode的 实现,它们之间的区别主要是表示一个字符的字节数不同

 

图森未来一面

  1. 响应式设计?

1)  用viewport元标签,一个典型的针对移动端优化的站点包含类似下面的内容:

width控制视口的宽度,可以像width=600这样设为确切的像素数,或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable(值yes 或no,若果设置为no,用户就不能缩放页面,默认值是yes)属性控制允许用户以怎样的方式放大或缩小页面。

2)  使用相对单位,比如百分比、em、rem、vw、vh

3)  使用浮动

4)  用媒体查询根据屏幕宽度选择不同的CSS(的media属性和CSS的@media规则)

5)  根据屏幕大小加载不同的图片(srcset、SVG(为不同分辨率屏幕提供不同分辨率的图片)和(为不同布局提供不同剪裁的图片))

  1. 如果打开一个页面很慢,怎么排查问题?

1)  打开多几个别的页面,看慢不慢,如果都慢,那可能就是网络的问题

2)  如果就这个页面慢,那就打开谷歌浏览器的开发者工具,查看network或performance的情况

3)  考虑缓存的设置合不合理

  1. 如果一个展示用的页面有10个视频,每个视频有100M,这么优化?

在用户点击播放视频之前,不要预加载视频。(把

  1. 如何找出海量数据(N)中的的最大K(<10000)个数

堆排序。把数据构造成一个最大堆,取出堆顶,把剩下的数据重新构造成一个最大堆,再取出堆顶,如此重复K次。

  1. jQuery对象转成DOM对象?

用下标或get方法

 

金山WPS笔试

  1. 以下代码输出:99 100

function f1() {

    var n = 99;

    nAdd = function() {

        n += 1;

    };

    function f2() {

        console.log(n);

    }

    return f2;

}

var result = f1();

result();

nAdd();

result();

  1. setAttribute设置的是HTML的attribute而不是CSS的property
  2. 用原生JS实现小火箭动画:旋转45°,10s匀速飞行500px。已知HTML结构:

var div = document.querySelector('div');

div.style.transition = '1s';

div.style.transform = 'rotate(0)';

setTimeout(function () {

    div.style.transform = 'rotate(45deg)';

    setTimeout(function () {

        div.style.transition = '10s';

        div.style.transform = 'translate(' + 500 / Math.SQRT2 + 'px,' + (- 500 / Math.SQRT2) + 'px) rotate(45deg)';

    }, 1500);               

}, 0);

PS:transition的初始和结束状态都要在JS里指定才能生效,而且结束状态要放在setTimeout里

 

宜信笔试

  1. 8瓶酒一瓶有毒,用人测试。每次测试结果8小时后才会得出,而你只有8个小时的时间。问最少需要()人测试?3
  2. 在含n个顶点和e条边的无向图的邻接矩阵中,零元素的个数为:n^2-2e

 

多益网络一面

  1. Less的缺点?

我不觉得它有什么缺点

  1. 你实习时做的是动态页面还是静态页面?

动态(因为有交互)

 

三七互娱一面

  1. (图片)实现按需加载?

没出现在视野中的图片的src属性用非常小的图片,把图片的真实路径保存在一个自定义属性中,用JS监听图片的位置,当图片出现在视野中时,就把src换成真实路径。

 

迅雷笔试

  1. 以下选项中不属于标准 HTTP 响应头属性的是:AD
    1. Cookie
    2. ETag
    3. Location
    4. Referer
    5. link与@import的区别:AB
      1. link属于HTML,@import属于CSS
      2. link不止能用来引入CSS(还能引入在线字体服务),@import只能用来引入CSS
      3. 在子路径可以访问访问到父路径的 Cookie,反过来就不行
      4. output的值?1

var x = 1;

var output = (function() {

    delete x;

    return x;

})();

解析:在window上直接定义的属性可以被delete删除,在全局作用域用var声明的变量不可以(虽然它也会变成window的属性)

  1. 输出?2

function foo() {

    let print;

    for (let i = 0; i < 3; i++) {

        if (i === 2) {

            print = function() {

                return i;

            };

        }

    }

console.log(print());

}

foo();

  1. 输出:css3

if (10 > 9 > 8 == true) {

    console.log('html5');

}else {

    console.log('css3');

}

 

搜狐笔试

  1. 在一根无限长的数轴上,你站在0的位置。终点在target的位置。每次你可以选择向左或向右移动。第 n 次移动(从 1 开始),可以走 n 步。返回到达终点需要的最小移动次数。

var reachNumber = function(target) {

    if (target < 0) {

        return reachNumber(-target);

    }

    for (var i = 0; (1 + i) * i / 2 < target; i++) {

       

    }

    if ((1 + i) * i / 2 === target) {

        return i;

    } else {

        if (((1 + i) * i / 2 - target) % 2 === 0) {

            return i;

        } else {

            if (i % 2 === 0)  {

                return i + 1;

            } else {

                return i + 2;

            }

        }

    }

};

 

搜狗笔试

  1. 将嵌套数组展平的办法(5种)?

1)  递归 + push + …/concat

function f(arr) {

    var res = [];

    for (var i = 0; i < arr.length; i++) {

        if (Array.isArray(arr[i])) {

              // res = res.concat(f(arr[i]));

            res.push(...f(arr[i]));

        } else {

            res.push(arr[i]);

        }

    }

    return res;

}

2)  递归 + reduce + concat

function f(arr) {

    return arr.reduce(function (acc, cur) {

        return acc.concat(Array.isArray(cur) ? f(cur) : cur);

    }, []);

}

3)  arr.toString().split(',')(针对数字数字)

 

  1. CSS的长度单位有:BC
    1. dm
    2. cm
    3. mm

 

欢聚时代笔试

  1. 回调函数的例子有?

1)  事件(包括Ajax)

2)  定时器

3)  Promise

  1. map、forEach、for循环的效率?

for循环优于forEach优于map

  1. parseInt(58, 8)返回?

5(58的8被无视掉了,因为是当作八进制数解析)

  1. 定义函数的方法有?

1)  函数声明

2)  函数表达式

3)  Function构造函数

 

百度笔试

  1. 编程:实现EventEmitter,有on、once、emit、off方法
  2. Math.ceil(-0.5) + Math.round(-0.5) - Math.floor(-0.5) + Math.abs(0.5)?

0 + 0 - (-1) + 0.5 = 1.5

  1. 编程:

function output(str) {

    var content = document.querySelector('.content');

    var blink = document.querySelector('.blink');

    while (content.children.length !== 1) {

        content.children[0].remove();

    }

    for (var i = 0; i < str.length; i++) {

        (function (i) {

            setTimeout(function () {

                if (str[i] === '\n') {

                    content.insertBefore(document.createElement('br'), blink);

                } else {

                    var span = document.createElement('span');

                    span.textContent = str[i];

                    span.className = 'word color' + Math.floor(Math.random() * 24);

                    content.insertBefore(span, blink);

                }

            }, 200 * (i + 1));

        })(i)

    }

}

output('hello world\n你好世界');

  1. 关于letter-spacing的说法正确的是:BC
    1. 可以不带单位
    2. 可以设为负值
    3. 可继承
    4. 对于链队,在进行删除操作时:D
      1. 仅修改头指针
      2. 仅修改尾指针
      3. 头、尾指针都要修改
      4. 头、尾指针可能都要修改
      5. 队列的队尾指针通常指向尾元素的下一个位置
      6. 插入大量DOM元素时,使用innerHTML比逐个构建元素效率高
      7. 处理列表子元素的点击事件时,使用事件代理效率更高
      8. Women.name、Men.name、a.name、b.name分别为?"yy3"、"Men"、undefined、"yy1"(函数的name属性返回的是函数名)

function Women(name) {

    this.name = name;

}

function Men(name) {

    this.name = 'yy1';

}

Object.defineProperty(Women, 'name', {

    configurable: true,

    enumerable: false,

    set: function() {

        name = 'yy2';

    },

    get: function() {

        return 'yy3'

    }

});

Women.prototype = new Men();

var a = new Women();

var b = new Men();

 

顺丰笔试

  1. 线性表是逻辑结构,它有两种存储结构:顺序表和链表。顺序表能随机访问,链表不能;顺序表插入、删除元素的平均时间复杂度是O(n),链表是O(1);顺序表需要事先估计存储空间,链表不需要。
  2. 2500B的UDP用户数据报能够一次穿透以太网?错,以太网数据字段的最大长度为1500B,而且IP数据报的首部至少为20B,所以UDP的最大长度不能超过1480B
  3. PING不通的可能原因?

1)  对方没有正常工作

2)  对方不理睬外界发送过来的这种报文

3)  没有连网

  1. 以下说法正确的是(ABCD)
    1. 跨网站脚本(Cross-site scripting,通常简称为XSS或跨站脚本或跨站脚本攻击)是一种网站应用程序的安全漏洞攻击,是代码注入的一种。 它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言
    2. CSRF是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法
    3. XSS跨站脚本攻击,主要是前端层面的,用户在输入层面插入攻击脚本,改变页面的显示,或窃取网站cookie
    4. CSRF跨站请求伪造,以你的名义,发送恶意请求获取相关信息
  2. 输出?undefined(在原型链上找属性找不到就返回undefined,在作用域链上找变量找不到就报错)

var user = {

    count: 1,

    get: function() {

        return this.count;

    }

}

var f = user.get;

console.log(f());

  1. 编程题:计算两个时间相差的小时数

function compare(t1, t2) {

    var t1 = new Date(t1);

    var t2 = new Date(t2);

    if (t1 == 'Invalid Date' || t2 == 'Invalid Date') {

        return 0;

    } else {

        var ret = Math.abs(t1 - t2) / 1000 / 60 / 60;

        var int = Math.floor(ret);

        var float = ret - int < 0.5 ? 0 : 0.5;

        return int + float;

    }

}

  1. 编程题:输入两个字符串(字符只可能是0到9、A到Z、a到z),输出一个字符串。要求:去掉出现过一次以上的字符,字符按ASCII码排序,然后和镜像字符串相连后再输出。

function compare(str, str1) {

    var s = str + str1;

    var a = s.split('');

    var o = {};

    a.forEach(function (item, index, a) {

        if (o[item]) {

            o[item]++;

        } else {

            o[item] = 1;

        }

    });

    a = a.filter(function (item, index, a) {

        return o[item] === 1 ? true : false;

    });

    a.sort();

    var a2 = a.slice().reverse();

    var s1 = a.join('');

    var s2 = a2.join('');

    return s1 + s2;

}

  1. 以下代码点击文字时是否会勾选复选框?是

 

网易游戏笔试

1.  768x1024分辨率的32位色彩的位图的存储空间:768*1024*32/8字节

2.  设有一个用数组Q[1..m]表示的环形队列,约定f为当前队头元素在数组中的位置,r为队尾元素的后一位置(按顺时针方向),若队列非空,则计算队列中元素个数的公式应为(A)

  1. (m+r-f)mod m
  2. r-f
  3. (m-r-f)mod m
  4. (m-r+f)mod m

3.  n个元素出栈多少种可能:f(n) = f(0)*f(n-1) + f(1)*f(n-2) + ... + f(n-1)*f(0),f(0)设为1

4.  Cookie是浏览器的概念,服务器不存储Cookie

  1. 访问器属性的getter函数([[Get]]特性)和setter函数([[Set]]特性)?

前者:在读取属性时调用,负责返回有效的值

后者:在写入属性时调用,并会把新值传进去

 

Shopee笔试

  1. 若一颗二叉树的前序遍历为a,e,b,d,c,后序遍历为b,c,d,e,a,则根节点的孩子节点:e
  2. Cookie的作用:弥补HTTP无状态的缺陷
  3. 以下那种结构,平均来讲获取任意一个指定值最快?(D)
    1. 二叉排序树
    2. 队列
    3. 哈希表
  4. 编程题:走格子

用组合

var line = readline();

var x = + line.split(' ')[0];

var y = + line.split(' ')[1];

var n = 1;

for (var i = x + y, j = 0; j < x; i--, j++) {

    n *= i;

}

var d = 1;

for (var i = x; i >= 1; i--) {

    d *= i;

}

console.log(n / d);

 

唯品会笔试

  1. 以下有关Http协议的描述中,正确的有? ABCD
    1. post请求一般用于修改服务器上的资源,对发送的消息数据量没有限制
    2. HTTP返回码301表示永久重定向,需要重新URI
    3. 可以通过206返回码实现断点续传
    4. HTTP/1.1实现了持久连接和管线化操作以及主动通知功能,相比http/1.0有大福性能提升

 

新浪笔试

  1. W3C是什么?它为什么对前端来说很重要?

W3C,World Wide Web Consortium,万维网联盟,HTML、CSS、DOM标准都是由它制定的。

  1. 怎么理解BFC?

Block Formatting Context,块级格式化上下文,包含创建它的元素的所有东西,它对浮动和清除浮动很重要。浮动和清除浮动只会应用在同一个BFC里的元素上。浮动不会影响别的BFC里的元素的布局,清除浮动只能清除同一个BFC中在它前面的元素的浮动。外边距塌陷也只会发生在同一个BFC中的块级元素之间。

  1. PWA?

Progressive Web Apps,渐进式Web应用

 

腾讯笔试

  1. 带环的单链表、双向循环链表,头指针、头节点(单链表可以没有头结点,但不能没有头指针,如果没有头结点,那头指针直接指向第一个结点;头结点的数据域可以不存任何信息,也可以存线性表长度之类的附加信息)
  2. 对于长度为n的线性表,下面给出的4种操作中,在顺序表上实现比在链表上实现效率更高的是哪一种? AD
    1. 输出线性表中第i个数据元素的值(1 ≤ i ≤ n)
    2. 交换线性表中第1个数据元素与第2个数据元素的值
    3. 依次输出线性表的n个数据元素
    4. 输出线性表中与给定值x相匹配的数据元素在线性表中的序号(顺序表可用二分查找)
  3. Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。

 

微众笔试

  1. 下面哪个不是HTML5 meta标签的属性?D

A. content

B. charset

C. http-equiv

D. scheme

  1. [attr$=val] : 选择attr属性的值以val结尾的元素(和正则表达式的$含义一样)
  2. 下面说法正确的是?A
    1. [,,].length为2
    2. ~(2 + '3')为-23(错,-24;~表示原值的负数再减一)
    3. const a = [3,5];

const f = (b,...a)=>a+b;

console.log(f(2));

输出'5'(错, 输出'2',因为[] + 2的结果是'2'([]会先调用toString()转为''),console.log(f(2, 1, 3))输出1,32'')

  1. 34e3 + 50为34e350(错,为34050)
  2. XHR的readyState在LOADING状态下的值为?3(DONE状态为4)
  3. [0, 0, 0].fill(3, 2, 4)返回?[0, 0, 3]

解析:fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

  1. 0.3 – 0.2 === 0.1返回?false,因为浮点数计算时会产生舍入误差的问题,这是使用那种数值格式导致的。
  2. 分析y、z、obj的最终结果?y约等于0.1,z不变,obj不变

let y = 0.3 - 0.2;

let z = 7;

let obj = {a: 10};

change(obj);

change(z);

function change(obj) {

    if (obj instanceof Object) {

        if (y === 0.1) {

            obj.a = 8;

        } else {

            obj = {t: 'mumble'};

        }

    } else {

        obj = 9;

    }

}

  1. 分析a、obj的最终结果?a不变,因为严格模式下,在外部访问不到eval()中创建的变量和函数;obj不变,因为在with语句的代码块内部,每个变量首先被认为是一个局部变量,而如果在局部环境中找不到该变量的定义,就会查询with语句关联的对象中是否有同名的属性,如果发现了同名属性,就以该对象属性的值作为变量的值(如果没发现,就继续找往外)。

var a = 2;

var obj = {

    b: 3

};

function foo(str) {

    'use strict';

    eval(str);

}

function boz(data, param) {

    with(data) {

        c = param;

    }

}

foo('var a = 4;');

if (obj.b < a) {

    boz(obj, true);

} else {

    boz(obj, false);

}

 

Shopee一面

  1. 输出?undefined

let test = {

    a: 1

};

Object.defineProperties(test, {

    b: {

        get: function() {

            return 1;

        }

    }

});

let my = JSON.parse(JSON.stringify(test));

console.log(my.b);

    解析:数据属性和访问器属性的[[Enumerable]]要为true,才能被这种方式复制

  1. for-in可以遍历数组吗?

可以,遍历的是数组的下标(也是按顺序的)

  1. V8是用什么语言写的?

V8那么快,肯定是用C++啦

 

网易游戏一面

  1. AMD和CMD的区别?

AMD推崇依赖前置,即在定义模块的时候就要声明其依赖的模块;

CMD推崇就近依赖,即只有在用到某个模块的时候再去require

  1. 虚拟DOM?

一次性更新大量的对DOM的操作,而不是每操作一次DOM就更新一次。

  1. 字体大小的响应式设计?

用vw或vh单位(vw,视口宽度的百分之一;vh,视口高度的百分之一)

  1. 有遇到过浏览器兼容问题吗?

没有

  1. 知道SASS吗?

CSS预处理器

  1. MVVM?

MVVM是一种软件架构模式,有助于将数据和视图分离。M,model,数据;V,view,视图,这两者通过VM,viewmodel关联起来,使view的变化能同步到model,model的变化能同步到view

  1. 实习时你们是怎么规划分支的?

不知道,我就把代码拉下来,然后开发,开发了一些了,就推上去。

 

用友二面

  1. 怎么让外部JS最后加载?

如果加载指的是下载JS文件,那只能通过把

你可能感兴趣的:(面试,前端,数据结构与算法)