前端开发实习笔试题（编程题）

你的名字 2023-03-04 06:56 39阅读 0赞

**目录**

1.用JS写一个快速排序算法

2.用JS写出两个数组合并成一个数组排序返回（输入： \[5,2,10\] \[9,1\]    输出： \[1,2,5,9,10\]）

3.用JS实现防抖函数（短时间内多次触发同一事件，只执行最后一次）和节流函数（指连续触发事件但是在n秒中只执行一次函数）

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

5.编写一个函数，统计输入的字符串里面各字符的字数。例如参数是“abbaddab”输出结果为a:3,b:3,d:2

6.用HTML画出下面布局，要求在不同分辨率下比例保持不变

7.写一个JS类继承的例子

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

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

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

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

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

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

14.用JS写一个冒泡排序算法

15.如何判断一个对象是否为数组

--------------------

## 1.用JS写一个快速排序算法 ##

**采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边**

快速排序：特点是用空间换时间，快速排序是一种不稳定的排序，理想情况每一次都将待排序数组划分成等长两个部分，则需要logn次划分，快速排序时间复杂度下界为O(nlogn)，最坏情况是当把已经有序的序列在进行快速排序，快速排序时间复杂度上界为O(n\*n)和冒泡排序一样（可以采用随机快速排序来改善），快速排序的平均时间复杂度为O(nlogn)；空间复杂度S(logn)，由于快速排序采用是递归，所以需要注意的是递归栈上需要花费最小logn和最多n的空间（最坏情况下）；

## 2.用JS写出两个数组合并成一个数组排序返回（输入： \[5,2,10\] \[9,1\]    输出： \[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的原型链如何实现继承，请写出一个例子 ##

![20200804014829940.png][]

*  B继承A，x是B的实例，所以x也继承A，可以调用A中的属性和方法。

## 5.编写一个函数，统计输入的字符串里面各字符的字数。例如参数是“abbaddab”输出结果为a:3,b:3,d:2 ##

## 6.用HTML画出下面布局，要求在不同分辨率下比例保持不变 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

## 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宽，高度顶满，左边撑开顶满剩余位置 ##

<html>
    <head>
      <style>
            *{
                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;
            }
      </style>
    </head>
    <body>
        <div class="wrapper">
            <nav></nav>
            <article></article>
        </div>
    </body>
    </html>

## 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<Dep>
    };
    
    function composeTree(depList: Array<Dep>) {
      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设计一个页面的结构显示如下表格数据 ##

![20200823034639560.png][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>表格</title>
    		<style>
    			*{
    				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;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="first">
    			<div class="one">
    				<div class="div1">序号</div>
    				<div class="div1">班级</div>
    				<div class="div1">性别</div>
    				<div class="div1">课程</div>
    				<div class="div1">分数</div>
    				<div class="div1">年份</div>
    			</div>
    			<div class="two">
    				<div class="div1">1</div>
    				<div class="div1">二班</div>
    				<div class="div1">男</div>
    				<div class="div1">数学</div>
    				<div class="div1">46</div>
    				<div class="div1">2014</div>
    			</div>
    			<div class="three">
    				<div class="div1">2</div>
    				<div class="div1">一班</div>
    				<div class="div1">女</div>
    				<div class="div1">英语</div>
    				<div class="div1">67</div>
    				<div class="div1">2013</div>
    			</div>
    			<div class="four">
    				<div class="div1">3</div>
    				<div class="div1">一班</div>
    				<div class="div1">男</div>
    				<div class="div1">数学</div>
    				<div class="div1">78</div>
    				<div class="div1">2014</div>
    			</div>
    		</div>
    	</body>
    </html>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>布局2</title>
    		<style>
    			*{
    				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;
    			}
    		</style>
    	</head>
    	<body>
    		<header></header>
    		<div class="container">
    			<nav>左边</nav>
    			<aside>右边</aside>
    			<article>利用五个条件(斜率、 Pinbar、 箱体、RSI、 顶底背离)的叠加使用，精确点位，做到客观理性准确入场，再结合仓位控制分布式进场，大幅提高交易胜率!更有配套课程技术指标小课，帮助学员熟练掌握核心指标的使用</article>
    		</div>
    		<footer></footer>
    	</body>
    </html>

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

<!DOCTYPE html>
    <html>
    	<head>
    		<title>三列布局</title>
    		<style>
    			*{
    				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;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrapper">
    			<nav>1</nav>
    			<aside>2</aside>
    			<article>3</article>
    		</div>
    	</body>
    </html>

## 14.用JS写一个冒泡排序算法 ##

**每次比较相邻的两个数，如果前一个比后一个大，换位置**

冒泡排序：特点是用时间换空间，只考虑比较的次数的话，它是时间复杂度是O(n\*n);空间复杂度S(1)；

## 15.如何判断一个对象是否为数组 ##

function isArray(arg) {
      if (typeof arg === 'object') {
        return Object.prototype.toString.call(arg) === '[object Array]';
      }
      return false;
    }

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

[前端][Link 1]开发交流QQ群：761614159

求职[前端][Link 1]开发的小伙伴可以进群交流一下！

[20200804014829940.png]: /images/20230208/f3f2f499c8a24ac89042f3fa0b48a38d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20230208/47ba2f457e0b46c384d175f42dfffe72.png
[20200823034639560.png]: /images/20230208/503383b58766462dba82a0c06df728dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20230208/f7ed8e26033a496e827bed6db71c690c.png
[Link 1]: https://www.nowcoder.com/jump/super-jump/word?word=%E5%89%8D%E7%AB%AF