Когда интервью сложное, вам нужно знать эти вопросы интервью

внешний интерфейс опрос

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

Это сезон прыжков с работы из золота, девятки, серебра, десяти, чтобы позволить большему количеству друзей стать лучше во время интервью.offer, Так что с прошлого месяца я буду задавать один или два вопроса для интервью каждый день в своем общедоступном аккаунте [Некоторые игры во внешнем интерфейсе], обычно известные как один вопрос в день (один пит в день). Небольшим партнерам, ищущим работу, удобно каждый день получать новые урожаи. В этой статье редактор разобрался с некоторыми из наиболее классических ежедневных вопросов на ранней стадии.Приглашаем всех взглянуть. Содержание этой статьи было впервые опубликовано в публичном аккаунте [некоторая игра во внешнем интерфейсе], обратите внимание===учить.

Массив вопросов, связанных с классом интервью

Что такое массив, подобный массиву, массив, подобный массиву, должен иметьlengthОбъект, другие свойства (индексы) которого являются неотрицательными целыми числами и не имеет методов, используемых массивами. такие как наши обычно используемыеdocument.querySelectorAllвернутьNodeListsпредставляет собой массив классов. Этот вопрос связан с контентом, подобным массиву.

тема

Пожалуйста, скажите, что выводит следующий код, вам нужно различатьnodejs,chromeтак же какchromeУдалитьspliceвывод после

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

Отвечать

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

  1. nodeСледующий вывод

    { '2': 1,
  '3': 2,
  length: 4,
  splice: [Function: splice],
  push: [Function: push] }

  2. chromeСледующий вывод

    [empty × 2, 1, 2, splice: ƒ, push: ƒ]

  3. chromeУдалитьspliceСледующий вывод

    {2: 1, 3: 2, length: 4, push: ƒ}

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

отвечать

Прежде чем ответить на вопрос, давайте еще раз посмотрим на этот код

const arr = new Array(2)
// 输出  2 [empty * 2]
console.log(arr.length, arr)
arr.push(1)
// 输出  3 [empty * 2, 1]
console.log(arr.length, arr)

можно увидетьpushметод преобразует массивlength + 1, затем поместите значение в index какlength - 1позицию, такую ​​как приведенный выше код, потому что при инициализации массива длина массива была указана как2, так что вpushПозжеlengthэто становится3,Потомarr[3 - 1] = 1

существуетMDNлицевой стороной вверхpushОбъяснение метода таково:

pushМетод универсальный. этот метод иcall()илиapply()При совместном использовании может применяться к массивоподобным объектам.pushметод согласноlengthсвойство, чтобы решить, где начать вставку данного значения. еслиlengthне может быть преобразовано в значение, индекс вставленного элемента равен 0, в том числеlengthкогда его не существует. когдаlengthКогда его нет, он будет создан.

согласно сMDNобъяснять,pushМожет использоваться в массиве, массив может использоваться в классе. В соответствии с интерпретацией вышеизложенного типа массива, можно увидеть в заголовкеobjстандартный массив классов, то вы можетеobjиспользуя массивы вышеpushметод.

посмотри сноваobj.push(1), потому чтоobj.length = 2, так будетlength + 1это становится3, на этот раз, когда значение индексаobj[3 - 1] = 1которыйobj[2] = 1, по аналогииobj.push(2)То же самое. Потому чтоobjУже есть свойство (индекс) в2а также3, так что вpushбудет перезаписан, когда2а также3Значение по умолчанию выше.

так вnodejsбудет выводить

{ '2': 1,
  '3': 2,
  length: 4,
  splice: [Function: splice],
  push: [Function: push] }

Но когдаchromeвывод в консоль

[empty × 2, 1, 2, splice: ƒ, push: ƒ]

Очень странно, почему так выводится? В этом произведении есть особая ловушка,chromeКак консоль определяет, является ли напечатанное содержимое массивом или другим объектом? За это,chromeЭто путем оценки того, имеет ли объектspliceа такжеlengthЭти два свойства оцениваются, поэтому, если выspliceПосле удаления выдает следующее

{2: 1, 3: 2, length: 4, push: ƒ}

Вы также можете попробовать следующий код:

console.log({splice:function(){},length:1})
console.log({slice:function(){},length:1})

Логические вопросы на собеседовании: мыши пьют яд

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

тема

Есть 16 бутылок с водой, из которых только одна бутылка воды ядовитая Мыши умрут в течение часа после того, как выпьют одну каплю Сколько мышей нужно использовать хотя бы, чтобы найти ядовитую воду за 1 час?

Ответы и решения

Ответ по крайней мере4Мышь, как ты это понимаешь? Мы можем использовать двоичный код, чтобы рассуждать об этом:

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

Первый:1111 1111 0000 0000

Второй:1111 0000 1111 0000

С:1100 1100 1100 1100

Дин:1010 1010 1010 1010

