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 % 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])