前端面试整理——javascript算法和测试题

(1)算法:

1、斐波那契数列:1、1、2、3、5、8、13、21。输入n,输出数列中第n位数的值。

方案一:

 function fn(n){
        var num1 = 1, num2= 1, num3 = 0;
        for(var i=0;i<n-2;i++){
            num3 = num1+num2;
            num1 = num2;
            num2 = num3;
        }
        return num3;
    }
console.log(fn(7)) //13

方案二:

 function fn(n){
   if(n<=2){
        return 1;
   }
    return fn(n-1)+fn(n-2);
 }
console.log(fn(7)) //13

2、数组排序

1)冒泡排序

实现:

a、双重for循环 b、指定比较的轮数和每轮比较的次数 c、如果符合条件就交换位置

流程:

a、比较相邻的元素,如果第一个比第二个大,就交换他们两个的位置。从开始第一对比较到最后一对,最后的元素是最大的元素。

b、从头到尾再比较一次,每进行一轮最后的都是最大的了,因此后一轮比前一轮少一次比较。

function maopao(arr){
    var temp=0;
    for(var i=0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-i-1;j++){
            if(arr[j]>arr[j+1]){
                temp=arr[j];
                arr[j]=arr[j+1];
                arr[j+1]=temp;
            }
        }
    }
    return arr;
}
var s=[15,32,12,5,7,6];
var result=maopao(s);
console.log(result);

2)插入排序

  //双重for循环实现
    function  insertSort(arr){
        var  temp = 0;
        for(var i=1;i<arr.length;i++){
            var temp = arr[i];
            for(var j=i-1;j>=0;j--){
                if(arr[j]>temp){
                    arr[j+1]=arr[j];
                }else{
                    break;
                }
            }
            arr[j+1]=temp;
        }
        return arr;
    }
    //for+while实现
    function insertSort2(arr){
        var  temp = 0;
        for(var i=1;i<arr.length;i++){
            var temp = arr[i];
            var j = i-1;
          while(j>=0 && arr[j]>temp){
              arr[j+1]=arr[j];
              j--;
          }
            arr[j+1]=temp;
        }
        return arr;
    }
    var arr = [32,6,12,9,23,5,8,1,23];
    var arr2 = [32,6,12,9,23,5,8,1,23];
    console.log(‘for:‘+insertSort(arr));
    console.log(‘while:‘+insertSort2(arr2));

3)简单选择排序

3、用js实现二分查找

二分查找的前提是有序数组

实现:将要查找的值每次与中间值比较,大于中间值,则在右边进行相同的查找,小于中间值则在左边进行比较查找,找到返回索引值,没找到返回-1。

1、非递归查找

 function binarySearch(target,arr){
        var start = 0;
        var end = arr.length-1;
        while(start <= end){
            var mid = parseInt((start+end)/2);
            if(target == arr[mid]){
                return mid
            }else if(target > arr[mid]){
                start = mid + 1;
            }else if(target < arr[mid]){
                end = mid - 1;
            }else{
                return -1;
            }
        }
    }
    var arr = [1,2,4,6,8,9,11,34,67];
    console.log(binarySearch(11,arr));

2、递归查找

 function binarySearch(arr,target,start,end){
        var start = start || 0;
        var end = end || arr.length-1;
        var mid = parseInt((start+end)/2);
        if(target == arr[mid]){
                 return mid
             }else if(target > arr[mid]){
                 start = mid + 1;
                 return binarySearch(arr,target,start,end);
             }else if(target < arr[mid]){
                 end = mid - 1;
                 return binarySearch(arr,target,start,end);
             }else{
                 return -1;
        }
    }
     var arr = [1,2,4,6,8,9,11,34,67];
     console.log(binarySearch(arr,11));

4、数组去重

