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

感兴趣的可以加我微信:caibaojian89,拉你进群。

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种遍历对象属性的方法

  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])
原文:前端开发博客微信群一周面试题汇总20190301 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/20190301-interview-question.html)