前端工程师面试问题概括（3、代码类）

时间 2019-11-19

原文原文链接

其余随笔：

前端工程师面试问题概括（1、问答类html/css/js基础）

前端工程师面试问题概括（2、问答类JQ相关）

（二）、手写代码

1 、数组去重的实现

//方法一
var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);//[0, 2, 3, 4]

//方法二
var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);//[2, 3, 4, 5, 6]

//方法三
var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
    return self.indexOf(element) === index;
});
console.log(arr2);//[2, 3, 4, 5, 6]

filter方法用于过滤数组成员，知足条件的成员组成一个新数组返回。
它的参数是一个函数，全部数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。javascript

filter方法的参数函数能够接受三个参数：当前成员，当前位置和整个数组。css

indexOf方法返回给定元素在数组中第一次出现的位置，若是没有出现则返回-1。html

//思路：先将原数组排序，在与相邻的进行比较，若是不一样则存入新数组

function unique(arr){前端

　　var arr2 = arr.sort();java

　　var res = [arr2[0]];jquery

　　for(var i=1;i<arr2.length;i++){css3

　　　　if(arr2[i] !== res[res.length-1]){es6

　　　　　　res.push(arr2[i]);面试

　　　　}正则表达式

　　}

　　return res;

}

//先排序后去重

