html5编程题,前端开发实习笔试题（编程题）（持续更新）

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]

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];

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 = Date.now();

return function() {

var context = this;

var args = arguments;

var now = Date.now();

if (now - prev >= delay) {

func.apply(context, args);

prev = Date.now();

}

}

}

总结：

函数防抖：在无事件触发后的设定时间执行事件，将几次操作合并为一此操作进行。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

4.JS的原型链如何实现继承，请写出一个例子

function A(){

this.name="KaYo";

}

A.prototype.getName=function(){

return this.name;

}

function B(){

this.age=21;

}

B.prototype=new A();

//子类型有时候需要重写超类型中的某个方法，或者需要添加母类型中不存在的某个方法。但不管怎

样，给原型添加方法的代码一定要放在替换原型的语句之后。

B.prototype.getAge=function(){

return this.age;

}

var x=new B();

console.log(x.getName());

console.log(x.getAge());

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类继承的例子

// 定义父类

function Fclass(name,age){

this.name=name;

this.age=age;

}

Fclass.prototype.showname=function(){

alert(this.name);

}

Fclass.prototype.showage=function(){

alert(this.age);

}

// 定义子类

function Sclass(name,age,job){

// 改变指针对象，属性用call或者apply的方式来继承

Fclass.call(this,age,job);

this.job=job;

}

// 方法继承：将父类的实例 赋值给 子类的原型属性

Sclass.prototype=new Fclass();

Sclass.prototype.showjob=function(){

alert(this.job);

}

var p1=new Sclass('KaYo',21,'程序员');

p1.showjob();

8.下面函数执行后，console输出什么

for (var i = 0;i < 5;i++) {

setTimeout(function () {

console.log(new Date, i);

}, 1000);

}

console.log(new Date, i);

答案：5 5 5 5 5 5(六个5)

因为同步队列的for循环bai执行完成才轮到异步队du列， 每一次for循环zhi的时候，settimeout都执行dao一次，但是里面的function(闭包函数)没有被执行，而是被放到了任务队列里面，等待执行，当i累加到5的时候跳出循环。此时全局只有一个变量i=>5，所以打印出来都是5。

setTimeout是异步执行的，1000毫秒后向任务队列里添加一个任务，只有主线上的全部执行完才会执行任务队列里的任务，所以当主线程for循环执行完之后 i 的值为5，这个时候再去任务队列中执行任务，i全部为5；

每次for循环的时候setTimeout都会执行，但是里面的function则不会执行被放入任务队列，因此放了5次；for循环的5次执行完之后不到1000毫秒；

1000毫秒后全部执行任务队列中的函数，所以就是输出五个5啦

假如把var换成let，那么输出结果为0,1,2,3,4；

因为let  i  的是区块变量，每个i只能存活到大括号结束，并不会把后面的for循环的  i  值赋给前面的setTimeout中的i；而var i  则是局部变量，这个 i 的生命周期不受for循环的大括号限制；

9.用css实现一个左右布局，右边固定300px宽，高度顶满，左边撑开顶满剩余位置

*{

margin: 0;

padding: 0;

}

.wrapper{

height: 100%;

background-color: lightskyblue;

}

nav{

background-color: green

height: 100%;

width: 300px;

float: right;

*zoom: 1;

}

article{

background-color: red;

height: 100%;

margin-right: 300px;

}

10.实现convert方法，把原始list转换成树形结构

以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下：

// 原始 list 如下

let list =[

{id:1,name:'部门A',parentId:0},

{id:2,name:'部门B',parentId:0},

{id:3,name:'部门C',parentId:1},

{id:4,name:'部门D',parentId:1},

{id:5,name:'部门E',parentId:2},

{id:6,name:'部门F',parentId:3},

{id:7,name:'部门G',parentId:2},

{id:8,name:'部门H',parentId:4}

];

const result = convert(list, ...);

// 转换后的结果如下