Тогда мы можем судить о следующем:

  1. A, B, C и D мертвы, что указывает на то, что первая бутылка ядовита.
  2. A, B и C мертвы, что указывает на то, что вторая бутылка ядовита.
  3. A-D-D мертв, что указывает на то, что третья бутылка ядовита.
  4. A и B мертвы, что указывает на то, что четвертая бутылка ядовита.
  5. Мепродин мертв, что указывает на то, что пятая бутылка ядовита.
  6. . . . И так далее

На самом деле, для этой проблемы вы можете использовать2изnЕсли судить по мощности, например, есть32бутылка воды, затем2из5мощность, поэтому нам нужно5мышь.

вопросы интервью аргументы

существуетES6В середине, если параметр функции не уверен, мы обычно используем оператор расширения.function(...rest){}, получить массив параметровrest,Но когдаES6Раньше мы не могли использовать оператор спреда, поэтому нам нужно подумать об использованииarguments

тема

Скажите, пожалуйста, что выводит следующая программа (вывод chrome)

let obj = {
  age: 18,
  foo: function(func) {
    func()
    arguments[0]()
  }
}

var age = 10
function fn() {
  console.log(this.age)
}

obj.foo(fn)

Отвечать

Ответ на этот вопрос:

// 第一个输出 10
func()
// 第一个输出 undefined
arguments[0]()

Немного неожиданно?

Объясним первый, почему бы не вывести18Ну, хотяfunc()вfooФункция вызывается, но область действия явно не указана, в этом случае будет использоваться область действия по умолчаниюwindow, а для браузера глобально черезvarОбъявленные переменные автоматически монтируются вwindowвыше, такvar age = 10эквивалентноwindow.age = 10, в то время как первыйfunc()внутриthis.ageэквивалентноwindow.age

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

const arr = [function() {console.log(this[1])}, '我是子君']
// 输出 我是子君
console.log(arr[0]())

мы проходимarr[0]Получите функцию, в настоящее время областью действия функции является этот массив, поэтому при повторном вызовеthisто естьarr, такthis[1]является вторым элементом в массиве.

Теперь оглянисьarguments, На самом деле это массив классов, в котором хранятся параметры, переданные функцией. Первый элемент — это переданная функция, как и в приведенном выше примере.arguments[0]Область примененияarguments,а такжеargumentsвышеизложенное неageсобственность, такundefined

это указывает на проблему

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

Тема 1 (Бронза)

Скажите, что выводит следующий код

var num = 1;
let obj = {
    num: 2,
    add: function() {
        this.num = 3;
        (function() {
            console.log(this.num);
            this.num = 4;
        })();
        console.log(this.num);
    },
    sub: function() {
        console.log(this.num)
    }
}
obj.add();
console.log(obj.num);
console.log(num);
const sub = obj.sub;
sub();

Тема 2 (Золото)

Скажите, что выводит следующий код

var num = 10
const obj = {num: 20}
obj.fn = (function (num) {
  this.num = num * 3
  num++
  return function (n) {
    this.num += n
    num++
    console.log(num)
  }
})(obj.num)
var fn = obj.fn
fn(5)
obj.fn(10)
console.log(num, obj.num)

Отвечать

Тема 1

Выходной результат:1,3,3,4,4, вы правильно поняли? Давайте взглянем на анализ кода

var num = 1;
let obj = {
    num: 2,
    add: function() {
        this.num = 3;
      	// 这里的立即指向函数，因为我们没有手动去指定它的this指向，所以都会指向window
        (function() {
            // 所有这个 this.num 就等于 window.num
            console.log(this.num);
            this.num = 4;
        })();
        console.log(this.num);
    },
    sub: function() {
        console.log(this.num)
    }
}
// 下面逐行说明打印的内容

/**
 * 在通过obj.add 调用add 函数时，函数的this指向的是obj,这时候第一个this.num=3
 * 相当于 obj.num = 3 但是里面的立即指向函数this依然是window,
 * 所以 立即执行函数里面console.log(this.num)输出1，同时 window.num = 4
 *立即执行函数之后，再输出`this.num`,这时候`this`是`obj`,所以输出3
 */
obj.add() // 输出 1 3

// 通过上面`obj.add`的执行，obj.name 已经变成了3
console.log(obj.num) // 输出3
// 这个num是 window.num
console.log(num) // 输出4
// 如果将obj.sub 赋值给一个新的变量，那么这个函数的作用域将会变成新变量的作用域
const sub = obj.sub
// 作用域变成了window window.num 是 4
sub() // 输出4
тема вторая

Результат:22 23 65 30, вы правильно поняли? Давайте проанализируем это

var num = 10
const obj = {num: 20}
obj.fn = (function (num) {
  this.num = num * 3
  num++
  return function (n) {
    this.num += n
    num++
    console.log(num)
  }
})(obj.num)
var fn = obj.fn
fn(5)
obj.fn(10)
console.log(num, obj.num)

