Письменная часть JavaScript
В этой статье представлены 12 часто задаваемых вопросов на собеседовании по JavaScript, включая рукописный ввод и часто используемые регулярные выражения.
Реализовать функцию debounce (дебаунс)
Принцип работы функции защиты от встряски: Обратный вызов выполняется через n секунд после срабатывания события, и если он снова сработает в течение n секунд, таймер будет перезапущен.
Тогда отличие от функции дросселирования можно непосредственно увидеть в этой реализации анимации.
Рукописная упрощенная версия
//防抖函数
const debounce = (fn,delay)=>{
let timer = null;
return (...args)=>{
clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,args)
},delay);
};
};
Применимая сцена:
- Сценарий отправки кнопки: запретите отправку нескольких кнопок и выполните последнюю отправку только один раз.
- Сценарий проверки на стороне сервера: проверка формы требует взаимодействия на стороне сервера, выполняется только последнее время непрерывного события ввода, а функция поиска ассоциативных слов аналогична
Для среды обитания используйте lodash.debounce.
Реализовать функцию дроссельной заслонки (throttle)
Принцип работы антивибрационной функции: оговаривается в единицу времени. Функция может быть запущена только один раз. Если функция запускается несколько раз в течение этого времени, только один из них вступит в силу.
//рукописная упрощенная версия
//节流函数
const throttle = (fn,delay = 500) =>{
let flag = true;
return (...args) =>{
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this,args)
},delay);
};
};
Применимая сцена:
- Сцена перетаскивания: она выполняется только один раз в фиксированное время, чтобы предотвратить изменение положения сверхвысокочастотного запуска.
- Сценарий Zoom: изменение размера браузера монитора
- Сцена анимации: избегайте проблем с производительностью, вызванных многократным запуском анимации за короткий промежуток времени.
глубокий клон
Простая версия:
const newObj = JSON.parse(JSON.stringify(oldObj));
Ограничения: 1. Он не может клонировать специальные объекты, такие как функции и RegExp.
2. Конструктор объекта будет отброшен, и все конструкторы будут указывать на объект
3. Объект имеет циклическую ссылку, и будет сообщено об ошибке
Реализовать событие (шина событий)
Шина событий является не только краеугольным камнем каждого модуля в узле, но и одним из зависимых средств взаимодействия интерфейсных компонентов, а также включает шаблон проектирования подписка-публикация, который является очень важной основой.
Простая версия:
class EventEmeitter {
constructor(){
this._events = this._events || new Map(); //储存事件/回调键值对
this._maxListeners = this._maxListeners || 1o;//设立监听上限
}
}
//触发名为type的事件
EventEmeitter.prototype.emit = function(type,...args){
let hander;
//从储存事件键值对的this._events中获取对应事件回调函数
handler = this._events.get(type);
if (args.length > 0) {
hander.apply(this,args);
}else{
handler.call(this);
}
return true;
};
//监听名为type事件
EventEmeitter.prototype.addListener = function(type,fn) {
//将type事件以及对应的fn函数放入this._events中储存
if (!this._events.get(type)) {
this._events.set(type,fn);
}
};
Реализовать instanceOf
//模拟 instanceof
function instance_of(L,R){
var O = R.prototype;//取 R 的显示原型
L = L.__proto__;//取 L 的隐式原型
while (true) {
if (L === null) return false;
if (O === L)
// 这里重点 ： 当 O 严格等于 L 时，返回 true
return true;
L = L.__proto__;
}
}
имитировать новый
Новый оператор делает следующее:
- он создает совершенно новый объект
- Будет выполнен [[Prototype]] (он же __proto__) ссылка
- это указывает на вновь созданный объект
- Каждый объект, созданный new, в конечном итоге будет связан с объектом-прототипом этой функции с помощью [[Prototype]]
- Если функция не возвращает объект типа Object (включая Function, Array, Date, RegExg, Error), то вызов функции в новом выражении вернет ссылку на объект
// objectFactory(name,'cxk','18')
function objectFactory(){
const obj = new object();
const Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype;
const ret = Constructor.apply(obj,arguments);
return typeof ret === "object" ? ret : obj;
}
реализовать вызов
Что делает вызов:
- Сделать функцию свойством объекта
- выполнить и удалить эту функцию
- Укажите это для функции и передайте данные параметры для выполнения функции.
- Если параметр не передан, точкой по умолчанию является окно
//模拟 call bar.mycall(null);
//实现一个call方法；
Function.prototype.myCall = function(context){
//此处没有考虑context非object情况
context.fn = this;
let args = [];
for (let i = 1,len = arguments.length,i < len; i++){
args.push(arguments[i]);
}
context.fn(...args);
let result = context.fn(...args);
delete context.fn;
return result;
};
Реализовать метод применения
Принцип применения очень похож на принцип призыва, и мастифов не так много.
//模拟 apply
Function.prototype.myapply = function(context,arr){
var context = Object(context) || window;
context.fn = this;
var result;
if (!arr){
result = context.fn();
}else{
var args = [];
for (var i = 0,len = arr.length;i < len; i++){
args.push("arr["+ i +"]");
}
result = eval("context.fn("+ args + ")");
}
delete context.fn;
return result;
}
реализовать привязку
Что сделать, чтобы реализовать привязку
- Возвращает функцию, привязывает ее и передает предустановленные параметры
- Функция, возвращаемая bind, может использоваться как конструктор. Следовательно, как конструктор, это должно быть недействительным, но переданные параметры все еще действительны.
// mdn的实现
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
// this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用
return fToBind.apply(this instanceof fBound
? this
: oThis,
// 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
aArgs.concat(Array.prototype.slice.call(arguments)));
};
// 维护原型关系
if (this.prototype) {
}
// 下行的代码使fBound.prototype是fNOP的实例,因此
// 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
fBound.prototype = new fNOP();
return fBound;
};
}
详解请移步JavaScript深入之bind的模拟实现 #12
模拟Object.create
Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
// 模拟 Object.create
function create(proto) {
function F() {}
F.prototype = proto;
return new F();
}
макет Object.create
Метод Object.create() создает новый объект, используя существующий объект для предоставления __proto__ вновь созданного объекта.
// 模拟 object.create
function create(proto){
function F(){
F.prototype = proto;
return new F();
}
}
Разобрать параметры URL как объект
let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 结果
{ user: 'anonymous',
id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
city: '北京', // 中文需解码
enabled: true, // 未指定值得 key 约定为 true
}
*/
Преобразовать в CamelCase
var s1 = "get-element-by-id"
//转化为 getElementById
var f = function(s){
return s.replace(/-\w/g,function(x){
return x.slice(1).toUpperCase();
})
}