方案一:

 function fn(arr){
        var obj = {};
        var newArr = [];
        for(var i=0;i<arr.length;i++){
            if(!obj[arr[i]]){
                obj[arr[i]] = 1;
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
 var arr = [2,4,7,3,5,2,8,7];
console.log(fn(arr));

方案二:

  var arr = [2,4,7,3,5,2,8,7];
  var setArr = new Set(arr);
   var newArr = Array.from(setArr);
console.log(newArr);

方案三:

var arr =[1,2,2,4,5,4,11,6];
function fn(arr){
    var a=arr;
    for(var i=0;i<a.length;i++){
       for(var j=a.length-1;j>i;j--){
           if(a[i]==a[j]){
                a.splice(j,1);
           }
       }
    }
    return a;
}
var s=fn(arr);
console.log(s);

5、数组求和

 var arr = [10,23,45,70,10];
    var num1 =0;
//方案一
    arr.forEach((item)=>{
        num1 += item;
    })
    console.log(num1);
 //方案二
    var num2 =0;
    arr.some((item)=>{
        num2 += item;
    })
    console.log(num2);
//方案三
    var num3 =0;
    arr.filter((item)=>{
        num3 += item;
    })
    console.log(num3);
 //方案四
    var num4 =0;
    arr.map((item)=>{
        num4 += item;
    })
    console.log(num4);
//方案五
    var num5 =0;
    num5 = arr.reduce((num,now)=>{
        return num+now;
    })
    console.log(num5);

(2)测试题:

1、哪个会弹出1?

A. if(‘21‘<‘15‘){alert(1)}
B. if(15-15){alert(1)}
C. if(‘21‘<15){alert(1)}
D. if(‘5‘+0){alert(1)} 

选D,解析:

1)‘21‘<‘15‘ 字符串之间的比较,是按照从左到右的顺序,逐位进行比较,按照unicode码的大小

charCodeAt(index)用于获取指定索引值位置的unicode

2)‘5‘+0 =》 ‘50‘ => true

+作用: 字符串拼接:左右两侧只要有一侧是字符串,那么就是字符串拼接

2、输出结果?

var i=0,j=0;

for(;j<6,i<10;i++,j++){

k = i+j;

}

console.log(k);//18

解析:

逗号运算符,返回最后一位

3、(!+[]+[]+!+[]).length 输出结果?

console.log((!+[]+[]+!+[]).length); //8

解析:

(!+[]+[]+!+[]) //truetrue

首先是这里的第一个加号代表的是正号

!+[] 结果为布尔值true

!+[]+[]结果为字符串true

4、2000[‘toString‘][‘length‘] 输出结果?

console.log(2000[‘toString‘][‘length‘]); //1

解析:

2000[‘toString‘]返回一个函数,function.length这里返回函数的参数个数。

5、输出结果是多少?

var f = function g(){return 23;};

console.log(typeof g()); // g is not defined

解析:

外部访问不到g()函数

6、写一个字符串转成驼峰的方法

方法一:

function change(str){
        var s1 = str.split("");
        for(var i=0;i<s1.length;i++){
            if(s1[i] == ‘-‘){
                s1[i+1] = s1[i+1].toUpperCase();
            }
        }
        return s1.join("").replace(/-/g,‘‘);
    }
var str = "border-bottom-color";
console.log(change(str));

方法二:

 function change(str){
        var s1 = str.split("-");
        for(var i=1;i<s1.length;i++){
           s1[i] = s1[i].charAt(0).toUpperCase() + s1[i].substring(1);
        }
        return s1.join("");
    }
var str = "border-bottom-color";
console.log(change(str));

方法三:

  function change(str){
        var reg = /-(\w)/g;
        return str.replace(reg,function(s1,s2){
             return s2.toUpperCase();
        })
    }
var str = "border-bottom-color";
console.log(change(str));

7、查找字符串中出现最多的字符和个数

方法一:

 function query(str){
        var obj = {};
        var s1 = str.split("");
        for(var i=0;i<s1.length;i++ ){
            if(!obj[s1[i]]){
                obj[s1[i]] = 1;
            }else{
                obj[s1[i]]++;
            }
        }
        var maxChar = ‘‘;
        var maxNum = 0;
        for(var key in obj){
            if(obj[key]>maxNum){
                maxNum = obj[key];
                maxChar = key;
            }
        }
        console.log(maxChar,maxNum);
    }
  var str = "sdfejdmdjskijfdheeehehehsss";
  query(str);

方法二:

function query(str){
        var obj = {};
        var num = 0;
        var value = 0;
        for(var i=0;i<str.length;i++){
            if(!obj[str[i]]){
                obj[str[i]] = [];
            }
            obj[str[i]].push(str[i]);
        }
        for(var attr in obj){
            if(num < obj[attr].length){
                  num = obj[attr].length;
                  value = obj[attr][0];
            }
        }
        console.log(value,num);
    }
    var str = "sdfejdmdjskijfdheeehehehsss";
    query(str);

方法三:

function query(str){
        var arr = str.split("");
        arr.sort();
        str = arr.join("");
        var num = 0;
        var value = ‘‘;
       var re = /(\w)\1+/g;
       str.replace(re,function(param1,param2){
            if(num<param1.length){
                num = param1.length;
                value = param2;
            }
       });
        console.log(value,num);
    }
var str = "sdfejdmdjskijfdheeehehehsss";
query(str);

8、如何给字符串加千分符?

方案一:

 function fn(str){
           var arr = [];
           var num = str.length%3;
           if(num){
               arr.push(str.slice(0,num));
               str = str.substring(num);
           }
           var count = 0;
           var temp = ‘‘;
           for(var i=0;i<str.length;i++){
                count++;
                temp += str[i];
                if(count ==3 && temp){
                    arr.push(temp);
                    temp = ‘‘;
                    count = 0;
                }
           }
        var newStr = arr.join(‘,‘);
        console.log(newStr);
    }
    var str = ‘3323245678651456‘;
    fn(str);

方案二:

function fn(str){
       var arr = [];
       var num = str.length%3;
       if(num){
         arr.push(str.slice(0,num));
       }
       var count = 3;
       for(var i = num;i<str.length;i++){
           count --;
           if(count == 2){
               arr.push(str.slice(i,i+3));
           }else if(count == 0){
               count = 3;
           }

       }
       var newStr = arr.join(‘,‘);
       console.log(newStr);
    }
var str = ‘3323245678651456‘;
fn(str);

方案三:

 function fn(str){
        // ?1\b代表不属于独立部分,开始、结束、有空格
        var re = /(?=(?!\b)(\d{3})+$)/g;
        console.log(str.replace(re,‘,‘));
    }
    var str = ‘3323245678651456‘;
    fn(str);

9、返回一个值包含数字类型的数组?

方案一:

function fn(str){
        var arr = [];
        var temp = ‘‘;
        for(var i=0;i<str.length;i++){
           if(!isNaN(str[i])){
                temp += str[i];
           }
           if(isNaN(str[i]) || (i== str.length-1 && !isNaN(str[i]))){
               if(temp){
                   arr.push(temp);
                   temp = ‘‘;
               }
           }
        }
        console.log(arr);
    }
    var str = ‘js123ldka78sdassdfd653ssss3‘;
    fn(str);

方案二:

 function fn(str){
        var re = /[0-9]+/g;
        var arr = [];
        str.replace(re,function($0,$1){
            arr.push($0);
        });
        console.log(arr);
    }
    var str = ‘js123ldka78sdassdfd653ssss3‘;
    fn(str);

10、a,b两个变量,不用第三个变量来切换两个变量的值

方案一:

  var a = 10,var b = 20;
   [a,b] = [b,a];
 console.log(a,b);

方案二:

var a = 10,b = 20;
a = [b,b=a][0];
console.log(a,b);

解析:

b=a 是赋值表达式、可以像普通的表达式一样用于任何表达式中,也包括在数组中使用。

a=[b,b=a][0]的执行顺序是:

第一步把b的值放入数组的0下标中;

第二步执行b=a赋值表达式,对b重新赋值,并把这个值放入数组的1下标,这个数组的1下标是没有用的,b=a写这里是为了让它在第三步之前执行。

第三步把数组的0下标赋值给a。

11、有一个数n=5,不用for循环,怎么返回[1,2,3,4,5]这样的数组?

 function fn(n){
        var arr = [];
        return (function(){
            arr.unshift(n);
            n--;
            if(n!=0){
                arguments.callee(n);
            }
           return arr;
        })();
    }
    console.log(fn(5));

12、一个数n,当n小于100时返回n,否则就返回100

方案一:

function fn(n){
   return n<100?n:100;
}
console.log(fn(102));

方案二:

 function fn(n){
       return Math.min(n,100);
    }
console.log(fn(99));

方案三:

    function fn(n){
        switch(n<100){
            case true:
                return n;
                break;
            case false:
                return 100;
                break;
        }
    }
    console.log(fn(99));

方案四:

var n = 104;
   var arr = [n,100];
   arr.sort(function(n1,n2){
       return n1-n2;
   })
console.log(arr[0]);

13、伪数组及转化标准数组

方案一:for循环

var arr = [];
 for(var i=0;i<funs.length;i++){
     arr.push(funs[i]);
 }
console.log(arr);

方案二:

var arr = Array.prototype.slice.call(funs);
//或
var arr = [].slice.call(funs);

14、以下题目弹出的结果是多少?

 var i=0;
   alert(++i == i++);  //true

解析:

等式是从左往右执行,先是执行了++i ,然后进行比较,最后执行i++

15、以下输出结果是多少?

 function Fn(){
        this.name = ‘miaov‘;
        this.adress = ‘北京‘;
        return {}
    }
    var fn = new Fn();
    console.log(fn.name); //undefined

原文地址:https://www.cnblogs.com/fangnianqin/p/10248389.html

时间: 2024-08-28 22:49:05

前端面试整理——javascript算法和测试题的相关文章

前端面试整理

第一阶段 1.XHTML与HTML与HTML5的有何异同? HTML是一种超文本标记语言 HTML5 最先由whatwg命名的一种超文本标记语言,随后与W3Cxhtml2.0相结合,生成现代最新的一种超文本标记语言 h5=html+css3+js+API html与html5主要区别是语义化的标签<header><footer><article> html特性: 标识文本.例如:定义标题文本.段落文本.列表文本.预定义文本. 建立超链接,便于页面链接的跳转. 创建列表,

前端面试的一道算法题

(使用canvas解答) 下面说一个跟前端有点相关并且有点趣的一道算法题. 题目: 平面上有若干个不特定的形状,如下图所示.请写程序求出物体的个数,以及每个不同物体的面积. 分析 想要知道有多少个图形,想到的就是先获取图片中的每一个像素点然后判获取像素点的背景颜色(RGBA).想要获得图片中的每一个像素点,那就可以联想到使用h5的canvas.如下: 菜鸟教程中canvas的getimagedata方法http://www.runoob.com/tags/canvas-getimagedata.

前端面试整理(HTML&amp;CSS)

1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中img是行元素块级元素:总是在新行上开始,高度.行高及外边距和内边距都可控制,可以容纳内敛元素和其他元素:行元素转换为块级元素方式:display:block: 2.将多个元素设置为同一行?清除浮动有几种方式? 将多个元素设置为同一行:float,inline-block清除浮动的方式:方法一:添加新的

前端面试之Javascript

1,JS基本的数据类型和引用类型: (1)基本数据类型:number,string,null,undefined,symbol--栈: (2)引用数据类型:object,array,function--堆: 两种数据类型存储位置不同: 1),原始数据类型是直接存储在栈中的简单数据段,占据空间小,大小固定,属于被频繁使用数据. 2),引用数据类型存储在堆中的对象,占据空间大,大小不固定,如果存储在栈中,将会影响程序运行的性能. 3),引用数据类型在栈中存储了指针,该指针指向堆中该实体的起止地址.

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

