牛客网收集的前端面试题（html+css+js部分）

Ber881

已于 2023-07-04 22:24:55 修改

阅读量185

点赞数 1

文章标签：前端 html css

于 2023-07-02 17:41:38 首次发布

本文链接：https://blog.csdn.net/qq_65995258/article/details/131500515

版权

1.什么是BFC？

BFC块级格式化上下文:它是一个独立的渲染区域，只有块级元素参与，它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

2.盒子模型？

盒子模型包括标准盒子和怪异盒子。

标准盒模型的宽高就是content的宽高，也就是说width、height设置的是content的宽高，剩下的三部分内容我们就可以根据需要去设置。

怪异盒模型宽高等于content+padding+border加在一起的宽高，当我们设定好宽高后，再设置padding跟border并不会像标准盒模型向外，而是会向内。怪异盒模型由box-sizing设置，当border-box为属性值时就是怪异盒模型，content-box就是标准盒模型。怪异盒模型margin等的设置规则时跟标准的是一样的。

相关链接：CSS详解——盒子模型 - 掘金 (juejin.cn)

3.数组扁平化和去重 ?

扁平化:toString+split,递归+isArray,float(infinity).....

去重:双重循环+splice,indexOf,new Set,lastindexOf....

4.统计一个字符串中出现次数最多的字符以及出现的次数？

str = '168sda68w4sdasdasdwwrdvxccvxc'
str = str.split('');
console.log(str);
var newStr = {};
// 数组去重 和计算出现的次数
str.forEach(function(item) {
    if (newStr[item]) {
        newStr[item]++;
    } else {
        newStr[item] = 1;
    }
})
var cha = ''; //存储字符
var max = 0; //存储次数
for (let j in newStr) {
    if (newStr[j] > max) {
        max = newStr[j]
        cha = j
    }
}
console.log('出现最多的字符是' + cha, '出现的次数是' + max + '次');

5.for.in 和 for.of的区别是什么？

for in遍历的是索引（即下标）

for of 遍历的是值（即元素）

//for in 应用于数组
Array.prototype.sayHello = function() {
    console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = [1, 2, 10, 30, 100];
myArray.name = '数组';

for (let index in myArray) {
    console.log(index);
}
//输出结果如下
0, 1, 2, 3, 4, name, str, sayHello

//for in  应用于对象中
Object.prototype.sayHello = function() {
    console.log('Hello');
}
Obeject.prototype.str = 'World';
var myObject = { name: 'zhangsan', age: 100 };

for (let index in myObject) {
    console.log(index);
}
//输出结果
name, age, str, sayHello
//首先输出的是对象的属性名，再是对象原型中的属性和方法，
//如果不想让其输出原型中的属性和方法，可以使用hasOwnProperty方法进行过滤
for (let index in myObject) {
    if (myObject.hasOwnProperty(index)) {
        console.log(index)
    }
}
//输出结果为
name, age
//你也可以用Object.keys()方法获取所有的自身可枚举属性组成的数组。
Object.keys(myObject)

//for of 应用于对象
Object.prototype.sayHello = function() {
    console.log('Hello');
}
var myObject = {
    name: 'zhangsan',
    age: 10
}

for (let key of myObject) {
    consoloe.log(key);
}
//输出结果myObject不可迭代
//在 JavaScript 中，Object 是不可迭代的，除非它们实现了迭代协议. 因此，你不能使用 for…of 来迭代对象的属性。
Array.prototype.sayHello = function() {
    console.log("Hello");
}
var myArray = [1, 200, 3, 400, 100];
for (let key of myArray) {
    console.log(key);
}
//输出结果1, 200, 3, 400, 100

总结：

for in遍历对象

for of遍历数组

5.js的数据类型？

string,number,boolean,null,undefined,symbol,bigint。

MDN:

6.微任务和宏任务？

通俗易懂：这次,十分钟把宏任务和微任务讲清楚 - 知乎 (zhihu.com)

7.js事件委托？

这次,十分钟把宏任务和微任务讲清楚 - 知乎 (zhihu.com) 内含拓展：事件冒泡

8.判断题

console.log(String('111') == new String('111')); //true
console.log(String('111') === new String('111')); //flase
console.log(typeof String('111'));
console.log(typeof new String('111'));

9.js的new，这个过程中发生了什么？

function myNew(Con, ...args) {
    // 创建一个新的空对象
    let obj = {};
    // 将这个空对象的__proto__指向构造函数的原型
    // obj.__proto__ = Con.prototype;
    Object.setPrototypeOf(obj, Con.prototype);
    // 将this指向空对象
    let res = Con.apply(obj, args);
    // 对构造函数返回值做判断，然后返回对应的值
    return res instanceof Object ? res : obj;
}