26 тщательно отобранных вопросов для интервью по JavaScript

Переводчик пресса:Мы выбрали 26 вопросов с разных платформ, чтобы помочь вам пройти собеседование.

• оригинал:Top 26 JavaScript Interview Questions I Wish I Knew
• Переводчик:Fundebug

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

Согласно ежегодному отчету Stack Overflow за 2018 год, JavaScript является самым часто используемым языком программирования в течение 6 лет подряд. Можно сказать, что для full-stack инженера JavaScript — обязательный язык, о котором всегда спрашивают на собеседованиях. я разобралсяFullStack.CafeВсе общие вопросы интервью JavaScript выше для вашей справки:

Q1: Что такое преобразование типов в JavaScript?

Тема: JavaScript Сложность: 0

В JavaScript преобразование между двумя разными типами называетсяcoercion. В JavaScript есть две формы: явное преобразование и неявное преобразование.

Вот пример, показывающий преобразование:

var a = "42";
var b = Number( a );
a;              // "42"
b;              // 42 -- the number!

Вот пример неявного преобразования:

var a = "42";
var b = a * 1;  // "42" implicitly coerced to 42 here
a;              // "42"
b;              // 42 -- the number!

источник:FullStack.Cafe

Q2: Что такое область видимости в JavaScript?

Тема: JavaScript Сложность: ⭐

В JavaScript каждая функция имеет свою область видимости (scope). Область действия можно понимать как набор переменных и соответствующих правил доступа к ним. Только переменные внутри функции могут получить доступ к переменным в домене функции.

В пределах одной области имена переменных должны быть уникальными. Области могут быть вложенными. В самой внутренней области можно получить доступ к переменным в любой внешней области.

Q3: Пожалуйста, объясните решение о равенстве в JavaScript

Тема: JavaScript Сложность: ⭐

В JavaScript есть два типа оценки равенства: строгое суждение и суждение с неявным преобразованием:

• строгое суждение (строгое сравнение): напр.===, тип не будет неявно преобразовываться при сравнении;
• Абстрактное суждение: например==, тип неявно преобразуется при сравнении.

var a = "42";
var b = 42;

a == b;         // true
a === b;        // false

Несколько простых правил:

• Если обе стороны являются логическими значениями, используйте===;
• Если обе стороны равны 0,"",[],использовать===;
• Для всех остальных типов используйте==безопасно. И во многих случаях это упрощает код и повышает читабельность.

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

Тема: JavaScript Сложность: ⭐⭐

Функция обратного вызова — это функция, которая передается в качестве параметра другой функции, которая вызывается после завершения какой-либо операции. Ниже приведен простой пример, когда массив изменяется, функция обратного вызова вызывается для печати строки журнала.

function modifyArray(arr, callback) {
  // do something to arr here
  arr.push(100);
  // then execute the callback function that was passed
  callback();
}

var arr = [1, 2, 3, 4, 5];
modifyArray(arr, function() {
  console.log("array has been modified", arr);
});

Q5: Что такое использование "строгого использования"?

Тема: JavaScript Сложность: ⭐⭐

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

function doSomething(val) {
  "use strict"; 
  x = val + 10;
}

Поскольку x не определен, если используетсяuse strict, x не рассматривается как глобальная переменная. Следующий код исправляет эту ошибку:

function doSomething(val) {
  "use strict"; 
  var x = val + 10;
}

Q6: Пожалуйста, объясните Null и Undefined

Тема: JavaScript Сложность: ⭐⭐

JavaScript и TypeScript имеют два основных типаnullиundefined. Их значения различны:

• Если он не был инициализирован, тоundefined;
• Если он недоступен, вы можете использоватьnullПредставлять;

Q7: Пожалуйста, реализуйте следующие функции

Тема: JavaScript Сложность: ⭐⭐

var addSix = createBase(6);
addSix(10); // returns 16
addSix(21); // returns 27

addSixЯвляется функцией, то есть возврат функции createBase является функцией.

function createBase(baseNumber) {
  return function(N) {
    // we are referencing baseNumber here even though it was declared
    // outside of this function. Closures allow us to do this in JavaScript
    return baseNumber + N;
  }
}

var addSix = createBase(6);
addSix(10);
addSix(21);

Q8: Пожалуйста, объясните значения и типы в JavaScript

Тема: JavaScript Сложность: ⭐⭐

Ниже приведены доступные типы, встроенные в JavaScript:

• string
• number
• boolean
• нулевой и неопределенный
• object
• символ (новый синтаксис для ES6)

Q9: Объясните, пожалуйста, всплывающую подсказку событий и как ее остановить?

