⾼级前端开发⼯程师 笔试题（请在 45 分钟内闭卷完成）

某公司面试题，自己思考再看答案

⼀、HTML 与 CSS。

1. 实现两列布局：左列宽度为 200px，右列占据剩余宽度。
2. 把尺⼨未知的元素置于浏览器可⽤区域的正中央，且位置不随⻚⾯滚动⽽变化（⽆须兼容旧浏览器）。

⼆、JavaScript。

1. 使⽤正则表达式把字符串 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.'

1. 从数组中随机选出⼀个元素，要求：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); }
    

答案如下

1. 实现两列布局：左列宽度为 200px，右列占据剩余宽度。

1. 把尺⼨未知的元素置于浏览器可⽤区域的正中央，且位置不随⻚⾯滚动⽽变化（⽆须兼容旧浏览器）。

⼆、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())
   
}