多益网络校招 —— web前端笔试题

11月19号宣讲会现场笔试

一、选择题

1、以下表达式哪一个可以产生0-7之间(含0,7)的随机数？

A Math.ceil(Math.random()*7)
B Math.floor(Math.random()*7)
C Math.floor(Math.random()*8)
D Math.ceil(Math.random()*8)
/* 
	Math.ceil是向上取整， Math.floor是向下取整
	A [1, 7]    B [0, 6]    C [0, 7]    D [1, 8]
*/

2、以下代码输出的内容是：

const shape = {
    radius: 10,
    diameter() {
        return this.radius * 2
    },
    perimeter: () => 2 * Math.PI * this.radius
};
console.log(shape.diameter()); // 20
console.log(shape.perimeter()); // NAN

A 20 和 62.83185307179586
B 20 和 NAN
C 20 和 63
D NAN 和 63

3、关于ES6中Symbol说法错误的是

(我选了D，不知道答案对不对emmmm)

A Symbol是值类型而非引用类型
B Symbol('a') !== Symbol('a')
C Symbol.iterator能够使对象可迭代
D Symbol.hasInstance用于类的非静态方法

4、RGBA颜色值中A的含义是：

A 透明度      B 深浅度    C 不透明度    D 过渡时间
/*
	rgba => rgba(red, green, blue, alpha)
	Alpha值代表颜色的透明度/不透明度
*/

5、在JavaScript中的什么方法可以对数组元素进行排序 ( C )

A add()    B join()    C sort()    D length()

6、在HTML页面中，下面有关得到document对象的描述错误的是 ( C )

A Document对象用于检查和修改HTML元素和文档中的文本
B Document对象用于检索浏览器窗口中的HTML文档的信息
C Document对象提供客户最近访问的URL的列表
D Document对象的location属性包含有关当前URL的信息

二、填空题

1、一个没有经过任何css修饰的html文件，1rem等于多少px？

1rem等于html根元素设定的font-size的px值

如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算

2、input标签的onblur事件会在什么时候触发？

失去焦点时触发

3、以下代码输出的分别是：

报错：b is not a function、

报错：Cannot access ‘d’ before initialization

3

1、
var b;
(function a() {
	let d = '2'
    b();
    b = function() {
        console.log(d);
        let d = 3
    }
})();
2、
var b;
(function a() {
	let d = '2'
    b = function() {
        console.log(d);
        let d = 3
    }
})();
b();
3、
var a = 3;
function b() {
	console.log(a)
}
function c() {
	var a = 3;
    b();
}
c();

4、以下代码输出的分别是：undefined 5

let a = 10;
let obj = {
	a: 5,
    say: function() {
		console.log(this.a)
    }
}
let func = obj.say
let func2 = obj.say.bind(obj)
func() // undefined
func2() // 5

5、以下代码输出的分别是： 0 1

var a = 0;
(function() {
    var a = { a : 0 };
    var b = function() {
        setTimeout(() => {
            console.log(this.a)
        })
    }
    b(); // 0
    b.call(a); // 1
    a.a = 1;
    a = { a : 2 }
})()

6、根据下面代码，写出对应输出的内容

alert(a);        结果：function() { alert(10) }
a();			 结果：10
var a = 3;
function a() {
    alert(10)
}
alert(a)		 结果：3
a = 6;
a();			 结果：报错：a is not a function

三、问答题

1、实现不使用border画出1px高的线框，并且能够在不同浏览器的标准模式与怪异模式下保持一致

2、翻译

翻译应该是从某个vue route英文文档中找出来的

3、清除浮动的方法及其应用场景

4、控制台输出的内容是什么，并说明原因

(function test() {
    setTimeout(function() {
        console.log(4)
    }, 0);
    new Promise(function excutor(resolve) {
        console.log(1)
        for(var i = 0; i < 10000; i++) {
            i == 9999 && resolve()
        }
        console.log(2)
    }).then(function() {
        console.log(5)
    })
    console.log(3)
})()

输出：1 2 3 5 4