Тема: JavaScript Сложность: ⭐⭐

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

Один из способов предотвратить появление всплывающих окон — использоватьevent.stopPropagation(), используется в браузерах с IEevent.cancelBubble.

function stopPropagation(evt) {
    if (typeof evt.stopPropagation === "function") {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

источник:github.com/kennymkchan

Вопрос 10. Объясните, пожалуйста, ключевое слово let в JavaScript.

Тема: JavaScript Сложность: ⭐⭐

ES6 позволяет вам объявить область действия блока с помощью ключевого слова let ({...}) Переменные.

источник:github.com/getify

Q11: Как проверить, является ли число целым?

Тема: JavaScript Сложность: ⭐⭐

Один из самых простых способов — определить, равен ли остаток после деления на 1 0.

function isInt(num) {
  return num % 1 === 0;
}

console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

источник:coderbyte.com

Q12: Что такое IIFE (немедленно вызываемые функциональные выражения)?

Тема: JavaScript Сложность: ⭐⭐

IIFE называются немедленно выполняемыми выражениями, и, как следует из названия, выражение выполняется, как только оно создается.

(function IIFE(){
    console.log( "Hello!" );
})();
// "Hello!"

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

источник:stackoverflow.com

Q13: Как сравнить два объекта в JavaScript?

Тема: JavaScript Сложность: ⭐⭐

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

Если массив сравнивается со строкой, массив преобразуется в строку путем объединения запятых. При оценке по знаку равенства два одинаковых массива не будут равны, но будут равны при сравнении со строками одинаковых данных.

var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";

a == c;     // true
b == c;     // true
a == b;     // false

Если вам нужно более глубокое сравнение, вы можете использовать стороннюю библиотеку, напримерdeep-equalИли вы можете реализовать алгоритм сравнения самостоятельно.

Q14: Пожалуйста, объясните разницу между ES5 и ES6.

Тема: JavaScript Сложность: ⭐⭐⭐

• ECMAScript 5 (ES5): 5-я версия ECMAScript, стандартизированная в 2009 году. Этот стандарт полностью поддерживается практически всеми браузерами.
• ECMAScript 6 (ES6)/ECMAScript 2015 (ES2015): шестая версия ECMAScript, стандартизированная в 2015 году. В настоящее время основные браузеры поддерживают его лишь частично.

Ниже описаны их основные отличия:

• Стрелочные функции и встраивание строк:

const greetings = (name) => {
      return `hello ${name}`;
}

четное:

const greetings = name => `hello ${name}`;

• Объявление константы (Const): аналогично константам в других языках программирования, но отличается. здесьconstпредставляет собойconstant reference. То есть вы можете изменить значение объекта, на который он указывает. Но вы не можете изменить значение его ссылки.

const NAMES = [];
NAMES.push("Jim");
console.log(NAMES.length === 1); // true
NAMES = ["Steve", "John"]; // error

• Переменные с областью действия блока: новое ключевое слово в ES6letРазрешить позволяет разработчикам ограничивать переменные на уровне блоков. не какvarТо же, что и переменное продвижение.
• Значение параметра по умолчанию: позволяет указать значение по умолчанию при определении функции.

// Basic syntax
function multiply (a, b = 2) {
     return a * b;
}
multiply(5); // 10

• Определение класса и наследование

ES6 поддерживает определение классов (используяclassключевое слово), конструктор (с использованиемconstructorключевые слова) иextendключевое слово для реализации наследования.

• для операции

for...ofоператор используется для итеративного доступа ко всем свойствам объекта.

• Оператор распространения: для слияния объектов

const obj1 = { a: 1, b: 2 }
const obj2 = { a: 2, c: 3, d: 4}
const obj3 = {...obj1, ...obj2}

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

const isGreater = (a, b) => {
  return new Promise ((resolve, reject) => {
    if(a > b) {
      resolve(true)
    } else {
      reject(false)
    }
    })
}
isGreater(1, 2)
  .then(result => {
    console.log('greater')
  })
 .catch(result => {
    console.log('smaller')
 })

• Экспорт и импорт модулей.

const myModule = { x: 1, y: () => { console.log('This is ES5') }}
export default myModule;

import myModule from './myModule';

источник:Bulby.io

Q15: Пожалуйста, объяснитеundefinedиnot definedразница

Тема: JavaScript Сложность: ⭐⭐⭐

В JavaScript, если вы попытаетесь использовать несуществующую переменную, которая не была объявлена, JavaScript выдаст ошибкуvar name is not defined. Но если вы используетеtypeofчтобы увидеть его тип, он вернетundefined.

Давайте сначала проясним разницу между объявлением и определением:var xявляется объявлением, потому что вы не определяете его конкретное значение, вы просто объявляете о его существовании.

var x; // declaring x
console.log(x); //output: undefined

var x = 1И объявление, и определение, мы также можем назвать это инициализацией. В JavaScript каждое объявление переменной и функции поднимается вверх.

Если мы получим доступ к объявленной, но неопределенной переменной, она вернетundefined.

var x; // Declaration
if(typeof x === 'undefined') // Will return true

При доступе к необъявленной неопределенной переменной возвращается неопределенная ошибка.

console.log(y);  // Output: ReferenceError: y is not defined

источник:stackoverflow.com

Q16: В чем разница между анонимной функцией и именованной функцией?

Тема: JavaScript Сложность: ⭐⭐⭐

var foo = function() { // anonymous function assigned to variable foo
    // ..
};

var x = function bar(){ // named function (bar) assigned to variable x 
    // ..
};

foo(); // actual function execution
x();

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

Q17: Что такое замыкание в JavaScript? Пожалуйста, приведите пример

Тема: JavaScript Сложность: ⭐⭐⭐⭐

Закрытие — это функция, определенная внутри другой функции (родительской функции), которая имеет доступ к переменным внутри родительской функции. Замыкания имеют доступ к следующим трем областям:

• собственный объем
• родительская область
• глобальная область

var globalVar = "abc";

// Parent self invoking function
(function outerFunction (outerArg) { // begin of scope outerFunction
  // Variable declared in outerFunction function scope
  var outerFuncVar = 'x';    
  // Closure self-invoking function
  (function innerFunction (innerArg) { // begin of scope innerFunction
    // variable declared in innerFunction function scope
    var innerFuncVar = "y";
    console.log(         
      "outerArg = " + outerArg + "\n" +
      "outerFuncVar = " + outerFuncVar + "\n" +
      "innerArg = " + innerArg + "\n" +
      "innerFuncVar = " + innerFuncVar + "\n" +
      "globalVar = " + globalVar);
  // end of scope innerFunction
  })(5); // Pass 5 as parameter
// end of scope outerFunction
})(7); // Pass 7 as parameter

innerFunctionявляется замыканием, определенным вouterFunction, он может получить доступouterFunctionВсе переменные в области видимости. Конечно, он также может обращаться к глобальным переменным.

Результат выглядит следующим образом:

outerArg = 7
outerFuncVar = x
innerArg = 5
innerFuncVar = y
globalVar = abc

источник:github.com/ganqqwerty

Q18: Как создать приватные переменные в JavaScript?

Тема: JavaScript Сложность: ⭐⭐⭐⭐

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

function func() {
  var priv = "secret code";
}

console.log(priv); // throws error

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

function func() {
  var priv = "secret code";
  return function() {
    return priv;
  }
}

var getPriv = func();
console.log(getPriv()); // => secret code

источник:coderbyte.com

Q19: Пожалуйста, объясните шаблон проектирования прототипа

Тема: JavaScript Сложность: ⭐⭐⭐⭐

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

источник:dofactory.com

Q20: Определите, является ли данная строка изоморфной

Тема: JavaScript Сложность: ⭐⭐⭐⭐

Сначала введем то, что называется гомоморфизмом: две строки, если каждый символ строки А может найти однозначное соответствие в строке В, а порядок — взаимно однозначное соответствие; если такая функция есть, то А и В равны гомоморфный .

• paperиtitleгомоморфизм
• eggиsadдругое состояние
• dggиaddгомоморфизм

isIsomorphic("egg", 'add'); // true
isIsomorphic("paper", 'title'); // true
isIsomorphic("kick", 'side'); // false

function isIsomorphic(firstString, secondString) {

  // Check if the same length. If not, they cannot be isomorphic
  if (firstString.length !== secondString.length) return false

  var letterMap = {};

  for (var i = 0; i < firstString.length; i++) {
    var letterA = firstString[i],
        letterB = secondString[i];

    // If the letter does not exist, create a map and map it to the value
    // of the second letter
    if (letterMap[letterA] === undefined) {
      letterMap[letterA] = letterB;
    } else if (letterMap[letterA] !== letterB) {
      // Eles if letterA already exists in the map, but it does not map to
      // letterB, that means that A is mapping to more than one letter.
      return false;
    }
  }
  // If after iterating through and conditions are satisfied, return true.
  // They are isomorphic
  return true;
}

источник:github.com/kennymkchan

Q21: TranspilingЧто это означает?

Тема: JavaScript Сложность: ⭐⭐⭐⭐

Transpilingдаtransforming + compilingсоставные слова. Для некоторого нового синтаксиса браузер еще не поддерживает его. Лучший способ сделать это — преобразовать его в старый эквивалентный код, процесс, обычно называемыйtranspiling.

Как правило, вы можетеbuildв процессе добавленияtranspiler,какcode linterиminifierТакой же.

Уже доступно много известных транспиляторов:

• Babel: компилировать ES6 в ES5
• Traceur: скомпилируйте ES6, ES7 и т. д. в ES5.

источник:You Don't Know JS, Up &going

Q22: thisКак работают ключевые слова? Пожалуйста, приведите несколько примеров

Тема: JavaScript Сложность: ⭐⭐⭐⭐

В JavaScript это всегда указывает на «владельца» функции (то есть на объект, который указывает на функцию) или на объект, которому принадлежит функция.

function foo() {
    console.log( this.bar );
}

var bar = "global";

var obj1 = {
    bar: "obj1",
    foo: foo
};

var obj2 = {
    bar: "obj2"
};

foo();          // "global"
obj1.foo();     // "obj1"
foo.call( obj2 );  // "obj2"
new foo();       // undefined

источник:quirksmode.org

Q23: Как добавить пользовательскую функцию в объект Array, чтобы следующий код мог нормально работать.

Тема: JavaScript Сложность: ⭐⭐⭐⭐

var arr = [1, 2, 3, 4, 5];
var avg = arr.average();
console.log(avg);

JavaScript — это язык, основанный на прототипах. То есть объекты связаны прототипом и наследуют свои функции. Чтобы добавить функции к объекту Array, мы можем изменить определение его прототипа.Array prorotype.

Array.prototype.average = function() {
  // calculate sum
  var sum = this.reduce(function(prev, cur) { return prev + cur; });
  // return sum divided by number of elements
  return sum / this.length;
}

var arr = [1, 2, 3, 4, 5];
var avg = arr.average();
console.log(avg); // => 3

источник:coderbyte.com

Q24: Что означает подъем в JavaScript?

Тема: JavaScript Сложность: ⭐⭐⭐⭐

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

• переменное продвижение
• функция подъема

Переменные и функции, объявленные в одной области видимости, доступны во всей области видимости.

var a = 2;
foo();                 // works because `foo()`
                         // declaration is "hoisted"

function foo() {
    a = 3;
    console.log( a );   // 3
    var a;             // declaration is "hoisted"
                         // to the top of `foo()`
}

console.log( a );   // 2

Несмотря на то чтоfoo()Функции определяются позже, но могут быть вызваны и раньше.

Q25: Какой результат вернет следующий код?

Тема: JavaScript Сложность: ⭐⭐⭐⭐

0.1 + 0.2 === 0.3

Не удивляйтесь, результат ложный. Из-за точности чисел с плавающей запятой в системе результат 0,1+0,2 равен не 0,3, а 0,300000000000000004. Чтобы избежать этой проблемы, укажите количество знаков после запятой в возвращаемом результате.

источник:coderbyte.com

Q26: Пожалуйста, опишите шаблон раскрывающегося модуля

Тема: JavaScript Сложность: ⭐⭐⭐⭐⭐

Module patternВариант естьRevealing Module Pattern. Целью этого шаблона проектирования является достижение хорошей изоляции кода и предоставление внешнего мира только тех переменных и функций, которые должны быть доступны. Простая реализация выглядит так:

var Exposer = (function() {
  var privateVariable = 10;

  var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
  }

  var methodToExpose = function() {
    console.log('This is a method I want to expose!');
  }

  var otherMethodIWantToExpose = function() {
    privateMethod();
  }

  return {
      first: methodToExpose,
      second: otherMethodIWantToExpose
  };
})();

Exposer.first();        // Output: This is a method I want to expose!
Exposer.second();       // Output: Inside a private method!
Exposer.methodToExpose; // undefined

источник:scotch.io

О Фундебаге

FundebugСосредоточьтесь на JavaScript, апплете WeChat, мини-игре WeChat, апплете Alipay, React Native, Node.js и мониторинге ошибок онлайн-приложений Java в режиме реального времени. С момента официального запуска Double Eleven в 2016 году Fundebug обработал в общей сложности более 1 миллиарда ошибок, а платными клиентами являются Google, 360, Kingsoft, People.com и многие другие бренды. приветствую всехБесплатная пробная версия!

Уведомление об авторских правах

Пожалуйста, указывайте автора при перепечаткеFundebugИ адрес этой статьи:
ошибка blog.fun.com/2018/10/18/…