前端开发博客一周面试题汇总

前端开发博客

发布于 2020-11-04 15:13:55

2430

发布于 2020-11-04 15:13:55

文章被收录于专栏：前端开发博客

感谢管理员一周的面试题汇总。希望大家多多支持我们的管理员，记得赞赏、点好看、转发一条龙支持他的工作。

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.求一个数组所有波峰位置和波峰峰值？

/**
求一个数组所有波峰位置和波峰峰值？
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种遍历对象属性的方法

for...in
Object.keys(obj)
Object.getOwnPropertyNames(obj)
Object.getOwnPropertySymbols(obj)
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 % i === 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])

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-03-01，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

css

本文分享自前端开发博客微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

css

登录后参与评论

0 条评论

热度