前端工程师面试问题归纳（三、代码类）

其他随笔：

前端工程师面试问题归纳（一、问答类html/css/js基础）

前端工程师面试问题归纳（二、问答类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的成员组成一个新数组返回。该方法不会改变原数组。

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

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

//思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组

function unique(arr){

　　var arr2 = arr.sort();

　　var res = [arr2[0]];

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

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

　　　　　　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 、写一个获取非行间样式的函数

4、实现一个函数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;}

5、如何删除一个cookie

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

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

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

2.expires的设置

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

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

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"));

7、请写出函数运行结果

function test(){var a;function foo(){return 2;}console.log(a);//undefinedconsole.log(foo());//2a = 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

8、求数组最大值

//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);

9、用css实现垂直居中

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

10、用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）：将一个数组转为用逗号分隔的参数序列。

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

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

12、请用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

13、你如何获取浏览器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

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

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

<input type=”button” οnclick=”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

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

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次

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

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

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

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
}

转载于:https://www.cnblogs.com/phoebeyue/p/9303981.html