предисловие
После Фестиваля фонарей я отправился в Шанхай искать работу, и теперь я уже присоединился к этой работе. Я написал волну записей интервью. Содержание включает в себя письменные тестовые вопросы и вопросы для интервью. Я не писал это, это очень медленно пишет. Если вам это нравится, вы можете поставить лайк или обратить внимание, я надеюсь, что вы сможете получить что-то после прочтения этой статьи.
следовать за
Предварительные письменные вопросы теста и запись вопросов интервью (ниже)
Вопрос. При каких обстоятельствах вы столкнетесь с междоменными проблемами? Каковы решения?
- Проблема перекрестного происхождения вызвана политикой одного и того же происхождения, реализованной браузерами для обеспечения безопасности, которая ограничивает доступ из разных источников.
document,脚本, что означает гомологичноеДоменное имя, протокол и порт двух URL-адресов должны быть одинаковыми. - Тег скрипта jsonp cross-domain, обратный прокси-сервер nginx, междоменный прокси-сервер промежуточного программного обеспечения node.js, серверная часть устанавливает имя домена безопасности в информации заголовка, а серверная часть устанавливает cors на сервере.
В: Как определить, является ли переменная объектом или массивом?
Существует несколько методов оценки массивов и объектов соответственно.prototype.toString.call()Совместимость лучшая.
function isObjArr(value){
if (Object.prototype.toString.call(value) === "[object Array]") {
console.log('value是数组');
}else if(Object.prototype.toString.call(value)==='[object Object]'){//这个方法兼容性好一点
console.log('value是对象');
}else{
console.log('value不是数组也不是对象')
}
}
пс:Никогда не используйте typeof для определения объектов и массивов, так как оба типа возвращают "object".
Q: Порядок выполнения или механизм таймера.
Этот вопрос часто задают: кто-то спросит механизм таймера напрямую, а кто-то спросит порядок выполнения через письменный тестовый вопрос, а потом спросит меня, почему это так.
Короче говоря, нам нужно помнить следующее:Поскольку js является однопоточным, браузер сталкивается сsetTimeoutилиsetIntervalТекущий блок кода будет выполнен первым, перед этим таймер будет помещен в очередь событий браузера для выполнения, после того как браузер завершит выполнение текущего кода, он проверит, есть ли задачи в очереди событий, и выполнить, если они есть Код для таймера.Таким образом, даже если время таймера установлено на 0, текущий код будет выполнен первым.
Выше каштан, который я написал.Если вам не ясно, вы можете прочитать эту статью, которую я написал ранее.Механизм цикла событий Js (Event Loop) и объяснение примера.
В: В чем разница между атрибутом title и атрибутом alt в html?
Этот вопрос задавался один раз, на тот момент я только помнил, что атрибут alt используется для тега img, при неудаче изображения будет отображаться содержимое в атрибуте alt, а title используется для обозначения заголовка страницы В то время интервьюер спросил меня, есть ли у меня еще другие отличия. Я. . .
Затем я нашел статью для чтения, и я получил немного больше осанки:
1.<img src="#" alt="alt信息" />
//1.当图片不输出信息的时候，会显示alt信息 鼠标放上去没有信息，当图片正常读取，不会出现alt信息
2.<img src="#" alt="alt信息" title="title信息" />
// 2.当图片不输出信息的时候，会显示alt信息 鼠标放上去会出现title信息
//当图片正常输出的时候，不会出现alt信息，鼠标放上去会出现title信息
Также есть некоторые сведения об атрибуте title:
title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签
title属性的功能是提示。额外的说明信息和非本质的信息请使用title属性。title属性值可以比alt属性值设置的更长
title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。
Q: Стандартная блочная модель против странной блочной модели IE
Этот вопрос в основном будет появляться на письменных тестовых вопросах, таких как:
<div style="width:100px;height="100px;border:10px;padding:10px;"></div>
Какова ширина этого блока в рамках стандартной модели блока w3c и странной модели блока IE?
标准盒子模型：总宽度=content100px+border 10px*2+padding 10px*2 //140px
怪异盒子模型: 总宽度=content60px+ border 10px*2+padding 10px*2 //100px
пс:
box-sizing： content-box || border-box；//css3 box-sizing设置为border-box将使用怪异盒子模型
当怪异盒子的宽度小于border+padding的宽度的时候，content width将变为0，盒子的宽度会被border和padding的总宽度撑开
В чем разница между наследованием ES5 и наследованием ES6?
Наследование ES5 реализовано через механизм прототипа или конструктора.Наследование в ES5 по сути заключается в создании экземпляра объекта подкласса, а затем добавлении к этому методу суперкласса.(Родитель.применить(это)).
Механизм наследования ES6 совершенно другой,По сути, объект экземпляра this родительского класса создается первым (поэтому сначала должен быть вызван метод super() родительского класса), а затем конструктор подкласса используется для изменения этого.
В частности: ES6 определяет классы через ключевое слово class, у которого есть конструктор, и наследует между классами через ключевое слово extends. Подкласс должен вызвать метод super в методе конструктора, иначе новый экземпляр сообщит об ошибке. Потому что подкласс не имеет своего объекта this, а наследует объект this родительского класса, а затем обрабатывает его. Если суперметод не вызывается, подкласс не может получить этот объект.
ps: ключевое слово super относится к экземпляру родительского класса, то есть к объекту this родительского класса. В конструкторе подкласса ключевое слово this можно использовать только после вызова super, иначе будет сообщено об ошибке.
В: Каковы новые свойства CSS3?
这里可以分为边框、背景，渐变，阴影、2D转换 3D转换等之类的来说。
比如：边框(border-radius、border-shadow、border-image)之类的 。
Подробнее см. в учебнике для новичков:Ссылка на сайт. Подобные проблемы с зеркалированием и новые атрибуты HTML5, вы можете сами погуглить.
В: Какие коды статуса http вы знаете?
1xx：1开头的是信息状态码
2xx：2开头的是请求成功
3xx：3开头的是重定向
4xx：4开头的是客户端错误
5xx：5开头的是服务器错误
Вопрос не сложный, встречался с ним в письменном тесте и на собеседовании, кстати, аналогичную статью я уже резюмировал ранее.статья.
Q: Как дедуплицировать массив?
Этот вопрос поднимался несколько раз, и многие интервьюеры не удовлетворены тем, что вы можете указать только один или два варианта ответа.
1,Установить дедупликацию структуры.
Это новая структура данных Set, предоставляемая ES6. Он похож на массив, но все значения членов уникальны и нет повторяющихся значений.
let unique= [...new Set(array)];
//es6 Set数据结构类似于数组，成员值是唯一的，有重复的值会自动去重。
//Set内部使用===来判断是否相等，类似'1'和1会两个都保存，NaN和NaN只会保存一个
2. Проходим, добавляем значения в новый массив,Используйте indexOf(), чтобы определить, существует ли значение, если оно уже существует, оно не будет добавлено., для достижения эффекта дедупликации.
let a = ['1','2','3',1,NaN,NaN,undefined,undefined,null,null, 'a','b','b'];
let unique= arr =>{
let newA=[];
arr.forEach(key => {
if( newA.indexOf(key)<0 ){ //遍历newA是否存在key，如果存在key会大于0就跳过push的那一步
newA.push(key);
}
});
return newA;
}
console.log(unique(a)) ;//["1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"]
//ps:这个方法不能分辨NaN,会出现两个NaN。是有问题的，下面那个方法好一点。
3. Перейдите, добавьте значение массива к имени свойства объекта и присвойте значение свойству,Объекты не могут добавлять одно и то же имя свойства, на основе этого можно добиться дедупликации массива., затем используйтеObject.keys(对象)Возвращает массив перечисляемых свойств этого объекта, который является дедуплицированным массивом.
let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b'];
const unique = arr => {
var obj = {}
arr.forEach(value => {
obj[value] = 0;//这步新添加一个属性，并赋值，如果不赋值的话，属性会添加不上去
})
return Object.keys(obj);//`Object.keys(对象)`返回这个对象可枚举属性组成的数组，这个数组就是去重后的数组
}
console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]
Уведомление:
Этот метод преобразует число, NaN, undefined, null,в строковую форму, потому что имя свойства объекта является строкой, Приходите в соответствии с вашими потребностями, подумайте о самом простом и эффективном способе дедупликации.
В: Какие существуют методы вертикального центрирования?
- Для однострочного текста вы можете использовать
height和line-heightУстановите одинаковую высоту. -
position+margin: установить родительский элемент:position: relative;, дочерний элементheight: 100px; position:absolute;top: 50%; margin: -50px 0 0 0;(фиксированная высота) -
position+transform: установить родительский элементposition:relative, дочерний элемент:position: absolute;top: 50%;transform: translate(0, -50%);(не фиксированная высота) - Дикий гибкий макет (т.е. 10+), установите родительский элемент
display:flex;align-items: center;(не фиксированная высота)
Подобных много.В практических приложениях может использоваться один или два метода.Если интересно,можете прочитать эту статью.статья
Q: Перевернуть строку
Эта проблема в основном встречается в письменных тестовых вопросах.Идея состоит в том, чтобы сначала преобразовать строку в массив, а затем использовать массивreverse()+join()метод.
let str="hello word";
let b=[...str].reverse().join("");//drow olleh
следовать за
Предварительные письменные вопросы теста и запись вопросов интервью (ниже)
резюме
Что я хочу сказать: Во время поиска работы должны быть проблемы, которые вы не можете выполнить хорошо или нет. Вы должны изучить и обобщить это самостоятельно на ночь. Старайтесь не свалиться дважды на проблему. Это его собственное.
Выше приведено краткое изложение некоторых проблем, возникших в недавнем интервью.На самом деле, есть еще некоторые проблемы, которые не были написаны.Я давно не писал статьи, и пишу очень медленно и немного утомительно. Сначала установите флаг для себя и напишите его на следующей неделе. Я надеюсь, что вы, ребята, сможете что-то извлечь из этой статьи, спасибо за чтение.
Я надеюсь, что друзья, которые прочитали это, могут поставить лайк или подписаться на меня.Ваша поддержка - самая большая поддержка для меня.
Передовое расширенное накопление,публика,GitHub
Выше 2018.3.18
Ссылка на ссылку:
CSS — стандартная блочная модель и странная блочная модель
Сборник общих вопросов для собеседования по алгоритму js, реализация es6