【面试题】前端开发博客微信群一周面试题汇总

1.清除浮动

已知浮动是元素脱离了普通文档流；如果当前空间允许，则其后的元素会向上提升至与其平起平坐。 然而，浮动有一个明显的缺陷：包围浮动的父元素会产生高度坍塌。 那么，如何清除浮动？请尽可能的写出清除浮动的多种方式，并说明哪一种最合适？

①.为父元素添加overflow: hidden或overflow: auto。

强制父元素包裹浮动元素，父容器形成了BFC（块级格式化上下文）。

<section class="wrap">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550750988751&di=62a1a86adc35c6a0c83d309aba1806ac&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Fface%2F18ce9edfe5a36ea16a1817b616e728a23d170e27.jpg">
<p>这是一只猫</p>
</section>

.wrap{
overflow: hidden;
/* overflow: auto; */
}
section{
border: 1px solid blue;
margin: 0 0 10px 0;
}
img{
float: left;
}
p{
margin:0;
font-size:1em;
}

②.浮动父元素float:left

<section class="wrap">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550750988751&di=62a1a86adc35c6a0c83d309aba1806ac&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Fface%2F18ce9edfe5a36ea16a1817b616e728a23d170e27.jpg">
<p>这是一只猫</p>
</section>

.wrap{
float: left;
}
section{
border: 1px solid blue;
margin: 0 0 10px 0;
}
img{
float: left;
}
p{
margin:0;
font-size:1em;
}

③.在父元素末尾添加非浮动块级元素

<section class="wrap">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550750988751&di=62a1a86adc35c6a0c83d309aba1806ac&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Fface%2F18ce9edfe5a36ea16a1817b616e728a23d170e27.jpg">
<p>这是一只猫</p>
<div class="clear_left"></div>
</section>

.clear_left{
clear: left;
}
section{
border: 1px solid blue;
margin: 0 0 10px 0;
}
img{
float: left;
}
p{
margin:0;
font-size:1em;
}

④.为父元素添加一个清除浮动的类

<section class="clearfix">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550750988751&di=62a1a86adc35c6a0c83d309aba1806ac&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Fface%2F18ce9edfe5a36ea16a1817b616e728a23d170e27.jpg">
<p>这是一只猫</p>
</section>

.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
section{
border: 1px solid blue;
margin: 0 0 10px 0;
}
img{
float: left;
}
p{
margin:0;
font-size:1em;
}

⑤.没有父元素如何清除浮动

给一个浮动元素应用 clear:both，强迫它定位在前一个浮动元素下方。

<img  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550750988751&di=62a1a86adc35c6a0c83d309aba1806ac&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Fface%2F18ce9edfe5a36ea16a1817b616e728a23d170e27.jpg">
<img class="clear"  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550750988751&di=62a1a86adc35c6a0c83d309aba1806ac&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Fface%2F18ce9edfe5a36ea16a1817b616e728a23d170e27.jpg">

img{
float: left;
}
.clear{
clear:both
}

总结： 方式1会形成块级格式化上下文，不会影响外部元素，亦不受外部元素影响。 方式1和方式4都不必添加多余的元素，此2种方式最常用。

2.求一个数组所有波峰位置和波峰峰值？

前端开发博客微信群一周面试题汇总20190301

/**
求一个数组所有波峰位置和波峰峰值？
pos: 保存波峰元素所在下标数组
peaks: 保存波峰元素值的数组
例如：
var arr = [3, 2, 3, 6, 4, 1, 2, 3, 2, 1, 2, 3]
pickPeaks(arr) // {pos: [3, 7], peaks: [6, 3]}
pickPeaks([]) // {pos: [], peaks: []}
*/
function pickPeaks(arr){
const pos = []
const peaks = []
for (let i = 1; i < arr.length - 1; i++) {
if (arr[i] > arr[i - 1] && arr[i] > arr[i + 1]) {
pos.push(i)
peaks.push(arr[i])
}
}
return {pos,peaks}
}

3.for/in、Object.keys 和 Object.getOwnPropertyNames 对属性遍历有什么区别？你还知道其他遍历对象属性的方式吗？请说明。