5、问有哪些键可能会是最后一个被插入hash table中，并说明理由

6、js引擎执行0.1+0.2==0.3返回false，为什么？请给出解决办法

在JavaScript中，0.1 + 0.2 = 0.3000000000000000444089209850062616169452667236328125000000000000，0.1 + 0.2 - 0.3 = 5.551115123125783e-17

造成这个问题主要是因为十进制与二进制在转换中出现精度问题：

0.1 => 0.1000000000000000055511151231257827021181583404541015625000000000
0.2 => 0.2000000000000000111022302462515654042363166809082031250000000000
0.3 => 0.2999999999999999888977697537484345957636833190917968750000000000

解决的方法：

利用es6在Number对象上新增的一个极小常量Number.EPSILON，其值等于2的-52次方，即Number.EPSILON === Math.pow(2, -52)，Number.EPSILON是JavaScript能够表示的最小精度，误差如果小于这个值，就可以认为不存在误差了。 引入一个这么小的量的目的，是为浮点数计算，设置一个误差范围，如果误差在这个范围内，我们就认为不存在误差。

0.1 + 0.2 - 0.3 = 0.000000000000000055511151231257827021181583404541015625，我们可以设置一个误差范围，使得0.1 + 0.2 - 0.3的误差结果落在我们设置好的误差范围内：

// 将误差范围限制在2的50次方之内Number.EPSILON * Math.pow(2, 2)
0.000000000000000055511151231257827021181583404541015625 < Number.EPSILON * Math.pow(2, 2) // true

function withinErrorMargin (left, right) {
  return Math.abs(left - right) < Number.EPSILON * Math.pow(2, 2);
}
0.1 + 0.2 === 0.3 // false
withinErrorMargin(0.1 + 0.2, 0.3) // true

7、谈谈你对css modules的理解，以及它与css scoped的差异

四、编程题

1、js用归并排序实现数组sort方法

// 方法1
function merge(left, right) {
    let arr = []
    // 如果任何一个数组为空，就退出循环
    while (left.length && right.length) {
        // 从左右子数组的最小元素中选择较小的元素
        if (left[0] < right[0]) {
            arr.push(left.shift()) 
        } else {
            arr.push(right.shift())
        }
    }
    // 连接剩余的元素，防止没有把两个数组遍历完整
    return [ ...arr, ...left, ...right ]
}

function mergeSort(array) {
    const half = array.length / 2
    if(array.length < 2){
        return array
    }
    const left = array.splice(0, half)
    return merge(mergeSort(left),mergeSort(array))
}
console.log(mergeSort([4, 8, 7, 2, 11, 1, 3])) // [1, 2, 3, 4, 7, 8, 11]

// 方法2
function sort(arr) {
    if(arr.length <= 1) return arr;
    var targetIndex = Math.floor(arr.length / 2);
    var target = arr.splice(targetIndex, 1)[0];
    var left = [];
    var right = [];
    for(let i = 0; i < arr.length; i++) {
        if(target < arr[i]) {
            right.push(arr[i])
        } else {
            left.push(arr[i])
        }
    }
    return sort(left).concat([target], sort(right))
}
console.log(mergeSort([4, 8, 7, 2, 11, 1, 3])) // [1, 2, 3, 4, 7, 8, 11]

2、给定一个数组nums，还有一个目标数target，实现一个函数twoSum，从数组中找出两个数字，使得其和为target。（返回结果为数组，包含两个数字在nums中的index，要求时间复杂度尽量低）

如：

nums = [2, 7, 11, 15]
target = 9
twoSum(nums, target) = [0, 1]

// 笔试时时间所剩不多，没考虑时间复杂度(心情复杂)
function twoSum(arr, target) {
    if(arr.length <= 1) return;
    if(arr.length === 2) return arr[0] + arr[1] === target ? [0, 1] : ''
    for(let i = 0; i < arr.length - 1; i++) {
        if(arr[i] >= target) continue;
        for(let j = i + 1; j < arr.length; j++) {
            if(arr[i] + arr[j] === target) {
                return [i, j]
            }
        }
    }
    return ''
}