Пробую свои ответы на статью: https://blog.webf.zone/front-end-javascript-interviews-in-2018-19-e17b0b10514

Раздел 1. Основные вопросы по JavaScript *

*сейчас. Я буду давать ссылки на ответы, которые найду, и они ни в коем случае не идеальны!

Основные вопросы по JavaScript

1. Заставьте следующий код работать:

const a = [1, 2, 3, 4, 5];
// Implement this
a.multiply();
console.log(a); // [1, 2, 3, 4, 5, 1, 4, 9, 16, 25]

Ответ: Существует несколько способов реализации функции «умножение», один из которых - это функция, добавляемая к прототипу массива и вызывающая его.

2. Следующий код возвращает `false` в JavaScript. Обоснуйте, почему это происходит:

// false
0.2 + 0.1 === 0.3

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

+(0.1 + 0.2).toFixed(12) // 0.3

использованная литература:

  1. Http://adripofjavascript.com/blog/drips/avoiding-problems-with-decimal-math-in-javascript.html
  2. Https://stackoverflow.com/questions/10473994/javascript-adding-decimal-numbers-issue

3. Какие типы данных существуют в JavaScript?

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

Ответ: шесть примитивных типов следующие:

  1. Число: числа могут быть как целыми, так и с плавающей запятой. Специальные номера включают Infinity, -Infinity и NaN.
let n = 123;
n = 12.345;

2. Строка: Строка должна быть заключена в один из трех типов кавычек, а именно. Двойной "Hello", одинарный 'Hello' и обратные кавычки `Hello`.

