前端大挑战——前端面试题总结

1.封装函数 f,使 f 的 this 指向指定的对象(修改this指向)

1 function bindThis(f, oTarget) {
2     return f.bind(oTarget);
3 }

2.获取 url 中的参数
  1). 指定参数名称,返回该参数的值 或者 空字符串
  2). 不指定参数名称,返回全部的参数对象 或者 {}
  3). 如果存在多个同名参数,则返回数组

输入  http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe
输出  [1, 2, 3]
 1 function getUrlParam(sUrl, sKey) {
 2     var obj = {};
 3     var index = sUrl.indexOf('?');
 4     //url没有带参数
 5     if(index==-1) {
 6         if(sKey==undefined){
 7             return obj;
 8         }else{
 9             return "";
10         }
11     }
12      
13     var queryString = (sUrl.split("?")[1]).split("#")[0];
14     var query = queryString.split('&');//分离出了所有参数
15      
16     for(var i=0;i<query.length;i++){
17         var keyValue = query[i].split("=");
18         var key = keyValue[0];
19         var value = keyValue[1];
20         //console.log('key: '+key+" value: "+value);
21         if(value ==""){
22             continue;//value值为空,进行下一次循环?为空就不进行统计了?
23         }
24         if(obj.hasOwnProperty(key)){//hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false。
25             if(Array.isArray(obj[key])){//判断是不是数组
26                 obj[key].push(value);
27             }else{//不是数组
28                 var val = obj[key];
29                 obj[key] = [];
30                 obj[key].push(val);//?????有点蒙,这是为什么呀
31                 obj[key].push(value);//这一段else里面的是真的不懂
32             }
33   
34         }else{//有新参数,直接添加
35             obj[key]=value;
36         }
37   
38     }
39     //console.log(obj)
40     //1.指定参数名的,返回该参数的值或空
41     if(sKey){
42         return obj[sKey]?obj[sKey]:"";
43     }else{
44         return obj;
45   
46     }
47   
48 }

3.查找两个节点的最近的一个共同父节点,可以包括节点自身

  查找两个节点的最近的一个共同父节点,可以包括节点自身

1 function commonParentNode(oNode1, oNode2) {
2     for(;oNode1;oNode1=oNode1.parentNode){
3         if(oNode1.contains(oNode2)){
4             return oNode1;
5         }
6     }
7 }

4.根据包名,在指定空间中创建对象

    输入描述    namespace({a: {test: 1, b: 2}}, 'a.b.c.d')

    输出描述    {a: {test: 1, b: {c: {d: {}}}}}

 1 function namespace(oNamespace, sPackage) {
 2     var arr = sPackage.split('.');
 3     var res = oNamespace;   // 保留对原始对象的引用
 4  
 5     for(var i = 0, len = arr.length; i < len; i++) {
 6         if(arr[i] in oNamespace) {  // 空间名在对象中
 7             if(typeof oNamespace[arr[i]] !== "object") {    // 为原始值
 8                 oNamespace[arr[i]] = {};    // 将此属性设为空对象           
 9             }  
10         } else {    // 空间名不在对象中,建立此空间名属性,赋值为空
11             oNamespace[arr[i]] = {};
12         }
13          
14         oNamespace = oNamespace[arr[i]];    // 将指针指向下一个空间名属性。
15     }
16  
17     return res;
18  
19 }

  方法二    递归

 1 function namespace(oNamespace, sPackage) {
 2    if(sPackage.length <= 0) return;
 3     // var arr = sPackage.split('.');
 4     var pointer = oNamespace;
 5  
 6  
 7         if(sPackage[0] in oNamespace) {
 8             if(typeof oNamespace[sPackage[0]] !== "object") {
 9                 oNamespace[sPackage[0]] = {};              
10             }  
11         } else {
12             oNamespace[sPackage[0]] = {};
13         }
14  
15         oNamespace = oNamespace[sPackage[0]];
16  
17         namespace(oNamespace, sPackage.slice(2));
18  
19          
20     return pointer;
21  
22 }

