前端开发实习笔试题（编程题）
⽬录
1.⽤JS写⼀个快速排序算法
采⽤⼆分法，取出中间数，数组每次和中间数⽐较，⼩的放到左边，⼤的放到右边
function quickSort(arr){
if(arr.length === 0){
return [];
}
var left = [];
var right = [];
var pivot = arr[0];
for(var i = 1; i < arr.length; i++){
if(pivot >= arr[i]){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat(pivot,quickSort(right));
}
var a = [1,2,3,8,-4,-6,1];
console.log(quickSort(a));//[-6, -4, 1, 1, 2, 3, 8]
快速排序：特点是⽤空间换时间，快速排序是⼀种不稳定的排序，理想情况每⼀次都将待排序数组划分成等长两个部分，则需要logn次划分，快速排序时间复杂度下界为O(nlogn)，最坏情况是当把已经有序的序列在进⾏快速排序，快速排序时间复杂度上界为O(n*n)和冒泡排序⼀样（可以采⽤随机快速排序来改善），快速排序的平均时间复杂度为O(nlogn)；空间复杂度S(logn)，由于快速排序采⽤是递归，所以需要注意的是递归栈上需要花费最⼩logn和最多n的空间（最坏情况下）；
2.⽤JS写出两个数组合并成⼀个数组排序返回（输⼊： [5,2,10] [9,1] 输出： [1,2,5,9,10]）
function quickSort(arr){
if(arr.length === 0){
return [];
}
var left = [];
var right = [];
var pivot = arr[0];
for(var i = 1; i < arr.length; i++){
if(pivot >= arr[i]){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat(pivot,quickSort(right));
}
let a = [5,2,10];
web前端开发笔试题库let b = [9,1]
let c = a.concat(b)
console.log(c);
console.log(quickSort(c));//[1,2,5,9,10]
3.⽤JS实现防抖函数（短时间内多次触发同⼀事件，只执⾏最后⼀次）和节流函数（指连续触发事件但是在n秒中只执⾏⼀次函数）
防抖函数：持续触发事件时，在设定时间段内没有被触发，才去调⽤事件处理函数，在设定时间段内如果事件⼜被触发，则不调⽤事件处理函数，并从触发事件时间重新开始延时。
设计思路：在setTimeout中调⽤事件处理函数，如果在定时器触发函数执⾏之前⼜触发函数，清除定时器。
具体实现：
function debounce(fn, timeout){
timeout = timeout || 1000;
let timer;
return () => {
if(timer){ clearTimeout(timer)}
timer = setTimeout(() => {
fn()
},timeout)
}
}
function printEvent(){
console.log('1121212')
}
window.addEventListener('scroll',debounce(printEvent,1000),false)
节流函数：当事件被持续触发时，在设定时间内只让事件处理函数触发⼀次。
定时器实现模式：定时器在延时时间执⾏过后，重置为null, 定时器为null时，重新设置定时器，如此循环。
function throttle(fn, range){
range = range || 1000;
let timer;
return () => {
//console.log(111,typeof timer)
if(!timer){
timer = setTimeout( () => {
fn()
timer = null
},range)
}
}
}
window.addEventListener('mousemove',throttle(printEvent,1000),false)
时间戳实现模式：初始化时获取时间，每次触发事件时再次获取时间，两次时间间隔等于或⼤于设定时间，执⾏事件，初始化时间重置为当前时间，如此循环。
//节流函数时间戳模式
var throttle2 = function(func, delay) {
var prev = w();
return function() {
var context = this;
var args = arguments;
var now = w();
if (now - prev >= delay) {
func.apply(context, args);
prev = w();
}
}
}
总结：
函数防抖：在⽆事件触发后的设定时间执⾏事件，将⼏次操作合并为⼀此操作进⾏。这样⼀来，只有最后⼀次操作能被触发。
函数节流：使得⼀定时间内只触发⼀次函数。原理是通过判断是否到达⼀定时间来触发函数。
区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内⼀定会执⾏⼀次真正的事件处理函数，⽽函数防抖只是在最后⼀次事件后才触发⼀次函数。
⽐如在页⾯的⽆限加载场景下，我们需要⽤户在滚动页⾯时，每隔⼀段时间发⼀次 Ajax 请求，⽽不是在⽤户停下滚动页⾯操作时才去请求数据。这样的场景，就适合⽤节流技术来实现。
4.JS的原型链如何实现继承，请写出⼀个例⼦
function A(){
this.name="KaYo";
}
Name=function(){
return this.name;
}
function B(){
this.age=21;
}
B.prototype=new A();
//⼦类型有时候需要重写超类型中的某个⽅法，或者需要添加母类型中不存在的某个⽅法。但不管怎
样，给原型添加⽅法的代码⼀定要放在替换原型的语句之后。
Age=function(){
return this.age;
}
var x=new B();
console.Name());
console.Age());
B继承A，x是B的实例，所以x也继承A，可以调⽤A中的属性和⽅法。
5.编写⼀个函数，统计输⼊的字符串⾥⾯各字符的字数。例如参数是“abbaddab”输出结果为a:3,b:3,d:2
var str = 'abbaddab';
//⽤来存储不重复的字符串
var newStr = '';
//字符串去重将不重复的字符串存储到⼀个新的字符串内
//将每⼀个字符单独提出来
for (var i = 0; i < str.length; i++) {
//判断有没有在newStr中出现过没有出现过放到newStr内
if (newStr.lastIndexOf(str[i]) == -1) {
newStr += str[i];
}
}
// console.log(newStr);//abbaddab
for (var i = 0; i < newStr.length; i++) {
var count = 0;
for (var j = 0; j < str.length; j++) {
//判断元素是否相等如果相等则次数加1
if(newStr[i]==str[j]){
count++;
}
}
console.log(newStr[i]+":"+count);
}
6.⽤HTML画出下⾯布局，要求在不同分辨率下⽐例保持不变
7.写⼀个JS类继承的例⼦
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论