7 вопросов JS-интервью о песчаных скульптурах и ловушках

Автор: Дмитрий Павлютин

Переводчик: Front-end Xiaozhi

Источник: дмитрипавлутин

Для обеспечения удобочитаемости в этой статье используется перевод, а не прямой перевод.

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

Этот волшебный мир - сравнение превосходства. Если я могу испытать тебя, я превосходю тебя, это правда.

Давайте посмотрим, что это за темы 7 скульптур из песка.

1. Случайно созданные глобальные переменные

интервьюер спросил

в коде нижеtypeof aа такжеtypeof bКаковы результаты каждого? (скульптура из песка)

function foo() {
  let a = b = 0;
  a++;
  return a;
}

foo();
typeof a; // => ???
typeof b; // => ???

Отвечать

Суть этого кода第二行:let a = b = 0. Этот оператор объявляет локальную переменнуюa, но также объявляет глобальную переменнуюb.

существуетfoo()Переменная не объявлена ​​ни в области видимости, ни в глобальной области видимостиb. Таким образом, рефералы JS будутb = 0Выражение интерпретируется какwindow.b = 0.

Как показано на рисунке ниже, функцияfooсерединаiОбе являются случайно созданными глобальными переменными:

Так же и в нашей задачеbслучайно созданная глобальная переменная. В браузере приведенный выше код эквивалентен следующему:

function foo() {
  let a;
  window.b = 0;
  a = window.b;
  a++;
  return a;
}

foo();
typeof a;        // => 'undefined'
typeof window.b; // => 'number'

typeof aда'undefined'. Переменнаяaтолько приfoo()объявленный в области, недоступный во внешней области.

typeof bоказаться'number'.bявляется значением0глобальная переменная

2. Свойство длины массива

интервьюер спросил

clothes[0]Какова ценность? (скульптура из песка)

const clothes = ['jacket', 't-shirt'];
clothes.length = 0;

clothes[0]; // => ???

Отвечать

объект массиваlengthсвойства имеют некоторыеособое поведение:

уменьшатьlengthПобочным эффектом значения свойства является удаление自己的Элементы массива, индексы массива которых лежат между старым и новым значениями длины.

из-заlengthПоведение свойств при выполнении JSclothes.length = 0, удалить всеclothesпункт. такclothes[0]ценностьundefined,потому чтоclothesМассив был опустошен.

3. Волшебные вопросы, проверяющие зрение

интервьюер спросил

Каково содержимое массива чисел в приведенном ниже коде?Уведомлениеfor()затем точка с запятой (;), это скульптура из песка.

const length = 4;
const numbers = [];
for (var i = 0; i < length; i++);{
  numbers.push(i + 1);
}

numbers; // => ???

Отвечать

в приведенном выше кодеfor()затем точка с запятой (;) плюс точка с запятой, JS будет думать, что инструкция завершена, поэтому цикл for выполняет пустую инструкцию 4 раза.После выхода из цикла значение i в этот момент равно 4.

затем выполнить{ numbers.push(i + 1); }, так что в конце концовnumbersСодержание - это только число5.

Приведенный выше код эквивалентен следующему коду

const length = 4;
const numbers = [];
var i;
for (i = 0; i < length; i++) {
  // does nothing
}
{ 
  // a simple block
  numbers.push(i + 1);
}

numbers; // => [5]    
    

Используя нестандартный код, чтобы проверить, осторожны ли другие, я чувствую себя очень песчаной скульптурой.

4. Автоматическая вставка точки с запятой

интервьюер спросил

arrayFromValue()Какое значение возвращается? (Скульптура из песка)

function arrayFromValue(items) {
  return
    [items];
}

arrayFromValue(10); // => ???

Отвечать

Обратите внимание здесьreturnа также[items]Между строками был разрыв строки, и JS автоматически вставит точку с запятой между разрывами строк. Таким образом, приведенный выше код эквивалентен следующему коду:

function arrayFromValue(items) {
  return;
  [items];
}

arrayFromValue(10); // => undefined

return;Внутри функции сделайте возврат функцииundefined,такarrayFromValue(10)ценностьundefined.

5. Классическая проблема замыкания, которая была плохо протестирована

интервьюер спросил

Каков результат выполнения следующего кода? (Можете ли вы изменить вопрос)

let i;
for (i = 0; i < 3; i++) {
  const log = () => {
    console.log(i);
  }
  setTimeout(log, 100);
}

Отвечать

Легко давать, когда вы мало знаете об основах JS0, 1, 2Ответ, я впервые столкнулся с этим вопросом в школе.

Есть две фазы процесса выполнения этого кода.

Этап 1

1. for()повторять3Второсортный. На каждой итерации создается новая функцияlog(), функция захватит переменнуюi. Потом,setTimout()расписаниеlog()исполнение.

2. когдаfor()Когда цикл завершается, переменнаяiценность3.

log()является переменной захватаiзамыкание переменной вfor()Определяется во внешней области цикла. Важно понимать, что замыкания захватывают переменные лексически.i.

Этап 2

Второй этап проходит в100миллисекунды спустя

вызов setTimeout()3индивидуальныйlog()Перезвоните.log()Читать переменнуюiтекущее значение , т.е.3.

Вот почему вывод консоли3,3а также3причина

6. Арифметика с плавающей запятой

интервьюер спросил

Каков результат кода ниже? (Можете ли вы изменить вопрос)

0.1 + 0.2 === 0.3 // => ???

Отвечать

Во-первых, давайте посмотрим0.1 + 0.2значение

0.1 + 0.2; // => 0.30000000000000004

0.1а также0.2Сумма не равна0.3, но немного выше, чем0.3.

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

следовательно,0.1 + 0.2 === 0.3даfalse.

7. Вариативное продвижение

интервьюер спросил

при доступе до объявленияmyVarа такжеmyConstЧто случится? (Можете ли вы изменить вопрос)

myVar;   // => ???
myConst; // => ???

var myVar = 'value';
const myConst = 3.14;    

Отвечать

Подъем и временная мертвая зона — две важные концепции, влияющие на жизненный цикл переменных JS.

доступ до объявленияmyVarРезультатundefined, потому что переменные, объявленные с помощью var, поднимаются и имеют значениеundefined.

Однако доступ перед строкой объявленияmyConstвызоветReferenceError. в строке кодаconst myConst = 3.14До,constПеременная находится во временной мертвой зоне.

Суммировать

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

Конечно, хотя и говорится, что это проблема скульптуры из песка, их можно использовать для оценки того, хорошо ли вы владеете JS и обладаете ли вы знаниями, которые мы изучили.

В интервью вы столкнулись с любыми другими темами, подобными этой, пожалуйста, оставьте сообщение для обсуждения.

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Рисовое путешествие avlutin.com/simple-differen-…

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.