ES6中共有5种遍历对象属性的方法

  1. for...in

  2. Object.keys(obj)

  3. Object.getOwnPropertyNames(obj)

  4. Object.getOwnPropertySymbols(obj)

  5. Reflect.ownKeys(obj)

var parent = {}
Object.defineProperties(parent, {
a: {
value: 1,
writable: true,
enumerable: true,
configurable: true
},
b: {
value: 1,
writable: true,
enumerable: false,
configurable: true
},
[Symbol('parent')]: {
value: 1,
writable: true,
enumerable: true,
configurable: true
}
})
var child = Object.create(parent, {
c: {
value: 1,
writable: true,
enumerable: true,
configurable: true
},
d: {
value: 1,
writable: false,
enumerable: true,
configurable: true
},
e: {
value: 1,
writable: true,
enumerable: false,
configurable: true
},
f: {
value: 1,
writable: true,
enumerable: true,
configurable: false
},
[Symbol('child')]: {
value: 1,
writable: true,
enumerable: true,
configurable: true
}
})

for...in

for...in遍历对象自身的所有属性和继承的所有可枚举的属性，但不包含Symbol属性。

for (const key in child) {
console.log(key)
}
// c d f a

Object.keys(obj)

Object.keys(obj)返回对象自身的所有可枚举属性的数组，但不包含Symbol属性。

Object.keys(child)
// ["c", "d", "f"]

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj)返回对象自身所有属性和继承的所有可枚举属性，但不包含Symbol属性。

Object.getOwnPropertyNames(child)
// ["c", "d", "e", "f"]

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj)返回对象自身所有Symbol属性的数组。

Object.getOwnPropertySymbols(child)
// [Symbol(child)]

Reflect.ownKeys(obj)

Reflect.ownKeys(obj)返回对象自身所有属性，无论是否可枚举、是否Symbol属性。

Reflect.ownKeys(child)
// ["c", "d", "e", "f", Symbol(child)]

4.请写出兼容各种浏览器版本的事件绑定函数？

// 添加事件
function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false)
} else if (element.attachEvent) {
element.attachEvent(`on${type}`, handler)
} else {
element[`on${type}`] = handler
}
}

5.CSS选择器优先级怎么计算的？

CSS选择器优先级通过计算选择器中特指度对CSS规则进行层叠。 特指度指选择器中ID、类、标签名出现的次数，并以ID-CLASS-ELEMENT顺序计算。 有如下3条简要规则：

  • ID选择器 > 类选择器 > 标签选择器

  • 行类样式 > 嵌入样式 > 链接样式; 后声明样式 >先声明样式

  • 设定的样式 > 继承的样式

6.请写出一个判断质数的函数，返回布尔值。

function isPrime(num) {
for (let i = 2; i < num; i++) {
if (num % 2 === 0) {
return false
}
}
return num >= 2
}

7.请写出一个延迟执行的函数

function sleep (ms) {
let start = Date.now()
while (Date.now() < start + ms)
}
sleep(1000)
console.log('延迟1秒')

8.请问类数组转数组有哪几种实现方式？

var obj = {
0: 'a',
1: 'b',
length: 2
}
console.log(Array.from(obj))
console.log(Array.prototype.slice.call(obj))
console.log([].slice.call(obj))
// 已知对象原型没有迭代器接口，故无法使用扩展云算法将对象类型的类数组转数组
// 在对象的原型上添加该接口，就可以用[...obj]了
Object.prototype[Symbol.iterator] = function() {
let index = 0;
let propKeys = Reflect.ownKeys(obj);
let lIndex = propKeys.findIndex(v => v === "length");
propKeys.splice(lIndex, 1);
return {
next() {
if (index < propKeys.length) {
let key = propKeys[index];
index++;
return { value: obj[key] };
} else {
return { done: true };
}
}
};
};
console.log([...obj])

以上是 【面试题】前端开发博客微信群一周面试题汇总 的全部内容， 来源链接： utcz.com/a/116599.html

回到顶部