前端开发JS白板编程题目若干
在前端开发参加面试的时候,无论是校招还是社招,往往都会碰到让我们直接在白纸或者白板上手撸代码的题目。由于是手撸代码,这些题目肯定不会过于复杂和冗长,否则面试那么一小会时间根本写不完。本文总结了几个我本人在面试中碰到的小问题,暂且记录下来以供后人参考吧。
1. 实现throttle函数。
throttle函数即节流函数,在underscore和lodash这两个库中都有对应的实现。其实现的效果就是在给定的时间间隔内,函数最多只能执行1次。例如有函数A,设定其时间间隔为10s,如果在第0秒的时候已经执行了函数A,然后在第5秒的时候想要再次执行函数A的话,不会立即执行,而是等待5秒钟再执行。在第7秒的时候想要再次触发函数A,则第5秒那个函数A直接取消,第7秒这个函数A等待3秒钟后执行。这样保证了每个10秒钟的区间内,函数A只能执行1次。
var throttle = function (func, wait) {
var timeout = null; // setTimeout的返回值
var previous = 0; // 上次执行此函数的时间 return function () {
var now = new Date();
var remaining = wait - (now - previous); // 距离设定的时间间隔还剩多少时间
var context = this;
var args = arguments; // 清除已经设定的定时器,如果timeout=null,则这下面句没有任何效果
clearTimeout(timeout); // 现在距离上次执行已经超过了设定间隔,直接执行该函数
if (remaining <= 0) {
previous = now;
timeout = null;
func.apply(context, args);
return;
} // 还没到时间间隔就再次想执行,则清除之前设置的定时器,重设定时器等待一段时间后执行函数
timeout = setTimeout(function () {
previous = now;
timeout = null;
func.apply(context, args);
}, remaining);
};
};
2. 实现debounce函数。
debounce即防抖函数。可参考underscore或lodash库对此函数的实现。如果函数A防抖并且时间间隔为10秒,那么当想要执行函数A时,不会立即执行而是等待10秒之后再执行。如果第5秒又想要执行函数A了,那第10秒要执行的A直接被取消,而是重新开始10秒计时,也就是等到第15秒才会执行函数A。debounce常见的场景就是搜索引擎的实时搜索联想,在你向搜索框输入文字的过程中,为了避免频繁地调用后端接口,必须等待输入完成,间隔一小段时间没有新的输入时,再去调用后台接口获取搜索联想词。
var debounce = function (task, wait) {
var timeout = null;
return function () {
var context = this;
var arg = arguments;
clearTimeout(timeout);
timeout = setTimeout(function () {
task.apply(context, arg);
}, wait);
}
};
3. 假设目前已经有函数$ajax,主要功能是向后台发送一个请求,结果以Promise方式返回,如$ajax(option).then(successCb).catch(failCb),其中successCb和failCb分别是成功和失败时候的回调函数。请实现一个函数myAjax,返回值依然是Promise,但要求加入重试功能,该函数内部依然是使用$ajax实现,只不过在$ajax失败一次之后间隔1秒钟再重试1次,再失败再隔1秒后重试,直到重试到第5次,如果全都失败了,那myAjax所返回的Promise则reject,只要有任意一次成功,则停止重试,直接resolve。
var myAjax = (function () {
var failCount = 0; return function (option) {
return new Promise((resolve, reject) => {
$ajax(option).then(() => {
failCount = 0;
resolve();
}).catch(() => {
failCount++;
if (failCount >= 5) {
failCount = 0;
reject();
return;
}
setTimeout(function () {
myAjax(option).then(() => {
resolve();
}).catch(() => {
reject();
});
}, 1000);
})
})
}
})();
4. 实现wait函数,即延迟执行某函数,使用方法为wait(1000).then(myFunction),即等到1秒钟之后执行myFunction。
var wait = function (time) {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve();
}, time);
})
};
5. 编写一个函数,将嵌套的数组转化成扁平的数组,例如:输入 [1, 2, 3, [4, 5, [6]], [6, 8] ],输出 [1, 2, 3, 4, 5, 6, 6, 8]。
var flatten = function (arr) {
let result = [];
for (let val of arr) {
if (Array.isArray(val)) {
result.push(...flatten(val));
} else {
result.push(val);
}
}
return result;
}
6. 编写一个函数,输入一个字符串,将字符串中第一个只出现一次的字符返回。不存在的话返回false。
思路:如果某个字符在字符串中只出现了一次,那么该字符在字符串里面的第一次出现和最后一次出现的位置是一样的,利用String.prototype.indexOf和String.prototype.lastIndexOf求出一个字符在字符串里面第一次出现和最后一次出现的位置,判断是否相等来决定是否只出现了一次。如下:
var uniqueChar = function (str) {
let len = str.length;
for (let i = 0; i < len; i++){
let chr = str[i];
if (i === str.lastIndexOf(chr)){
return chr;
}
}
return false;
}
不过上面这个算法有个小瑕疵,就是时间复杂度是O(n^2),并不算太高效。本着用空间换时间的办法,我们可以换一种思路,先遍历一次字符串,期间以每个字符为hash的key,hash的value为该字符出现的次数。这样一次遍历下来就构建完成了一个hash表,然后再遍历一次,查看每个字符在hash表里面的value是不是1,如果是1,则停止遍历直接返回该字符。
var uniqueChar = function (str) {
let obj = {};
for (let i = 0; i < str.length; i++) {
let chr = str[i];
if (obj.hasOwnProperty(chr)) {
obj[chr] ++;
} else {
obj[chr] = 1;
}
} for (let i = 0; i < str.length; i++) {
let chr = str[i];
if (obj[chr] === 1) {
return chr;
}
} return false;
}
7. 随便找一个Array.prototype里面的方法,自己手动实现一下。
连接若干个数组的concat方法:
Array.prototype.concat = function () {
var result = [...this];
for (var i = 0; i < arguments.length; i++) {
if (Array.isArray(arguments[i])) {
result.push(...arguments[i]);
} else {
result.push(arguments[i]);
}
}
return result;
}
前端开发JS白板编程题目若干的更多相关文章
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
- ES6 常用总结(前端开发js技术进阶提升总结)
一.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数的最顶部就在全局作用域的最顶部).这就是函数变量提升例如: 不用关心 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...
- Web前端开发--JS技术大梳理
什么是JS JavaScript是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语 ...
- 前端开发JS——数组
25.数组 1)声明数组: ①构造函数创建数组 var arr = new Array(); console.log(arr): //[] var arr = new Array(2 ...
- 前端开发JS——引用类型
10.流程控制语句 注:var obj = {}:这里的obj转换boolean语句为true if语句和java是一样的,判断条件也是根据上篇博客提到的假性值 // 弹出一个带输入框的 ...
- 前端开发JS——快速入门
1.JS的核心标准ECMAScript 组成 ECMAScript------>核心语法标准 DOM------------->对文档节点的操作 ...
- 前端开发 —— js 常用工具函数(utilities)
1. 时间 function getCurTime() { var date = new Date(); return date.toLocaleTimeString(); } date.toLoca ...
随机推荐
- CentOS7+CDH5.14.0安装全流程记录,图文详解全程实测-总目录
CentOS7+CDH5.14.0安装全流程记录,图文详解全程实测-总目录: 0.Windows 10本机下载Xshell,以方便往Linux主机上上传大文件 1.CentOS7+CDH5.14.0安 ...
- 使用Spring Cache缓存出现的小失误
前文:今天在使用Spring Boot项目使用Cache中出现的小失误,那先将自己创建项目的过程摆出来 1.首先创建一个Spring Boot的项目(我这里使用的开发工具是Intellij IDEA) ...
- HashMap、Hashtable、ConcurrentHashMap的原理与区别(简述)
HashTable 底层数组+链表实现,无论key还是value都不能为null,线程安全,实现线程安全的方式是在修改数据时锁住整个HashTable,效率低,ConcurrentHashMap做了相 ...
- PowerDesigner反向生成PDM和name与注释互换
Option Explicit ValidationMode = True InteractiveMode = im_Batch Dim mdl 'the current model 'get the ...
- node 单个表加条件查询
export const getTeacher = query => { const wh = model.query(qb => { qb.where('isNoLectur ...
- window下mongodb的安装和环境搭建
一.下载安装包或者压缩包 1.下载 mongodb官网社区版下载页面 开发者一般使用社区版即可 3.6.3版本仅支持64位版本 2.安装 mongo compass是一个图形界面管理工具,安装过程非常 ...
- python数据库进阶
第1节 MySQL基础 一,说明 1,认识MySQL与创建用户 MySQL是最流行的关系型数据库管理系统之一,由瑞典MySQL AB公司开发,目前属于Oracle公司.MySQL是一种关联数据管理系统 ...
- 密码与安全新技术专题之AI与密码
20189217 2018-2019-2 <密码与安全新技术专题>第五周作业 课程:<密码与安全新技术专题> 班级: 1892 姓名: 李熹桥 学号:20189214 上课教师 ...
- 面向对象(特殊成员 组合 self)
- H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作
今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...