虽说我们很多时候前端很少有机会接触到算法.大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面.实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的.如果将来当我们面对较为复杂的问题,这些基础知识的积累可以帮助我们更好的优化解决思路.下面罗列在前端面试中经常撞见的几个问题吧. Q1 判断一个单词是否是回文? 回文是指把相同的词汇或句子,在下文中调换位置或颠倒过来,产生首尾回环的情趣,叫做回文,也叫回环.比如 mamam redivider . 很多人拿到这样的题目非常容易

问得最多的十个JavaScript前端面试问题

我知道有很多人不同意这种类型的面试.其实不管你喜不喜欢,你都得接受.尤其当你是自学的,而且要申请第一份工作时. 我估计很多有人其它方法来证明他自己,像Github/ 项目地址可能是非常理想的证明方法,但也别全都指望这些. 好消息是有一些很难的问题,在有限的时间里我没答上来(比如说Event Loop和杨辉三角),一些其它面试侯选人也承认他们也没答上来,这会让讨论变得轻松很多. 坏消息是有些面试之后就没有任何反馈了.有三家公司再也没联系过.这点击打击自信,而且没有受到尊重.然后你可能会有心理斗争,

前端面试中常见的几个问题

在前端很少有机会接触到算法,大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面.下面这篇文章就给大家总结了在前端JS面试中常见的测试题问题,有需要的朋友们可以参考借鉴,下面来一起看看吧. 学习数据结构与算法对于工程师去理解和分析问题都是有帮助的.如果将来当我们面对较为复杂的问题,这些基础知识的积累可以帮助我们更好的优化解决思路.下面罗列在前端面试中经常撞见的几个问题吧.image.png1.介绍js的基本数据类型 Undefined.Null.Boolean.Number.Str

2018年前端面试总结

2018年前端面试总结 再有两个月,2018就快过完了,因而有必要在年末对2018年的前端学习做一个总结,本文主要从前端面试中的一些基础知识来对前端进行相关的总结.本文根据网络面试题进行总结. 基础知识 本部分主要从以下几个方面来回顾前端相关的基础知识: HTML相关 CSS相关 JAVASCRIPT相关 DOM相关 HTTP相关 webpack相关 Html html 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解

2020年前端面试复习必读文章【超百篇文章/赠复习导图】

前言 之前写过一篇 一年半经验如何准备阿里巴巴前端面试,给大家分享了一个面试复习导图,有很多朋友说希望能够针对每个 case 提供一个参考答案. 写答案就算了,一是「精力有限」,二是我觉得大家还是需要自己「理解总结会比较好」. 给大家整理了一下每个 case 一些还算不错的文章吧(还包括一些躺在我收藏夹里的好文章),大家可以自己看文章总结一下答案,这样也会理解更深刻. 「并不是所有文章都需要看」,希望是一个抛砖引玉的作用,大家也可以锻炼一下自己寻找有效资料的能力 ~ ( 文章排序不分前后,随机排