let result = [

{

id: 1,

name: '部门A',

parentId: 0,

children: [

{

id: 3,

name: '部门C',

parentId: 1,

children: [

{

id: 6,

name: '部门F',

parentId: 3

}, {

id: 16,

name: '部门L',

parentId: 3

}

]

},

{

id: 4,

name: '部门D',

parentId: 1,

children: [

{

id: 8,

name: '部门H',

parentId: 4

}

]

}

]

},

···

];

更简单, 时间复杂度更低的解法：

export {}

let list =[

{id:1,name:'部门A',parentId:0},

{id:2,name:'部门B',parentId:0},

{id:3,name:'部门C',parentId:1},

{id:4,name:'部门D',parentId:1},

{id:5,name:'部门E',parentId:2},

{id:6,name:'部门F',parentId:3},

{id:7,name:'部门G',parentId:2},

{id:8,name:'部门H',parentId:4}

];

interface Dep {

id: number,

name: string,

parentId: number,

children?: Array

};

function composeTree(depList: Array) {

const depMap = new Map();

depList.forEach(d => depMap.set(d.id, d));

for (const d of depList) {

const parentId = d.parentId;

if (depMap.has(parentId)) {

const parentDep = depMap.get(parentId);

parentDep.children = parentDep.children || [];

parentDep.children.push(d);

}

}

// filter head list

depList.sort((a, b) => a.parentId - b.parentId);

const [{ parentId }] = depList;

const rootDepList = depList.filter(dep => dep.parentId === parentId);

return rootDepList;

}

const res = composeTree(list);

console.log(`${JSON.stringify(res)}`);

11. 请用CSS+div+HTML设计一个页面的结构显示如下表格数据

表格

*{

margin: 0;

padding: 0;

}

.first{

margin: 20px;

/* border: 1px solid #000000; */

}

.one,.two,.three,.four{

width: 100%;

height: 30px;

}

.div1{

width: 16.5%;

height: 28px;

text-align: center;

line-height: 28px;

float: left;

border: 1px solid #000;

}

序号

班级

性别

课程

分数

年份

1

二班

男

数学

46

2014

2

一班

女

英语

67

2013

3

一班

男

数学

78

2014

12.你怎么来实现下面这个设计图，主要讲述思路：

布局2

*{

margin: 0;

padding: 0;

}

header{

width: 950px;

height: 100px;

background-color: blue;

}

.container{

width: 950px;

height: 400px;

margin: 5px 0;

/* clear: both; */

}

nav{

float: left;

width: 230px;

height: 400px;

background-color: green;

}

aside{

float: right;

width: 230px;

height: 400px;

background-color: green;

}

article{

width: 470px;

height: 400px;

margin: 0 auto;

background-color: yellow;

}

footer{

width: 950px;

height: 80px;

background-color: blue;

}

左边

右边

利用五个条件(斜率、 Pinbar、 箱体、RSI、 顶底背离)的叠加使用，精确点位，做到客观理性准确入场，再结合仓位控制分布式进场，大幅提高交易胜率!更有配套课程技术指标小课，帮助学员熟练掌握核心指标的使用

13.CSS如何实现三列布局(左右固定宽度，中间自适应)？

三列布局

*{

margin: 0;

padding: 0;

height: 100%;

}

.wrapper{

height: 100%;

background-color: lightskyblue;

}

nav{

height: 100%;

width: 250px;

float: left;

background-color: green

}

aside{

height: 100%;

width: 250px;

float: right;

background-color: yellow

}

article{

height: 100%;

margin: 0 auto;

background-color: red;

}

1

2

3

以上皆是本人目前在广州找实习期间(到现在还没找到)亲身经历过的笔试题中的编程题，部分答案源于网上，如有错漏或有更好的答案欢迎大家指出，仅作为笔记收录使用，也衷心希望各位能少走弯路，能够找到自己心仪的工作！