某公司面试题，自己思考再看答案
⼀、HTML 与 CSS。
- 实现两列布局：左列宽度为 200px，右列占据剩余宽度。
- 把尺⼨未知的元素置于浏览器可⽤区域的正中央，且位置不随⻚⾯滚动⽽变化（⽆须兼容旧浏览器）。
⼆、JavaScript。
- 使⽤正则表达式把字符串 str 中的占位符替换成 obj 的对应属性值，要求只能调⽤⼀次 replace ⽅法。
var str = 'My name is ${name}. I like ${hobby}.';
var obj = { name: 'Tom', hobby: 'coding' };
// 结果应为 'My name is Tom. I like coding.'- 从数组中随机选出⼀个元素，要求：priority 越⼤的元素，被选中的概率越⼤。
const arr = [
{ id: 1, priority: 16 }, { id: 2, priority: 20},
{ id: 3, priority: 3 }, { id: 4, priority: 7 }
];
3.a、b、c 都是执⾏异步操作的函数，请通过 Promise、async、await 实现：a、b 并⾏执⾏完毕后再执⾏ c。
function a(callback) { setTimeout(callback, 10); }
function b(callback) { setTimeout(callback, 20); }
function c(callback) { setTimeout(callback, 30); }
答案如下
- 实现两列布局：左列宽度为 200px，右列占据剩余宽度。
<style>
.box{
width:100vw;
height:100vh;
display: flex;
}
.left{
width: 200px;
}
.right{
flex: 1;
}
</style> <div class="box">
<div class="left"></div>
<div class="right"></div>
</div>- 把尺⼨未知的元素置于浏览器可⽤区域的正中央，且位置不随⻚⾯滚动⽽变化（⽆须兼容旧浏览器）。
<style>
.box{
width: 200px;
height: 200px;
position: fixed;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
z-index: 99;
}
</style>
<div class="box"></div>⼆、JavaScript。
使⽤正则表达式把字符串 str 中的占位符替换成 obj 的对应属性值，要求只能调⽤⼀次 replace ⽅法。
var str = 'My name is ${name}. I like ${hobby}.';
var obj = { name: 'Tom', hobby: 'coding' };
// 结果应为 'My name is Tom. I like coding.'
var newStr = str.replace(/\$\{(.+?)\}/g,(str, k) => {
return obj[k]
})
console.log('newStr = ',newStr)从数组中随机选出⼀个元素，要求：priority 越⼤的元素，被选中的概率越⼤。
const arr = [
{ id: 1, priority: 16 }, { id: 2, priority: 20},
{ id: 3, priority: 3 }, { id: 4, priority: 7 }
];
function randomNum(Min, Max) {
var Range = Max - Min
var Rand = Math.random()
var num = Min + Math.round(Rand * Range)
return num
}
const countVal = arr.reduce((count, item) => count += item.priority, 0)
arr.map(item => {
item.probability = parseInt(item.priority / countVal * 100)
item.text = `当前item中奖的概率为 ${item.probability} %`
for (let i = 0; i <= 100; i++) {
if (item.probability >= i) {
const num = randomNum(0, 100)
if (num === 100) {
item.checked = true
return
}
}
}
})
console.log(arr)
或者
var arr=[
{id:1,p:16},
{id:2,p:20},
{id:3,p:3},
{id:4,p:7}
];
var sum =arr.reduce(function(t,v){
return v.m=t+=v.p;
},0);
var rd = randomNum(0,sum);
var item=arr.find(function(v){
return rd<v.m;
});
console.info('随机数：'+rd);
console.info('随机元素：'+JSON.stringify(item));
console.info('当前元素概率为：'+(item.p/sum));
a、b、c 都是执⾏异步操作的函数，请通过 Promise、async、await 实现：a、b 并⾏执⾏完毕后再执⾏ c。
function a(callback) { setTimeout(callback, 10); }
function b(callback) { setTimeout(callback, 20); }
function c(callback) { setTimeout(callback, 30); }
promiseHandler()
async function promiseHandler() {
function a(callback) { setTimeout(callback, 3000); }
function b(callback) { setTimeout(callback, 20); }
function c(callback) { setTimeout(callback, 100); }
const p1 = function() {
return new Promise(resolve => {
a(() => resolve('a') )
})
}
const p2 = function() {
return new Promise(resolve => {
b(() => resolve('b') )
})
}
const p3 = function() {
return new Promise(resolve => {
c(() => resolve('c') )
})
}
const arr = await Promise.all([p1(), p2()])
console.log(arr[0])
console.log(arr[1])
console.log(await p3())
}
