Резюме десяти основных вопросов для собеседования на заводе (с ответами)

Это снова сезон смены работы, и пришло время почистить вопросы. Вот краткое изложение некоторых реальных вопросов интервью, которые могут сбивать с толку, если вам это нужно, вы можете прочитать его~

1. Поменять местами два числа без использования переменных

1. Арифметический обмен

Для числа или типа переменной, тип которого можно преобразовать в число

function swap(a, b) {
   a = a + b;
   b = a - b;
   a = a - b;
}

Два значения можно хитро поменять местами во время арифметических операций. Однако существует недостаток переполнения переменных данных. Потому что JavaScript может хранить числа с точностью от -2^53 до 2^53. Следовательно, операция сложения будет иметь проблему переполнения.

2. Операция исключающее ИЛИ

^ Побитовое XOR 0, если два бита, участвующих в операции, имеют одно и то же значение, 1 в противном случае Реализация этого алгоритма определяется характеристиками операции XOR: некоторые биты данных могут быть перевернуты с помощью операции XOR, а другие биты остаются неизменными. Это означает, что любое число дважды подряд подвергается операции XOR с любым заданным значением, и значение остается неизменным.

a = a ^ b;
b = a ^ b; 
a = a ^ b;

3. Деструктуризация ES6

[a, b] = [b, a];

Больше ссылок:

nuggets.capable/post/684490…
Краткое описание.com/fear/61370227’s…

2. Реализовать сумму (1,2,3) == сумму (1) (2) (3)

function sum(...args){
  function currySum(...rest){
    args.push(...rest)
    return currySum
  }
  currySum.toString= function(){ 
    return args.reduce((result,cur)=>{
      return result + cur
    })
  }
  currySum.toNumber= function(){ 
    return args.reduce((result,cur)=>{
      return result + cur
    })
  }
  return currySum
}

Больше ссылок:GitHub.com/advanced-fr…

3. Режим наблюдателя и режим публикации-подписки, поговорим о разнице

Концепция шаблона наблюдателя

Режим наблюдателя — это тип поведенческого режима, который определяет зависимость «один ко многим», позволяя нескольким объектам-наблюдателям одновременно отслеживать определенный объект-субъект. Этот подчиненный объект будет уведомлять все объекты-наблюдатели об изменении состояния, позволяя им автоматически обновляться.

Концепция шаблона публикации-подписки

В модели публикации-подписки отправители сообщений называются издателями, и сообщения не отправляются напрямую конкретным получателям, называемым подписчиками. Это означает, что издатели и подписчики не знают о существовании друг друга. Требуется сторонний компонент, называемый брокером сообщений, который соединяет подписчиков и издателей, а также фильтрует и распределяет все входящие сообщения. Другими словами, модель публикации-подписки используется для управления обменом информацией между различными компонентами системы, даже если эти компоненты не знают о существовании друг друга.

разница

Давайте кратко суммируем эти различия:

В шаблоне наблюдатель наблюдатель знает о субъекте, а субъект ведет учет наблюдателя. Однако в модели публикации-подписки издатель и подписчик не знают о существовании друг друга. Они общаются только через брокера сообщений.

В шаблоне публикации-подписки компоненты слабо связаны, в отличие от шаблона наблюдателя.

Паттерн наблюдателя в основном синхронный, например, когда происходит событие, субъект вызывает метод наблюдателя. Принимая во внимание, что шаблон публикации-подписки в основном асинхронный (с использованием очередей сообщений).

Шаблон наблюдателя должен быть реализован в адресном пространстве одного приложения, в то время как шаблон публикации-подписки больше похож на шаблон для нескольких приложений.

Более:nuggets.capable/post/684490…PS: лучший режим, соответствующий моменту кода также писать о

4. Реализуйте алгоритм LRU

Реализуйте кэш KV с алгоритмом истечения срока действия LRU, все интервалы истечения срока действия KV одинаковы и выполняются следующие свойства:

Хранить не более n пар KV;
Если их больше n, то случайным образом удалить просроченный KV;
Если просроченного KV нет, то KV ликвидируется по правилам LRU;
Если срок действия запроса истек, он вернется пустым;

class LRUCache {
    constructor(capacity,intervalTime){
        this.cache = new Map();
        this.capacity = capacity;
        this.intervalTime = intervalTime;
    }
    get(key){
        if(!this.cache.has(key)){
            return null
        }
        const tempValue = this.cache.get(key)
        this.cache.delete(key);
        if(Date.now() - tempValue.time > this.intervalTime){
            return null
        }
        this.cache.set(key, {value: tempValue.value, time: Date.now()})
        return tempValue.value
    }
    put(key, value){
        if(this.cache.has(key)){
            this.cache.delete(key)
        }
        if(this.cache.size >= capacity){ //满了
            const keys = this.cache.keys()
            this.cache.delete(keys.next().value)
        }
        this.cache.set(key, {value,time:Date.now()})
    }
}

