算法面试题3

分类：前端面试题作者：编程之家用户

前端面试中的常见的算法问题

虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。

Q1 判断一个单词是否是回文？

回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情趣，叫做回文，也叫回环。比如 mamam redivider .

很多人拿到这样的题目非常容易想到用for 将字符串颠倒字母顺序然后匹配就行了。其实重要的考察的就是对于reverse的实现。其实我们可以利用现成的函数，将字符串转换成数组，这个思路很重要，我们可以拥有更多的自由度去进行字符串的一些操作。

function checkPalindrom(str) {  
    return str == str.split('').reverse().join('');
}

Q2 去掉一组整型数组重复的值

比如输入: [1,13,24,11,14,1,2] 
输出: [1,2]
需要去掉重复的11 和 1 这两个元素。

这道问题出现在诸多的前端面试题中，主要考察个人对Object的使用，利用key来进行筛选。

/**
* unique an array 
**/
let unique = function(arr) {  
  let hashTable = {};
  let data = [];
  for(let i=0,l=arr.length;i<l;i++) {
    if(!hashTable[arr[i]]) {
      hashTable[arr[i]] = true;
      data.push(arr[i]);
    }
  }
  return data

}

module.exports = unique;

Q3 统计一个字符串出现最多的字母

给出一段英文连续的英文字符窜，找出重复出现次数最多的字母

输入 ： afjghdfraaaasdenas 

输出 ： a

前面出现过去重的算法，这里需要是统计重复次数。

function findMaxDuplicateChar(str) {  
  if(str.length == 1) {
    return str;
  }
  let charObj = {};
  for(let i=0;i<str.length;i++) {
    if(!charObj[str.charAt(i)]) {
      charObj[str.charAt(i)] = 1;
    }else{
      charObj[str.charAt(i)] += 1;
    }
  }
  let maxChar = '',maxValue = 1;
  for(var k in charObj) {
    if(charObj[k] >= maxValue) {
      maxChar = k;
      maxValue = charObj[k];
    }
  }
  return maxChar;

}

module.exports = findMaxDuplicateChar;

Q4 排序算法

如果抽到算法题目的话，应该大多都是比较开放的题目，不限定算法的实现，但是一定要求掌握其中的几种，所以冒泡排序，这种较为基础并且便于理解记忆的算法一定需要熟记于心。冒泡排序算法就是依次比较大小，小的的大的进行位置上的交换。

function bubbleSort(arr) {  
    for(let i = 0,l=arr.length;i<l-1;i++) {
        for(let j = i+1;j<l;j++) { 
          if(arr[i]>arr[j]) {
                let tem = arr[i];
                arr[i] = arr[j];
                arr[j] = tem;
            }
        }
    }
    return arr;
}
module.exports = bubbleSort;

除了冒泡排序外，其实还有很多诸如 插入排序,快速排序，希尔排序等。每一种排序算法都有各自的特点。全部掌握也不需要，但是心底一定要熟悉几种算法。 比如快速排序，其效率很高，而其基本原理如图(来自wiki)：

img

算法参考某个元素值，将小于它的值，放到左数组中，大于它的值的元素就放到右数组中，然后递归进行上一次左右数组的操作，返回合并的数组就是已经排好顺序的数组了。

function quickSort(arr) {

    if(arr.length<=1) {
        return arr;
    }

    let leftArr = [];
    let rightArr = [];
    let q = arr[0];
    for(let i = 1,l=arr.length; i<l; i++) {
        if(arr[i]>q) {
            rightArr.push(arr[i]);
        }else{
            leftArr.push(arr[i]);
        }
    }

    return [].concat(quickSort(leftArr),[q],quickSort(rightArr));
}

module.exports = quickSort;

安利大家一个学习的地址，通过动画演示算法的实现。

HTML5 Canvas Demo: Sorting Algorithms

Q5 不借助临时变量，进行两个整数的交换

输入 a = 2,b = 4 输出 a = 4,b =2

这种问题非常巧妙，需要大家跳出惯有的思维，利用 a,b进行置换。

主要是利用 + - 去进行运算，类似 a = a + ( b - a) 实际上等同于最后 的 a = b;

