某公司面试题,自己思考再看答案
⼀、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,右列占据剩余宽度。
- 把尺⼨未知的元素置于浏览器可⽤区域的正中央,且位置不随⻚⾯滚动⽽变化(⽆须兼容旧浏览器)。
⼆、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
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())
}