一周面试题汇总(0328-0403)
EraserRain 2022/3/28 javascript
# 1. [js] 去掉字符串中的空格
写一个方法去掉字符串中的空格，要求传入不同的类型分别能去掉前、后、前后、中间的空格。
function clearSpace(str) {
let reg = /[\s]+/g
str = str.replace(reg, "")
console.log(str)
}
const str = " this is a test string "
clearSpace(str) // output:thisisateststring
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2. [css] 在页面上隐藏元素的方法有哪些？
在页面上隐藏元素的方法有哪些？并简述优劣势。
disaplay: none;
/* 页面不会渲染，可以减少首屏渲染的时间，但会引起回流和重绘。不会影响页面布局。 */
visibility: hidden;
/* 页面会渲染但是不会显示。 */
opacity: 0;
/* 被隐藏的会占据布局空间。会引起重绘。 */
transform: scale(0);
/* 被隐藏的会占据布局空间。会引起重绘。 */
z-index: -9999
/* 让元素位置在视区外。 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 3. [js] 去除字符串中最后一个指定的字符
function delLast(str, last) {
if (typeof str == 'string') {
let i = str.lastIndexOf(last)
return str.substring(0,i)+str.substring(i+1)
} else return false
}
const str = "this is a test string"
const last = 'i'
console.log(delLast(str,last)) // output:this is a test strng
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 4. [html] HTML5的文件离线储存怎么使用，工作原理是什么？
# 使用 manifest
通过离线存储，可以通过把需要离线存储在本地的文件列在 manifest 配置文件中，这样即使在离线的情况下，用户也可以正常使用App。
HTML 中引入
<!DOCTYPE HTML>
<html manifest="cache.manifest">
...
</html>
1
2
3
4
2
3
4
离线存储的 manifest 一般由三个部分组成:
CACHE：表示需要离线存储的资源列表，包含 manifest 文件的页面将被自动离线存储。
NETWORK：此标题下列出的文件需要与服务器的连接，且不会被缓存，离线时无法使用。
- 如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
FALLBACK：表示如果访问第一个资源失败，那么就使用第二个资源来替换。
示例：
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
可以使用 * 来指示所有其他资源/文件都需要与服务器连接，NETWORK: * 。
如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
参考：【https://github.com/haizlin/fe-interview/issues/10 (opens new window)】 【有趣的HTML5：离线存储 (opens new window)】