function swap(a,b) {  
  b = b - a;
  a = a + b;
  b = a - b;
  return [a,b];
}

module.exports = swap;

Q6 使用canvas 绘制一个有限度的斐波那契数列的曲线？

img

数列长度限定在9.

斐波那契数列，又称黄金分割数列，指的是这样一个数列：0、1、1、2、3、5、8、13、21、34、……在数学上，斐波纳契数列主要考察递归的调用。我们一般都知道定义

fibo[i] = fibo[i-1]+fibo[i-2];

生成斐波那契数组的方法

function getFibonacci(n) {  
  var fibarr = [];
  var i = 0;
  while(i<n) {
    if(i<=1) {
      fibarr.push(i);
    }else{
      fibarr.push(fibarr[i-1] + fibarr[i-2])
    }
    i++;
  }

  return fibarr;
}

剩余的工作就是利用canvas arc方法进行曲线绘制了

DEMO

Q7 找出下列正数组的最大差值比如:

输入 [10,5,7,8,9]

输出 6

这是通过一道题目去测试对于基本的数组的最大值的查找，很明显我们知道，最大差值肯定是一个数组中最大值与最小值的差。

  function getMaxProfit(arr) {

    var minPrice = arr[0];
    var maxProfit = 0;

    for (var i = 0; i < arr.length; i++) {
        var currentPrice = arr[i];

        minPrice = Math.min(minPrice,currentPrice);

        var potentialProfit = currentPrice - minPrice;

        maxProfit = Math.max(maxProfit,potentialProfit);
    }

    return maxProfit;
}

Q8 随机生成指定长度的字符串

实现一个算法，随机生成指制定长度的字符窜。

比如给定 长度 8  输出 4ldkfg9j
function randomString(n) {  
  let str = 'abcdefghijklmnopqrstuvwxyz9876543210';
  let tmp = '',i = 0,l = str.length;
  for (i = 0; i < n; i++) {
    tmp += str.charAt(Math.floor(Math.random() * l));
  }
  return tmp;
}

module.exports = randomString;

Q9 实现类似getElementsByClassName 的功能

自己实现一个函数，查找某个DOM节点下面的包含某个class的所有DOM节点？不允许使用原生提供的 getElementsByClassName querySelectorAll 等原生提供DOM查找函数。

function queryClassName(node,name) {  
  var starts = '(^|[ \n\r\t\f])',ends = '([ \n\r\t\f]|$)';
  var array = [],regex = new RegExp(starts + name + ends),elements = node.getElementsByTagName("*"),length = elements.length,element;

    while (i < length) {
        element = elements[i];
        if (regex.test(element.className)) {
            array.push(element);
        }

        i += 1;
    }

    return array;
}

Q10 使用JS 实现二叉查找树(Binary Search Tree)

一般叫全部写完的概率比较少，但是重点考察你对它的理解和一些基本特点的实现。 二叉查找树，也称二叉搜索树、有序二叉树（英语：ordered binary tree）是指一棵空树或者具有下列性质的二叉树：

  • 任意节点的左子树不空，则左子树上所有结点的值均小于它的根结点的值；
  • 任意节点的右子树不空，则右子树上所有结点的值均大于它的根结点的值；
  • 任意节点的左、右子树也分别为二叉查找树；
  • 没有键值相等的节点。二叉查找树相比于其他数据结构的优势在于查找、插入的时间复杂度较低。为O(log n)。二叉查找树是基础性数据结构，用于构建更为抽象的数据结构，如集合、multiset、关联数组等。

img

在写的时候需要足够理解二叉搜素树的特点，需要先设定好每个节点的数据结构

class Node {  
  constructor(data,left,right) {
    this.data = data;
    this.left = left;
    this.right = right;
  }

}

树是有节点构成，由根节点逐渐延生到各个子节点，因此它具备基本的结构就是具备一个根节点，具备添加，查找和删除节点的方法.

class BinarySearchTree {

  constructor() {
    this.root = null;
  }