5.为 Array 对象添加一个去除重复项的方法

    输入    [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN]

    输出    [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']

 1 Array.prototype.uniq = function () {
 2    var resArr = [];
 3    var flag = true;
 4      
 5    for(var i=0;i<this.length;i++){
 6        if(resArr.indexOf(this[i]) == -1){
 7            if(this[i] != this[i]){   //排除 NaN
 8               if(flag){
 9                    resArr.push(this[i]);
10                    flag = false;
11               }
12            }else{
13                 resArr.push(this[i]);
14            }
15        }
16    }
17     return resArr;
18 }

6.用 JavaScript 实现斐波那契数列函数,返回第n个斐波那契数。 f(1) = 1, f(2) = 1 等

1 function fibonacci(n){
2     if(n==1||n==2)
3         return 1;
4     return fibonacci(n-1)+fibonacci(n-2);
5 }

7.按所给的时间格式输出指定的时间
格式说明
对于 2014.09.05 13:14:20
yyyy: 年份,2014
yy: 年份,14
MM: 月份,补满两位,09
M: 月份, 9
dd: 日期,补满两位,05
d: 日期, 5
HH: 24制小时,补满两位,13
H: 24制小时,13
hh: 12制小时,补满两位,01
h: 12制小时,1
mm: 分钟,补满两位,14
m: 分钟,14
ss: 秒,补满两位,20
s: 秒,20
w: 星期,为 ['日', '一', '二', '三', '四', '五', '六'] 中的某一个,本 demo 结果为 五

    输入    new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w'

    输出    2014-09-05 13:14:20 星期五

 1 function formatDate(t,str){
 2   var obj = {
 3     yyyy:t.getFullYear(),
 4     yy:(""+ t.getFullYear()).slice(-2),
 5     M:t.getMonth()+1,
 6     MM:("0"+ (t.getMonth()+1)).slice(-2),
 7     d:t.getDate(),
 8     dd:("0" + t.getDate()).slice(-2),
 9     H:t.getHours(),
10     HH:("0" + t.getHours()).slice(-2),
11     h:t.getHours() % 12,
12     hh:("0"+t.getHours() % 12).slice(-2),
13     m:t.getMinutes(),
14     mm:("0" + t.getMinutes()).slice(-2),
15     s:t.getSeconds(),
16     ss:("0" + t.getSeconds()).slice(-2),
17     w:['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
18   };
19   return str.replace(/([a-z]+)/ig,function($1){return obj[$1]});
20 }

8.如果第二个参数 bUnicode255For1 === true,则所有字符长度为 1
否则如果字符 Unicode 编码 > 255 则长度为 2

    输入    'hello world, 牛客', false

    输出    17

 1 function strLength(s, bUnicode255For1) {
 2     if( bUnicode255For1 ){
 3         return s.length;
 4     }else{
 5         var len = s.length;
 6         for( var i=0; i<s.length; i++ ){
 7             if( s.charCodeAt(i) > 255 ){
 8                 len++;
 9             }
10         }
11         return len;
12     }
13 }

9.判断输入是否是正确的邮箱格式

    输入    邮箱字符串

    输出    true表示格式正确

1 function isAvailableEmail(sEmail) {
2     var reg = /^(w)+(.w+)*@(w)+((.w+)+)$/;
3     return reg.test(sEmail);
4 }

10.将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff
1). rgb 中每个 , 后面的空格数量不固定
2). 十六进制表达式使用六位小写字母
3). 如果输入不符合 rgb 格式,返回原始输入

     输入    'rgb(255, 255, 255)'

    输出    #ffffff

 1 function rgb2hex(sRGB){
 2     var result=['#'];
 3     if(!/rgb(d+(,s*d+){2})/.test(sRGB)){
 4         return sRGB;
 5     }
 6     sRGB.replace(/d+/g,function($0){
 7         result.push(('0'+(+$0).toString(16)).slice(-2));
 8     });
 9     return result.join('');
10 }

11.css 中经常有类似 background-image 这种通过 - 连接的字符,通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式,请完成此转换功能
1). 以 - 为分隔符,将第二个起的非空单词首字母转为大写
2). -webkit-border-image 转换后的结果为 webkitBorderImage

    输入    'font-size'

    输出    fontSize

1 function cssStyle2DomStyle(sName) {
2     return sName.replace(/(?!^)-(w)(w+)/g, function(a, b, c){
3             return b.toUpperCase() + c.toLowerCase();
4         }).replace(/^-/, '');
5 }

12.统计字符串中每个字符的出现频率,返回一个 Object,key 为统计字符,value 为出现频率
1). 不限制 key 的顺序
2). 输入的字符串参数不会为空
3). 忽略空白字符

    输入    'hello world'

    输出    {h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}

1 function count(str) {
2     var obj = {};
3     str.replace(/S/g,function(s){
4         !obj[s]?obj[s]=1:obj[s]++;
5     })
6     return obj;
7 }
原文地址:https://www.cnblogs.com/qingruozhu/p/7503009.html