前端面试每日3+2(第41天)
冰洋 1/12/2020 前端100问
当你发现自己的才华撑不起你的野心时，就请安静下来学习吧！
鲁迅说过：
答案仅供参考...
# 1、第 71 题： 实现一个字符串匹配算法，从长度为 n 的字符串 S 中，查找是否存在字符串 T，T 的长度是 m，若存在返回所在位置。
🌿【解析】🌿
// 方法一：
const find = (S, T) => S.search(T)
// 方法二：
const find = (S, T) => {
const matched = S.match(T)
return matched ? matched.index : -1
}
// 方法三
// 因为 T 的 length 是一定的，所以在循环S的的时候 ，循环当前项 i 后面至少还有 T.length 个元素
const find = (S, T) => {
if (S.length < T.length) return -1;
for (let i = 0; i < S.length - T.length ; i++) {
if (S.substr(i, T.length) === T) return i ;
};
return -1;
};
// 方法四
getIndexOf = function (s, t) {
let n = s.length;
let m = t.length;
if (!n || !m || n < m) return -1;
for (let i = 0; i < n; i++) {
let j = 0;
let k = i;
if (s[k] === t[j]) {
k++; j++;
while (k < n && j < m) {
if (s[k] !== t[j]) break;
else {
k++; j++;
}
}
if (j === m) return i;
}
}
return -1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
KMP算法
参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)
# 2、第 72 题： 为什么普通 for 循环的性能远远高于 forEach 的性能，请解释其中的原因。
🌿【解析】🌿
- for 循环没有任何额外的函数调用栈和上下文；
- forEach函数签名实际上是
array.forEach(function(currentValue, index, arr), thisValue)
它不是普通的 for 循环的语法糖，还有诸多参数和上下文需要在执行的时候考虑进来，这里可能拖慢性能。
参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)
# 3、第 73 题： 介绍下 BFC、IFC、GFC 和 FFC
🌿【解析】🌿
BFC（Block formatting contexts）：块级格式上下文
- 页面上的一个隔离的渲染区域，那么他是如何产生的呢？可以触发BFC的元素有float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC有什么作用呢？比如说实现多栏布局’
IFC（Inline formatting contexts）：内联格式上下文
- IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同
- IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
- 那么IFC一般有什么用呢？
- 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
- 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
GFC（GrideLayout formatting contexts）：网格布局格式化上下文
- 当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
FFC（Flex formatting contexts）:自适应格式上下文
- display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)
# 4、第 74 题： 使用 JavaScript Proxy 实现简单的数据绑定
🌿【解析】🌿
<body>
hello,world
<input type="text" id="model">
<p id="word"></p>
</body>
<script>
const model = document.getElementById("model")
const word = document.getElementById("word")
var obj= {};
const newObj = new Proxy(obj, {
get: function(target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function(target, key, value, receiver) {
console.log('setting',target, key, value, receiver);
if (key === "text") {
model.value = value;
word.innerHTML = value;
}
return Reflect.set(target, key, value, receiver);
}
});
model.addEventListener("keyup",function(e){
newObj.text = e.target.value
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)
# 5、第 75 题：数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少
🌿【解析】🌿
数组可以直接根据索引取的对应的元素，所以不管取哪个位置的元素的时间复杂度都是 O(1)
得出结论：消耗时间几乎一致，差异可以忽略不计
参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)