  insert(data) {
    let n = new Node(data,null,null);
    if (!this.root) {
      return this.root = n;
    }
    let currentNode = this.root;
    let parent = null;
    while (1) {
      parent = currentNode;
      if (data < currentNode.data) {
        currentNode = currentNode.left;
        if (currentNode === null) {
          parent.left = n;
          break;
        }
      } else {
        currentNode = currentNode.right;
        if (currentNode === null) {
          parent.right = n;
          break;
        }
      }
    }
  }

  remove(data) {
    this.root = this.removeNode(this.root,data)
  }

  removeNode(node,data) {
    if (node == null) {
      return null;
    }

    if (data == node.data) {
      // no children node
      if (node.left == null && node.right == null) {
        return null;
      }
      if (node.left == null) {
        return node.right;
      }
      if (node.right == null) {
        return node.left;
      }

      let getSmallest = function(node) {
        if(node.left === null && node.right == null) {
          return node;
        }
        if(node.left != null) {
          return node.left;
        }
        if(node.right !== null) {
          return getSmallest(node.right);
        }

      }
      let temNode = getSmallest(node.right);
      node.data = temNode.data;
      node.right = this.removeNode(temNode.right,temNode.data);
      return node;

    } else if (data < node.data) {
      node.left = this.removeNode(node.left,data);
      return node;
    } else {
      node.right = this.removeNode(node.right,data);
      return node;
    }
  }

  find(data) {
    var current = this.root;
    while (current != null) {
      if (data == current.data) {
        break;
      }
      if (data < current.data) {
        current = current.left;
      } else {
        current = current.right
      }
    }
    return current.data;
  }

}

module.exports = BinarySearchTree;

前言

javascript是一门非常灵活的语言，实际的开发过程中我们也可以灵活的使用它而给我们的工作带来便利，这篇文章记录了自己平时学习过程中经常用到的一些小技巧，整理出来作为笔记，也希望对感兴趣的同学有所帮助。( 持续更新… )

1 获取指定范围内的随机数

当我们需要获取指定范围(min,max)内的整数的时候，下面的代码非常适合。

function getRadomNum(min,max){return Math.floor(Math.random() * (max - min + 1)) + min;}

测试
[

测试

](javascript:void(0))

2 随机获取数组中的元素

function getRadomFromArr(arr){return arr[Math.floor(Math.random()*arr.length)];}

测试
[

测试

](javascript:void(0))

3 生成从0到指定值的数字数组

var arr=[],length=100,i=1;for(;arr.push(i++)<length;){}console.log(arr)

测试
[

测试

](javascript:void(0))

4 打乱数字数组的顺序

var arr = [1,2,3,4,6,'a','dsfs',9,'v'];arr.sort(function(){return Math.random()-0.5});

测试
[

测试

](javascript:void(0))

5 对象转换为数组

//注意对象必须是以下格式的才可以通过此方式转化为数组//获取的DOM集合，以及函数的arguments也可以通过此方式转化为数组var obj={0:'qian',1:'long',2:'chu',3:'tian',length:4}var _slice=[].slice;var objArr=_slice.call(obj);

测试
[

编程之家

](javascript:void(0))

6 验证是否为数组

function isArray(obj){return Object.prototype.toString.call(obj) === '[object Array]' ;}

测试

[

编程之家

](javascript:void(0))

7 获取数组中最大或者最小值