Примеры:

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed ${str}`; // can embed Hello

3. Логическое: либо true, либо false.

4. Null: нулевой тип используется для неизвестных значений. Это очень похоже на другие языки, имеющие значение «null».

let something = null;

5. Не определено: неопределенное имеет свой собственный тип. Если переменная объявлена, но не присвоена, то ее значение равно undefined:

let somethingElse;
console.log(somethingElse); // <-- this is undefined

6. Массивы: я считаю, что массивы не нуждаются в пояснениях :)

let arr = [1,2,3];
let arr2 = ["apple", "ball"];
let arr3 = ["aero", 1];

Непримитивный - это Object:

Объекты. Объекты представляют собой пары ключ: значение, которые записываются / разделяются запятыми.

let person = { firstName: "steve", lastName: "Jobs" };

Появился новый тип под названием Symbols, который теперь считается примитивным.

Символы: символы - это новые примитивы в ECMAScript 6. Мне нравится думать о них как о закрытых ключах, которые не конфликтуют с ключами, присутствующими в объектах. Они должны быть созданы фабричным методом «Symbol ()». Кроме того, каждый символ уникален.

const symbol1 = Symbol();
Symbol() === Symbol(); // false - every symbol is unique
// Symbols are property keys
const MY_KEY = Symbol();
const obj = {MY_KEY: 456};

obj[MY_KEY] = 123;
console.log(obj[MY_KEY]); // 123
console.log(obj["MY_KEY"]); // 456

использованная литература:

  1. Https://javascript.info/
  2. Https://developer.mozilla.org/en-US/docs/Glossary/Symbol
  3. Http://exploringjs.com/es6/ch_symbols.html#sec_primitive-type-symbol

4. Решите следующую проблему с асинхронным кодом.

Ответ: Строится!

5. Реализуйте простую привязку данных с помощью прокси-сервера JavaScript.

Подсказка: ES Proxy позволяет вам перехватывать вызов любого свойства или метода объекта. Прежде всего, модель DOM должна обновляться при каждом изменении нижележащего связанного объекта.

Ответ: Прокси-серверы могут помочь нам взаимодействовать напрямую, а не напрямую воздействовать на цель. Вот простой пример, в котором вы имеете дело с personProxy вместо использования свойств самого человека.

Для двусторонней привязки с элементом DOM ссылка Sitepoint очень хорошо объясняет. Пройдите через это!

Также загляните на repl.it, чтобы узнать то же самое.

Ссылки: https://www.sitepoint.com/es6-proxies/

6. Объясните модель параллелизма JavaScript.

Знакомы ли вы с какой-либо другой моделью параллелизма, которая используется в других языках программирования, таких как Elixir, Clojure, Java и т. д.?

Подсказка: ищите цикл событий, очередь задач, стек вызовов, кучу и т. д.

Ответ: JavaScript асинхронный и однопоточный. Он использует цикл событий для выполнения функций, которые могут потребовать времени, таких как сетевые запросы или операции файловой системы.

В модели JavaScript необходимо знать несколько «ключевых слов»:
Куча: она очень похожа на куча, которую все знают по Java. Объекты хранятся / размещаются в куче.

Стек вызовов. Стек вызовов представляет собой структуру данных LIFO (последний пришел - первый ушел), которая отслеживает вызовы функций. Когда вызываются две функции, одна внутри другой, он проталкивает первую функцию, затем помещает вторую функцию поверх первой и выполняет их по порядку сверху.

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

Цикл событий: единственная задача цикла событий - сохранять отправляемые элементы в стек вызовов, когда он пуст (в стеке нет функций), и для этого он принимает самый старый обратный вызов и нажимает- в стек вызовов.

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

Использованная литература:

  1. Https://flaviocopes.com/javascript-event-loop/#queuing-function-execution
  2. Https://guide.freecodecamp.org/javascript/concurrency-model-and-event-loop/

7. Что делает ключевое слово `new` в JavaScript?

Подсказка: в JavaScript new - это оператор, используемый для создания экземпляра объекта. Здесь цель - понять, что происходит, с точки зрения объема и памяти.

Также обратите внимание на [[Construct]] и [[Call]].

Ответ: Ключевое слово new автоматически вызывает функцию конструктора, чтобы:

  1. Создать новый объект
  2. связывает this с объектом
  3. Объект-прототип функции-конструктора становится свойством __proto__ нового объекта. Чтобы узнать о различиях между прототипом и прототипом, настоятельно рекомендуется прочитать: https://hackernoon.com/understand-nodejs-javascript-object-inheritance-proto-prototype-class-9bd951700b29
  4. Он возвращает объект из функции.

8. Каковы различные шаблоны вызова функций в JavaScript? Объясните подробно.

Подсказка: есть четыре шаблона: вызов функции, вызов метода, .call()и .apply()

Ответ: внутри блока кода

ссылка: https://medium.com/javascript-everyday/javascript-theory-function-invocation-patterns-55dbe7aedb7e

9. Объясните все новые предложения по ECMAScript.

Ответ: Promise.try

использованная литература:

  1. Http://bluebirdjs.com/docs/api/promise.try.html
  2. Https://github.com/tc39/proposal-promise-try

10. Что такое итераторы и итераторы в JavaScript? Вы знаете какие-нибудь встроенные итераторы?

Ответ: Итерационные объекты - это «объекты», в которых реализован метод Symbol.iterator. Эта реализация метода итератора делает объект итерируемым.

С другой стороны, итератор будет перемещаться по элементам итерации. Я процитирую здесь пример статьи @devGson, ссылка ниже.

Вот более крупный пример: customIterator.js.

использованная литература:

  1. Https://scotch.io/@devGson/understanding-iterators-and-iterables-in-javascript
  2. Http://exploringjs.com/es6/ch_iteration.html

11. Почему классы JavaScript считаются плохими или антипаттернами?

Это миф? Страдает ли он синдромом китайского шепота? Есть ли какие-нибудь варианты использования, в которых они могут быть полезны?

Ответ: Я не думаю, что достаточно квалифицирован, чтобы ответить на этот вопрос :)

12. Как сериализовать следующий объект в JSON?

Что произойдет, если мы преобразуем следующий объект в строку JSON?

const a = {
    key1: Symbol(),
    key2: 10
}
// What will happen?
console.log(JSON.stringify(a));

Ответ: Все ключевые свойства _43 _ полностью игнорируются, даже при использовании функции replacer.

{ "key2" : 10 } // the output of the above statement

Используя также функцию replacer (которая может быть функцией для замены значения), мы видим, что для числового типа значение было увеличено, а для Symbol ничего не делает.

function replacer(key, value) {
   if (typeof value === 'symbol') {
     return Symbol.for('apple');
   } else if (typeof value === 'number') {
     return value + 1;
   }
   return value;
}
const a = {
   key1: Symbol('apple'),
   key2: 10
}
console.log(JSON.stringify(a, replacer)); // {"key2":11}

ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

13. Вы знакомы с типизированными массивами? Если да, объясните их необходимость и отличия от традиционных массивов в JavaScript?

Ответ: Ссылка на StackOverflow объясняет это лучше, чем я писал.

использованная литература:

  1. Https://stackoverflow.com/questions/13328658/are-the-advantages-of-typed-arrays-in-javascript-is-that-they-work-the-same-or-s
  2. Http://2ality.com/2015/09/typed-arrays.html

14. Как работает аргумент по умолчанию?

Если нам нужно использовать значение по умолчанию timeout при вызове функции makeAPIRequest, каков правильный синтаксис?

function makeAPIRequest(url, timeout = 2000, headers) {
   // Some code to fetch data
}

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

15. Объясните TCO - Оптимизация хвостового вызова. Есть ли какой-нибудь движок JavaScript, поддерживающий оптимизацию хвостового вызова?

Подсказка: по состоянию на 2018 год их нет.

Ответ: Лично я знал только, что C ++ выполняет оптимизацию хвостовых вызовов. По-видимому, есть другие языки, такие как Scheme.

Проще говоря, TCO позволяет компилятору «не выделять» пространство в стеке, когда функция возвращает то же значение, что и при получении.

Цитата из StackOverflow: «Оптимизация хвостового вызова - это когда вы можете избежать выделения нового кадра стека для функции, потому что вызывающая функция просто вернет значение, которое она получает от вызываемой функции. Чаще всего используется хвостовая рекурсия, когда рекурсивная функция, написанная для использования преимуществ оптимизации хвостового вызова, может использовать постоянное пространство стека ».

ссылки: https://stackoverflow.com/questions/310974/what-is-tail-call-optimization

Отказ от ответственности: я не предполагаю, что написал все эти ответы, просто собрал данные из нескольких источников :)

Ссылки на каждый фрагмент кода и статьи приведены под самими ответами.