Разобьем приведенный выше код на следующие шаги для анализа

  1. Сначала посмотрите на третью строку кода, которая представляет собой операцию присваивания.Мы знаем, что операция присваивания выполняется справа налево, и=Правая часть числа — это функция немедленного выполнения, поэтому функция немедленного выполнения будет выполняться первой, а функция немедленного выполнения не указывается вручную.this,В этот моментthis = window, а параметр непосредственной функцииnumбыл принят вobj.num,такnumЗначение параметра по умолчанию:20

  2. Четвертая строка эквивалентнаwindow.num = 20 * 3

  3. Пятая строка добавляет единицу к входящему параметру, поэтомуnum = 20 + 1

  4. шестой рядreturnфункция, и эта функцияobj.fnценность, а потомуreturnФункция ссылается на немедленно выполняемую функцию внутриnum, так что замыкание формируется. В этот момент

    obj.fn = function(n) {
  this.num += n
  // 这个num是立即执行函数里面的num
  num++
  console.log(num)
}

  5. var fn = obj.fn, Будуobj.fnприсваивается новой переменной, область действия которойwindow

  6. вызовfn(5)когда на втором шагеwindow.numЗначение стало60, то потому что на этот разfnизthisдаwindow, this.num += nэквивалентноwindow.num += n, которыйwindow.num = 65

  7. num++, из-за замыкания, третий шагnumда21, поэтому этот шагnumстал22, при выводе22

  8. потомobj.fn(10),В этот моментfnизthisдляobj,obj.numЗначение по умолчанию20, this.num += nэквивалентноobj.num += 10

  9. Как и в шаге 7,num + 1выход23

  10. console.log(num, obj.num)эквивалентноconsole.log(window.num, obj.num), Видно из приведенных выше шагов,window.num = 65, obj.num = 30.

расширенный вопрос

Если два вышеуказанных вопросаvarизменить наlet, что будет на выходе?

проблема преобразования типа данных

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

Тема (жареный король / бронза, я не знаю)

Скажите, что выводит следующий код

console.log([] + [])
console.log({} + [])
console.log([] == ![])
console.log(true + false)

Отвечать

Давайте посмотрим ответ вместе

  1. первая строка кода
// 输出 "" 空字符串
console.log([] + [])

Эта строка кода выводит пустую строку"", когда тип оболочки работает, он сначала вызоветvalueOfМетод, еслиvalueOfВозврат по-прежнему является типом оболочки, затем снова вызовитеtoStringметод

// 还是 数组
const val = [].valueOf()
// 数组 toString 默认会将数组各项使用逗号 "," 隔开, 比如 [1,2,3].toSting 变成了"1,2,3",空数组 toString 就是空字符串
const val1 = val.toString() // val1 是空字符串

Таким образом, приведенный выше код эквивалентен

console.log("" + "")

  1. вторая строка кода

    // 输出 "[object Object]"
console.log({} + [])

    Как и в случае с первым вопросом, объект{}неявно преобразуется в[object Object]Тогда с""добавить

  2. третья строка кода

    // 输出 true
console.log([] == ![])

    для===, будет строго сравнивать два значения, но для==это не одно и то же

    1. Напримерnull == undefined
    2. если неnumberа такжеnumberсравнения, он будет преобразован вnumber
    3. Если одна из двух сторон сравненияboolean, то первыйbooleanПеревести вnumber

    Итак, для приведенного выше кода посмотрите на следующий пошаговый анализ.

    // 这个输出 false
console.log(![])
// 套用上面第三条 将 false 转换为 数值
// 这个输出 0
console.log(Number(false))
// 包装类型与 基本类型 == 先将包装类型通过 valueOf toString 转换为基本类型 
// 输出 ""
console.log([].toString())
// 套用第2条， 将空字符串转换为数值、
// 输出 0
console.log(Number(""))
// 所以
console.log(0 == 0)

  3. четвертая строка кода

    // 输出 1
console.log(true + false)

    Добавьте два базовых типа, если один из них является символом, другой преобразуйте в символьное сложение, в противном случае преобразуйте тип вNumber, а затем сложить,Number(true)да1, Number(false)да0, так что результат1

Суммировать

Интервью, чтобы построить ракеты, работать, чтобы закрутить винты. Хотя я просто хочу закручивать гайки, мне нужно найти работу по завинчиванию шурупов, строя ракеты. Каждый день задается один вопрос, и каждый день появляются новые вопросы для интервью. Добро пожаловать, чтобы обратить внимание на общедоступный номер [Front-end some play], втяните вас в группу по коммуникациям передовых технологий, один вопрос в день ждет вас, чтобы ответить на вопрос вместе.

Эпилог

Не истощайте свое вдохновение и воображение, не будьте рабом своих моделей. - Винсент Ван Гог

Категории