Умело использует функцию упорядочения ключей структуры карты. Ключи обычных объектов неупорядочены.

5. Как отслеживать сбои веб-страницы?

Решение для статистики сбоев на основе Service Worker

С ростом популярности концепции PWA все постепенно знакомятся с Service Worker. Мы можем использовать Service Worker для мониторинга сбоев веб-страницы по следующим причинам:

Service Worker имеет свой собственный независимый рабочий поток, который отделен от веб-страницы.В случае сбоя веб-страницы Service Worker не будет аварийно завершать работу при нормальных обстоятельствах;
Жизненный цикл сервисного работника обычно длиннее, чем у веб-страницы, и его можно использовать для отслеживания состояния веб-страницы;
Веб-страницы могут отправлять сообщения в ПО, на котором они размещены, через API navigator.serviceWorker.controller.postMessage.

Основываясь на вышеуказанных пунктах, мы можем реализовать схему мониторинга, основанную на обнаружении сердцебиения:

p1: после того, как веб-страница загружена, каждые 5 секунд через postMessageAPI отправляйте тактовый импульс на sw, указывая, что он находится в сети, sw зарегистрирует онлайн-страницу и обновит время регистрации;
p2: Когда веб-страница находится перед выгрузкой, она информирует себя о том, что она была нормально закрыта через postMessageAPI, и sw очищает зарегистрированную веб-страницу;
p3: если веб-страница аварийно завершает работу во время работы, рабочее состояние в sw не будет очищено, а время обновления останется на последнем пульсе перед сбоем;
sw: Service Worker проверяет зарегистрированную веб-страницу каждые 10 с и обнаруживает, что время регистрации превысило определенное время (например, 15 с), чтобы определить, что веб-страница потерпела крах.

Более:zhuanlan.zhihu.com/p/40273861

6. Запросите вывод кода и объясните, почему

var obj = {
    '2':3,
    '3':4,
    'length':2,
    'splice':Array.prototype.splice,
    'push':Array.prototype.push
}
obj.push(1)
obj.push(2)
obj.push(3)
console.log(obj)

Отвечать:

{
    '2':1
    '3':2,
    '4':3,
    'length':5,
    'splice':Array.prototype.splice,
    'push':Array.prototype.push
}

obj имеет длину, которая эквивалентна массиву. При вызове массива элемент будет добавлен в конец массива. Первый вызов эквивалентен длине 3, затем элемент с индексу 2 присваивается значение 1, а следующему элементу присваивается значение 1. Отметка равна 2. Когда она используется в качестве ключевого значения объекта, будет неявно вызываться метод toString для преобразования ее в строку 2, который совпадает с исходным ключом '2' obj, и значение исходного ключа 2 перезаписывается. И так для следующих 2 нажатий.

Подробности:GitHub.com/счастливая победа TY/…

7. В чем разница между setTimeout и setImmediate в узле

setImmediate() и setTimeout() похожи, но ведут себя по-разному в зависимости от того, когда они вызываются.

Дизайн setImmediate выполняется, когда фаза опроса завершена, то есть фаза проверки;
setTimeout предназначен для выполнения, когда стадия опроса простаивает и достигнуто установленное время, но выполняется на стадии таймера.

Порядок, в котором выполняются таймеры, зависит от контекста, в котором они вызываются. Если оба вызываются из основного модуля, таймер будет привязан к производительности процесса. Например, есть следующий код:

setTimeout(() => console.log(1));
setImmediate(() => console.log(2));

Приведенный выше код должен сначала выводить 1, а затем выводить 2, но когда он действительно выполняется, результат неопределен, и иногда он сначала выводит 2, а затем выводит 1.

Это связано с тем, что второй параметр setTimeout по умолчанию равен 0. Но на самом деле Node не может сделать 0 миллисекунд, а требуется как минимум 1 миллисекунда Согласно официальной документации диапазон значений второго параметра находится между 1 миллисекундой и 2147483647 миллисекундами. То есть setTimeout(f, 0) эквивалентен setTimeout(f, 1).

В реальном исполнении после входа в цикл событий может быть 1 миллисекунда, а может и не быть 1 миллисекунда, в зависимости от текущей ситуации в системе. Если оно меньше 1 миллисекунды, то фаза таймеров будет пропущена и будет введена фаза проверки, а функция обратного вызова setImmediate будет выполнена первой.