function maxAndMin(arr){return {max:Math.max.apply(null,arr.join(',').split(',')),min:Math.min.apply(null,'))}}

该方法适合一维或者多维数组求最大最小值的情况

测试
[

编程之家

](javascript:void(0))

8 清空数组

//方式一 通过将长度设置为0var arr=[1,5];arr.length=0; //方式二 通过splice方法var arr=[1,5];arr.splice(0,arr.length); //方式三 通过将空数组 [] 赋值给数组(严格意义来说这只是将ary重新赋值为空数组，之前的数组如果没有引用在指向它将等待垃圾回收。)var arr=[1,5];arr=[];

9 保留指定小数位

var num =4.345678;num = num.toFixed(4); // 4.3457 第四位小数位以四舍五入计算

10 不要直接使用delete来删除数组中的元素

数组在js中也是对象，有时候我们可能会通过delete来删除数组中的元素，但是其实仅仅是将数组的元素的值赋值为了undefined。

var arr=[1,'谦龙','雏田'];delete arr[5];console.log(arr,arr[5],arr.length);

测试

[

编程之家

](javascript:void(0))

可以通过splice来删除数组中的某一项

var arr=[1,'雏田'];arr.splice(5,1);console.log(arr,arr.length);

测试

[

编程之家

](javascript:void(0))

11 生成指定长度的随机字母数字字符串

function getRandomStr(len) {var str = "";for( ; str.length < len; str += Math.random().toString(36).substr(2));return str.substr(0,len);}

测试
[

编程之家

](javascript:void(0))

12 null 与 undefined

null == undefined,null == null 返回true,有时候我们为了排除null 和 undefined可以使用如下的代码

function test(obj){if(obj!=null){// obj除了undefined 和 null 之外都会走这里....这里写代码逻辑}}

13 找出数组中出现次数最的元素，并给出其出现过的位置

function getMaxAndIndex( arr ){var obj = {};arr.forEach(function(item,index){if(!obj[item]){obj[item]= {indexs: [index]}}else{obj[item]['indexs'].push(index);}});var num=0;//记录出现次数最大值var str='';//记录出现次数最多的字符var reArr;//返回最大值的位置数组for(var attr in obj){var temp=obj[attr]['indexs'];if(temp.length>num){num=temp.length;str=attr;reArr=temp;}}return {maxStr:str,indexs:reArr}}

测试结果
[

编程之家

](javascript:void(0))

#javascript

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

src和href 如何做好seo 前端页面有那三层 AMD和CMD 规范的区别 渐进增强
1==&gt;简述一下src与href的区别 src用于替换当前元素； href用于在当前文档和引用资源之间确立联系 2==&gt;、谈谈以前端角度出发做好SEO需要考虑什么？ a.&#160;了解搜
JS面试题(一)
什么是window对象？什么是document对象？ window对象代表浏览器中打开的一个窗口。 document对象代表整个html文档。实际上， document对象是window对象的一个属性
vue-router有哪几种导航钩子 keep-alive的详细用法 解决跨域
1 》vue-router有哪几种导航钩子？ 第一种：是全局导航钩子：router.beforeEach(to,from,next) 第二种:&#160;组件内的钩子 beforeRouteEnter
vue进阶面试题
1=&gt;为什么data是一个函数 【理解】 组件的data写成一个函数， 这样每复用一次组件，就会返回一分新的data。 也就说:给每个组件实例创建一个私有的数据空间。 各个组件维护各自的数据。
vue3面试题
01 vue3的新特征 1.组合式API. setUp作为组合函数的入口函数 2.Teleport 传送门 3.片段 template下可以有多个标签 4.用于创建自定义渲染器。我的理解是 creat
reduce计算数组中每个元素出现的次数 数组去重的几种方式 将多维数组转化为一维
// var&#160;arr=[1,2,23,23,4,5,5]; // var&#160;newarr=new&#160;Set(arr);&#160;//去重 // console.log([.
面试题二
摆好姿势 摆好姿势 如何使下面的等式成立 if(a==1&amp;&amp;a==3&amp;a==5){ console.log(666) } var a=[1,3,5] a.join=a.shif
vue面试题(一)
1=&gt;为什么data是一个函数 【理解】 ok 每复用一次组件，就会返回一分新的data。 也就说:【每个组件实例创建】一个【私有】的数据空间。各个组件维护各自的数据。 如果单纯的写成对象形式，
2016年Web前端面试题目
以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题，通过对知识的整理以及经验的总结，重新巩固自身的前端基础知识，如有错误或更好的答案，欢迎指正。:） 在网页中，一个元素占有空间
spring,hibernate,struts的面试笔试题
1 Action是不是线程安全的？如果不是 有什么方式可以保证Action的线程安全？如果是，说明原因不是声明局部变量，或者扩展RequestProcessor，让每次都创建一个Action，或者在s
JS基础篇前端面试题整合一
解决js兼容性问题使用 event对象 function eventHandler(event) { event = event || window.event} 获取滚动条属性 var scrollTop = document.documentElment.scrollTop || document.body.scrollTop
前端面试题整合HTML，CSS等基础篇
浏览器的内核 IE: trident内核，Firefox：gecko内核，Safari:webkit内核，Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核，Chrome:Blink(基于webkit，Google与Opera Software共同开发) HTML中的Doctype有什么作用 此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面） div+css的布局较table布局有什么...
JS基础篇前端面试题整合二
如何创建函数第一种（函数声明）： function sum1(num1,num2){ return num1+num2; } 第二种（函数表达式）： var sum2 = function(num1,num2){ return num1+num2; } 第三种（函数对象方式）： var sum3 = new Function("num1","num2","return num1+num2");三种弹窗的单词以及三种弹窗的功能1.alert //弹出对话框并输出一段提示信...
JS进阶篇前端面试题整合一
js的垃圾回收机制是什么原理垃圾回收机制有两种方法第一种是标记清除法：当变量进入执行环境时,就标记这个变量为”进入环境”,当变量离开环境的时候,则将其标记为”离开环境”,垃圾收集器在运行的时候会给储存在内存中的所有变量都加上标记,然后它会去掉环境中的标量以及被环境中的变量引用的标记,而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了,最后,垃圾收集器完成内存清除工作,销毁那些带标记的值,并回收他们所占用的内存空间 第二种是引用计数法：当声明了一个变量并将
JS进阶篇前端面试题整合二
Ajax 是什么? 如何创建一个Ajax？AJAX全称是Asychronous JavaScript And Xml（异步的 JavaScript 和 XML）它的作用是用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持其主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果实现方式（gitee上的案例）：
ES6+前端面试题整合
谈一谈let与var和const的区别let为ES6新添加申明变量的命令，它类似于var，但是有以下不同： let命令不存在变量提升，如果在let前使用，会导致报错let暂时性死区的本质，其实还是块级作用域必须“先声明后使用”的性质，let 暂时性死区的原因：var 会变量提升，let 不会。let，const和class声明的全局变量不是全局对象的属性const可以在多个模块间共享const声明的变量与let声明的变量类似，它们的不同之处在于，const声明的变量只可以在声明时赋值，不可
JS从看懂到看开前端面试题整合
解释一下为何[ ] == ![ ] // ---&gt; true首先看一张图！[ ] 是 false原式：[ ] == false根据第八条，false通过tonumber（）转换为0原式：[ ] == 0根据第十条，[ ]通过ToPrimitive()转换为' '原式：' ' == 0根据第六条原式：0 == 0尝试实现new function ObjectClass() {//对象 console.log(arguments[...
NodeJs前端面试题整合
谈谈对Node的理解Node.js 在浏览器外运行V8 JavaScript引擎，单线程 非阻塞I/O 事件驱动,适应于数据高并发,适合多请求,但不适合高运算,有权限读取操作系统级别的API，npm 仓库，常用框架：Express，koa，Socket.io，AdonisJs，NestJS什么是gulp？作用？机制是什么？gulp是基于node的自动化构建工具作用：1 自动压缩JS文件2 自动压缩CSS文件3 自动合并文件4 自动编译sass5 自动压缩图片6 自动刷
VueJs前端面试题整合
vue和react的区别React严格上只针对MVC的view层，Vue则是MVVM模式virtual（虚拟） DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而对于React而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制组件写法不一样，React推荐的做法是 JSX + inline style，也就是把HTML和CSS全都写进JavaScript了，即'all in
React前端面试题整合
谈谈对react的理解react是基于v（视图层）层的一款框架，虚拟dom和diff算法react特点：声明式设计高效，其中高效以现在虚拟dom，最大限度减少与dom的交互和diff算法灵活，体现在可以与已知的框架或库很好的配合JSX，是js语法的扩展组件化，构建组件，是代码的更容易得到复用，比较建议在大型项目的开发单项数据，实现单项数流，从而减少代码复用react有哪几个生命周期自己的总结分为三个阶段，初始，运行中，销毁初始化： 执行getDefaultProps钩子
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot