web前端笔试题练习-1

大熙哥 2021年08月12日 125次浏览

一、选择题

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)
/* 
A [1, 7]    B [0, 6]    C [0, 7]    D [1, 8]
*/

Math.ceil向上取整,Mathfloor向下取整

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

可以看到shape里面有成员变量radius、方法diameter、perimeter,而diameter会进行return,所以有返回值。而perimeter则无返回值,如果执行顺序相反则会影响diameter的返回结果。

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

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

选D,经过查询,hasInstance是静态方法。
相关链接

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

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

以前在前端经常使用,却没发觉原来这个叫RGBA。

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的信息

window 和 document 中都有一个 location 属性,都是 Location 对象他们两个的关系是:完全一模一样。

History对象表示窗口的浏览历史,由Window对象的history属性引用该窗口的History对象。
History对象相当于一个容器,它存储了客户端最近访问网页URL的列表信息。

二、填空题

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

rem就是根据根元素设置的字体大小进行放大缩小调节。
默认浏览器设置的根元素字体大小是16px。
1rem = 16px。

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

失去焦点的时候。

复习知识点:

onfocus 当input 获取到焦点时触发
onblur 失去焦点
onchange 当input失去焦点并且它的value值发生变化时触发
onkeydown按下按键时的事件触发
onkeyup 当按键抬起的时候触发的事件
onclick 点击事件
onselect 文本选中
oninput 正在输入

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

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

/*
b is not a function
*/

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

/*
Cannot access 'd' before initialization
*/

3、
var a = 3;
function b() {
	console.log(a)
}
function c() {
	var a = 3;
    b();
}
c();

/*
3
*/

4、以下代码输出的分别是?

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 }
})()

此题
考了作用域,function的作用域默认是window,除非使用了箭头函数,那么箭头函数的this作用域则是其父级的。
考了event loop,显然setTimeout是宏服务,按照顺序在全部主代码走完后才会执行宏服务。
考了call改变了函数的作用域,可以看到把this的作用域更改为a属性。
此后对a的属性进行改变是可以影响到b的作用域,因为还是那个对象,对象引用的问题。
但是后面对a进行新对象赋值则会把原先a的对象引用改变,无法作用到已经call的对象。

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

此处使用let声明,将不会把变量存在window对象中,上面提到了function的this的作用域默认是window对象,显然没办法找到a对象,所以输出 undefined。
在使用了bind 绑定了obj对象,而obj对象里面有个a属性是5,则可以进行输出5。需要注意的是bind是绑定作用域和call、apply其实是差不多,但是call、apply是立即执行,而bind则是绑定并未执行函数,需要主动调用才能才行。

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

alert(a);
a();
var a = 3;
function a() {
    alert(10)
}
alert(a)
a = 6;
a();

alert 会把整个function代码进行提示。
通过function定义函数,函数体会提前声明。
alert 10
alert 3
a is not a function

思考:

为什么 a 函数能够执行,主要是因为通过function定义函数,函数体会提前声明。而var也会变量提升呀?可是var变量提升只是声明了var a; 这样的变量,并未做赋值,赋值仍在本地也就是对应的代码行。所以在a=3的代码行之后,a就不是一个函数了。

三、问答题

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

<div style="background-color:black;width:100%;height:1px;margin:0;padding:0;"></div>

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

使用了浮动布局后父级元素的高度会塌缩,为了解决这个问题需要清除浮动。
在浮动布局元素下定义div使其样式为clear:both;则是全部浮动清除。
定义父级元素的样式为overflow:auto,使其成为BFC块。
父级div定义 height,笨办法。
使用after伪元素使其为clear:both;和第一种方法其实是一致的。

3、控制台输出的内容是什么,并说明原因?

(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)
})()

显然这题考的是event loop了。
此时脑海中想到代码的优先级。
主程序代码 = 同步服务(同步情况下,就是严格按照定义的先后顺序) > 微服务 > 宏服务
setTimeout是宏服务
promise的构造方法是同步服务,使用Promise过程中resolve或reject后,后面代码还会执行。(踩坑)
不过回想自己手撸promise也想到了resolve只是调用了方法并不会终止当前代码的执行。
then的代码是微服务。
答案是:
1
2
3
5
4

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

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

造成这个问题主要是因为十进制与二进制在转换中出现精度问题。
利用es6在Number对象新增的极小常量Number.EPSILON
使用这个常量设置一个误差范围,如果小于这个误差则返回相等。

5、CSS Modules 与 scoped 的不一样?

CSS 的作用域表现。
他们都可以在。当前vue文件中写的样式生成独一无二的名字。

Vue文件的scoped 属性是样式仅适用于当前组件的元素,从而使组件之间的样式不污染,原理是在样式和class加上hash值进行区分。

Vue文件的module 属性是直接替换换了类名。基于文件名和类名生成的标识符进行替换。

module性能更好。

四、编程题

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

let data =[1,1,4,5,1,4,1,9,1,9,8,1,0]
 console.log(mergeSort(data))

function mergeSort(data) {
    if(data.length < 2) {
        return data
    }
    let mid = Math.floor(data.length / 2)
    let left = data.slice(0, mid)
    let right = data.slice(mid)
    return merge(mergeSort(left), mergeSort(right))

    function merge(left, right) {
        let result = []
        while (left.length && right.length) {
            if(left[0] <= right[0]) {
                result.push(left.shift())
            }else{
                result.push(right.shift())
            }
        }
        while (left.length) {
            result.push(left.shift())
        }
        while (right.length) {
            result.push(right.shift())
        }
        return result
    }
}

2、给定一个数组nums,还有一个目标数target,实现一个函数twoSum,从数组中找出两个数字,使得其和为target。(返回结果为数组,包含两个数字在nums中的index)

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

let nums = [2,3,4,5,1,7,6]
let target = 12

function twoSum(target) {
    nums.forEach((element, index) => {
        let first = element
        let second = target - first
        nums.forEach((element2, index2) => {
            if(element2 == second) {
                console.log([index, index2])
                return
            }
        })
    });
}
twoSum(target)