阿里达摩院训练题5

  |  

编程题1

题目描述:

编程题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
<html>
<body>
<div class='app'>
<div class='left'>
<div class='left-kid'></div>
<div class='left-kid'></div>
<div class='left-kid-short'></div>
</div>
<div class='right'></div>
</div>
<style>
.app {
display: grid;
grid-template-columns: 1fr 200px;
grid-column-gap: 10px;
}
.left {
display: grid;
align-items: center;
grid-template-columns: 200px 1.5fr 1fr;
grid-column-gap: 10px;
}
.left-kid {
height: 300px;
background: red;
}
.left-kid-short {
height: 200px;
background: red;
}
.right {
background: red;
height: 200px;
}
</style>
</body>
</html>

flex布局、CSS Grid 网格布局、移动端rem布局、移动端流式布局、移动端flex布局、移动端响应式布局

编程题2

题目描述:编写至少两种方法,从url上获取参数

1
2
3
4
5
function fn(url,name) {

}
fn('https:/a.com/?a=1&b=2', 'a'); // 1
fn('https:/a.com/?a=1&b=2', 'c'); // null

题目解析:

1
2
3
4
5
6
7
function fn(url, name) {
let arr = url.substring(url.indexOf('?')+1, url.length).split('&');
for(let item of arr) {
if(name === item.split('=')[0]) return item.split('=')[1]
}
return null;
}
1
2
3
4
5
6
7
\\ [^&]+ 匹配不是&的任意字符一次或多次 
\\ ()取值
function fn(url, name) {
let reg = new RegExp(name + "=([^&]+)")
if(reg.test(url)) return RegExp.$1;
return null;
}
1
2
3
4
5
6
function fn(url,name) {
let searchParams = new URLSearchParams(url.split('?')[1]);
if(searchParams.has(name)) return searchParams.get(name);
return null;
}
fn('https://a.com?a=1&b=2', 'a');

编程题3

题目描述:

编程题3

题目解析:

1
2
3
4
5
console.log = ((func) => {
return function() {
func.call(console, '我被重新实现拉~ ', ...arguments);
}
})(console.log);