其他随笔:
前端工程师面试问题归纳(一、问答类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);//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
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、请写一个简单的幻灯效果页面
js
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 }