Однако в этом случае порядок вывода является фиксированным, например:

const fs = require('fs');
fs.readFile('test.js', () => {
 setTimeout(() => console.log(1));
 setImmediate(() => console.log(2));
});

В приведенном выше коде он должен сначала вывести 2, а затем вывести 1. Поскольку два кода записаны в обратном вызове ввода-вывода, обратный вызов ввода-вывода выполняется на этапе опроса.Когда обратный вызов выполняется, очередь пуста, и обнаруживается, что есть обратный вызов setImmediate, поэтому он переходит непосредственно к этапу проверки. для выполнения обратного вызова, а затем перейти к этапу проверки, к этапу таймеров, затем выполнить setTimeout.

8. Пишем регулярку, берем значение в куке по названию.

function get(name){
  var reg = new RegExp(name+'=([^;]*)?(;|$)');
  var res = reg.exec(document.cookie);
  if(!res || !res[1])return '';
    try{
      if(/(%[0-9A-F]{2}){2,}/.test(res)){//utf8编码
      return decodeURIComponent(res);
    }else{//unicode编码
      return unescape(res);
    }
  }catch(e){
    return unescape(res);
  }
}

Сосредоточьтесь на этих строках кода в регулярных выражениях: '([^;])', что означает, что после совпадения str= не следует; ([^;] означает неустановленное значение, то есть все символы, не являющиеся ;, могут совпадать), строка появляется 0 или более раз (), затем поместите совпадающую строку в первую группу захвата.

Подробности:GitHub.com/счастливая победа TY/…

9. Напишите не менее 7 методов для достижения следующего макета без изменения структуры html.

Требования: 2 столбца слева, 1 столбец справа, адаптивный посередине

    <div class="parent" style="width: 200px">
        <div class="child child1" style="width: 20px"></div>
        <div class="child child2" style="width: 20px">2</div>
        <div class="child child3" style="width: 20px">3</div>
    </div>

Отвечать:

/* 1 */
    .parent{
        background-color: burlywood;
        display: flex;
    }
    .child{
        background-color: black;
        font-size: 20px;
        color: white;
    }
    .child3{
        margin-left: auto;
    }

/* 2 */
    .parent{
        background-color: burlywood;
        position: relative;
    }
    .child{
        font-size: 20px;
        color: white;
    }
    .child1{
        background-color: black;
        position: absolute;
        left: 0;
    }
    .child2{
        background-color: black;
        position: absolute;
        left: 20px;
    }
    .child3{
        background-color: black;
        position: absolute;
        right: 0;
    }

/* 3 */
    .parent{
        background-color: burlywood;
    }
    .child1{
        background-color: black;
        float: left;
    }
    .child2{
        background-color: red;
        float: left;
    }
    .child3{
        float: right;
        background-color: blue
    }

/* 4 */
    .parent{
        background-color: burlywood;
        display: table;
    }
    .child{
        background-color: black;
        display: table-cell;
        height: 20px;
    }
    .child3{
        display: block;
        margin-left: auto;
    }

/* 5 */
    .parent{
        background-color: burlywood;
        position: relative;
    }
    .child{
        background-color: black;
        position: absolute;
        top:0;
        left:0;
    }
    .child2{
        transform: translate(20px, 0);
    }
    .child3{
        transform: translate(180px, 0);
    }

/* 6 */
  .parent{
        background-color: burlywood;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
    }
    .child{
        background-color: black;
        font-size: 20px;
        color:white;
    }
    .child3{
        grid-column: 10 / 11;
    }

/* 7 */
    .parent{
        background-color: burlywood;
        font-size: 0;
    }
    .child{
        background-color: black;
        display: inline-block;
        font-size: 20px;
        color: white;
    }
    .child3{
        margin-left: 140px;
    }

10. Нарисовать сектор с помощью css?

width: 0;
height: 0;
border: solid 100px red;
border-color: red transparent transparent transparent;
border-radius: 100px;

иллюстрировать

Некоторые вопросы и ответы в этой статье взяты из Интернета. Если есть какая-либо ошибка, исправьте ее. Если есть какая-либо проблема с нарушением прав, свяжитесь с winty230 в WeChat, чтобы договориться и решить ее.

наконец

Добро пожаловать, чтобы добавить меня в WeChat (winty230), привлечь вас в техническую группу, долгосрочный обмен и обучение...
Добро пожаловать, чтобы обратить внимание на «Front-end Q», серьезно изучить интерфейс и быть профессиональным техническим специалистом...