Array.prototype.unique = function(){

var result = [this[0]];
    this.sort(); this.forEach(function(v){ v != result[result.length - 1] && result.push(v); //仅与result最后一个元素比较  }); } //利用ES6 Set去重 //ES6环境下 Array.prototype.unique = function(){ return [...new Set(this)]; }

2 、快速排序的实现

“快速排序”的思想很简单，整个排序过程只须要三步：

　　（1）在数据集之中，找一个基准点

　　（2）创建两个数组，分别存储左边和右边的数组

　　（3）利用递归进行下次比较

 <script type="text/javascript">
 
        function quickSort(arr){
            if(arr.length<=1){ return arr;//若是数组只有一个数，就直接返回；  } var num = Math.floor(arr.length/2);//找到中间数的索引值，若是是浮点数，则向下取整 var numValue = arr.splice(num,1);//找到中间数的值 var left = []; var right = []; for(var i=0;i<arr.length;i++){ if(arr[i]<numValue){ left.push(arr[i]);//基准点的左边的数传到左边数组  } else{ right.push(arr[i]);//基准点的右边的数传到右边数组  } } return quickSort(left).concat([numValue],quickSort(right));//递归不断重复比较  } alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87” </script>

//方法一(尽量不用js数组方法）
function quickSort(arr){
    qSort(arr,0,arr.length - 1); } function qSort(arr,low,high){ if(low < high){ var partKey = partition(arr,low,high); qSort(arr,low, partKey - 1); qSort(arr,partKey + 1,high); } } function partition(arr,low,high){ var key = arr[low]; //使用第一个元素做为分类依据 while(low < high){ while(low < high && arr[high] >= arr[key]) high--; arr[low] = arr[high]; while(low < high && arr[low] <= arr[key]) low++; arr[high] = arr[low]; } arr[low] = key; return low; }

//方法二（使用js数组方法）
function quickSort(arr){
   if(arr.length <= 1) return arr; var index = Math.floor(arr.length/2); var key = arr.splice(index,1)[0]; var left = [],right = []; arr.forEach(function(v){ v <= key ? left.push(v) : right.push(v); }); return quickSort(left).concat([key],quickSort(right)); } //另外要知道，快速排序的平均时间复杂度O(nlogn),最坏状况是有序的状况，时间复杂度为n的平方，另外快速排序是不稳定的。

3 、写一个获取非行间样式的函数

四、实现一个函数clone，能够对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

Object.prototype.clone = function(){
 
            var o = this.constructor === Array ? [] : {};
 
            for(var e in this){
 
                    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
 
            }
 
            return o;
    }

五、如何删除一个cookie

1.将时间设为当前时间往前一点。

var date = new Date();
 
date.setDate(date.getDate() - 1);//真正的删除

setDate()方法用于设置一个月的某一天。

2.expires的设置

document.cookie = 'user='+ encodeURIComponent('name')  + ';
expires = ' + new Date(0)

六、编写一个方法求一个字符串的字节长度

function GetBytes(str){
 
        var len = str.length;
 
        var bytes = len;
 
        for(var i=0; i<len; i++){
 
            if (str.charCodeAt(i) > 255) bytes++;
 
        }
 
        return bytes;
 
    }
 
alert(GetBytes("你好,as"));

七、请写出函数运行结果

function test(){
    var a;
    function foo(){
        return 2;
    }
    console.log(a);//undefined
    console.log(foo());//2
    a = 1;
}
test();

function fun(n,o){
    console.log(o);
    return {
        fun:function(m){
            return fun(m,n);
        }
    }
}
var a = fun(0);a.fun(1);a.fun(2);a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);c.fun(2);c.fun(3);
//undefined 0 0 0
//undefined 0 1 2
//undefined 0 1 1

var a = 9;
var b = a++ + a-- + ++a + --a + a--
//console.log(a);//8
//console.log(b);//47

var objName = "name1";
function obj(){
    var objName = "name2";
    function innerObj(){
        alert(objName);//name2
    }
    innerObj();
}
console.log(obj());//undefined

八、求数组最大值

//1.sort排序（先把数组从小到大排序，数组第一个即为最小值，最后一个即为最大值）
ary.sort(function(a,b){return a-b;});
var minN = ary[0];
var maxN = ary[ary.length-1];
//2.假设数组第一个为最大（或最小值），和后边进行比较，若后边的值比最大值大（或比最小值小），则替换最大值（或最小值）
var maxN = ary[0];
var minN = ary[0];
for(var i=1;i<ary.length;i++){
    var cur = ary[i];
    cur>maxN ? maxN=cur : null;
    cur<minN ? minN=cur : null;
}
//3.Math的max和min方法
Math.max.apply(null, a);
Math.min.apply(null, a);

九、用css实现垂直居中

https://www.cnblogs.com/zhouhuan/p/vertical_center.html

十、用es6的方法将数组[5,6,7]插入数组[1,2,3,4]，获得数组[1,2,5,6,7,3,4]

var arry1 = [1,2,3,4];
var arry2 = [5,6,7];
//这里的...为扩展运算符（spread）：表示将一个数组转为用逗号分隔的参数序列。
arry1.splice(2,0,...arry2);
console.log(arry1);

splice方法用于删除原数组的一部分红员，并能够在删除的位置添加新的数组成员，返回值是被删除的元素。该方法会改变原数组。
splice方法的第一个参数是删除的起始位置（从0开始），第二个参数是被删除的元素个数（第二个参数设为0的时候表示只插入元素）。若是后面还有更多的参数，则表示这些就是要被插入数组的新元素。
…扩展运算符（spread）：将一个数组转为用逗号分隔的参数序列。

十一、JavaScript中如何检测一个变量是一个String类型？请写出函数实现

typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String

十二、请用js去除字符串空格？

方法一：使用replace正则匹配的方法

去除全部空格: str = str.replace(/\s*/g,"");

去除两头空格: str = str.replace(/^\s*|\s*$/g,"");

去除左空格： str = str.replace( /^\s*/, “”);

去除右空格： str = str.replace(/(\s*$)/g, "");

str为要去除空格的字符串，实例以下：

var str = " 23 23 ";
var str2 = str.replace(/\s*/g,"");
console.log(str2); // 2323

方法二：使用str.trim()方法

str.trim()局限性：没法去除中间的空格，实例以下：

var str = "   xiao  ming   ";
var str2 = str.trim();
console.log(str2);   //xiao  ming

同理，str.trimLeft()，str.trimRight()分别用于去除字符串左右空格。

方法三：使用jquery,$.trim(str)方法

$.trim(str)局限性：没法去除中间的空格，实例以下：

var str = "   xiao  ming   ";
var str2 = $.trim(str)
console.log(str2);   //  xiao  ming

1三、你如何获取浏览器URL中查询字符串中的参数？

测试地址为：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23

实例以下：

function showWindowHref(){
    var sHref = window.location.href;
    var args = sHref.split('?');
    if(args[0] == sHref){
        return "";
    }
    var arr = args[1].split('&');
    var obj = {};
    for(var i = 0;i< arr.length;i++){
        var arg = arr[i].split('=');
        obj[arg[0]] = arg[1];
    }
    return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming

1四、写出3个使用this的典型应用

（1）、在html元素事件属性中使用，如：

<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

（2）、构造函数

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}

（3）、input点击，获取值

<input type="button" id="text" value="点击一下" />
<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此处的this是按钮元素
    }
</script>

(4)、apply()/call()求数组最值

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458

1五、判断一个字符串中出现次数最多的字符，统计这个次数

var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
    if(!json[str.charAt(i)]){
       json[str.charAt(i)] = 1;
    }else{
       json[str.charAt(i)]++;
    }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
    if(json[i]>iMax){
         iMax = json[i];
         iIndex = i;
    }
}        
console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
//结果以下：出现次数最多的是:a出现9次

1六、使用正则表达式验证邮箱格式

var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
 var email = "example@qq.com";
 console.log(reg.test(email));  // true

1七、请写一个简单的幻灯效果页面

css3

18.解释下为何接下来这段代码不是IIFE(当即调用的函数表达式)：function foo(){}();.

要作哪些改动使它变成IIFE?
由于在解析器解析全局的function或者function内部function关键字的时候，默认是认为function声明，而不是function表达式，若是你不显示告诉编译器，它默认会声明成一个缺乏名字的function，而且抛出一个语法错误信息，由于function声明须要一个名字。

var foo = function() {

    // doSomeThing.

}； 

foo();

19."123456789876543212345678987654321..."的第n位是什么？

function getNum(n){
    let num=0, flag=true;
    for(let i=0; i<n;i++){
        if(num===1)  flag=true;
        if(num===9)  flag=false;
        flag?num++:num--
    }
    return num
}