前端面试题总结四

69 阅读 0 评论 46 点赞

我是靠谱客的博主光亮长颈鹿，最近开发中收集的这篇文章主要介绍前端面试题总结四，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言

越继续越发现自己差的多，加油吧！

正文

1.
统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率

不限制 key 的顺序
输入的字符串参数不会为空
忽略空白字符

//自己思考
let str = 'hwllo wird'

function count(str){
  //去重
  let newStr = str.replace(' ','')
  let obj = {}
  let aaa =[]

  Array.from(newStr).map((item,index)=>{
    if(aaa.indexOf(item)!==-1){
      if(obj[item]){
        obj[item]++
      }
    }else {
      aaa.push(item)
      obj[item] =1
    }
  })

  return obj
}

//好的实现
function count(str) {
    var obj = {};
    str.replace(/S/g,function(s){
        !obj[s]?obj[s]=1:obj[s]++;
    })
    return obj;
}

其实两个方法的思想是一样的，不过第二种，利用replace参数的函数巧妙的实现了遍历每个元素，确实佩服。

2.
题目描述
查找两个节点的最近的一个共同父节点，可以包括节点自身
输入描述:
oNode1 和 oNode2 在同一文档中，且不会为相同的节点

function commonParentNode(oNode1, oNode2) {
    for(;oNode1;oNode1=oNode1.parentNode){
        if(oNode1.contains(oNode2)){
            return oNode1;
        }
    }
}

该Node.contains()方法返回一个Boolean值，该值指示节点是否是给定节点的后代，即节点本身，其直接子节点之一（childNodes），子节点直接子节点之一等等。
应用了一个contains函数判断是否含有节点，从自身开始寻找一直循环到节点的最顶端节点。

3.
题目描述
根据包名，在指定空间中创建对象
输入描述:
namespace({a: {test: 1, b: 2}}, ‘a.b.c.d’)
输出描述:
{a: {test: 1, b: {c: {d: {}}}}}

function namespace(oNamespace, sPackage) {
    var arr = sPackage.split('.');
    var res = oNamespace;   // 保留对原始对象的引用

    for(var i = 0, len = arr.length; i < len; i++) {
        if(arr[i] in oNamespace) {  // 空间名在对象中
            if(typeof oNamespace[arr[i]] !== "object") {    // 为原始值
                oNamespace[arr[i]] = {};    // 将此属性设为空对象
            }
        } else {    // 空间名不在对象中，建立此空间名属性，赋值为空
            oNamespace[arr[i]] = {};
        }

        oNamespace = oNamespace[arr[i]];    // 将指针指向下一个空间名属性。
    }

    return res;

}

做了一半还是做不下去了，看了别人的代码发现自己还是有些地方没想到，有几点：

判断是否在对象中 in方法
如何递归的取到下一个对象内部的对象这里因为是引用类型所以开始的时候赋值一下就行了

4.
题目描述
按所给的时间格式输出指定的时间
格式说明
对于 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 结果为五

function formatDate(t,str){
  var obj = {
    yyyy:t.getFullYear(),
    yy:(""+ t.getFullYear()).slice(-2),
    M:t.getMonth()+1,
    MM:("0"+ (t.getMonth()+1)).slice(-2),
    d:t.getDate(),
    dd:("0" + t.getDate()).slice(-2),
    H:t.getHours(),
    HH:("0" + t.getHours()).slice(-2),
    h:t.getHours() % 12,
    hh:("0"+t.getHours() % 12).slice(-2),
    m:t.getMinutes(),
    mm:("0" + t.getMinutes()).slice(-2),
    s:t.getSeconds(),
    ss:("0" + t.getSeconds()).slice(-2),
    w:['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
  };
  return str.replace(/([a-z|A-Z]+)/g,function($1){
    return obj[$1]});
}
console.log(formatDate(new Date(1909894060000), 'yyyy-MM-dd HH:mm:ss 星期w')); //2030-07-10 14:07:40 星期三

还是熟悉的字符串replace对应字母，然后在对象中格式日期。

5.
题目描述
css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能

以 - 为分隔符，将第二个起的非空单词首字母转为大写
-webkit-border-image 转换后的结果为 webkitBorderImage

function cssStyle2DomStyle(sName) {
    return sName.replace(/(?!^)-(w)(w+)/g, function(a, b, c){
            console.log(a,b,c);   //-size s ize
            return b.toUpperCase() + c.toLowerCase();
        }).replace(/^-/, '');
}

console.log(cssStyle2DomStyle('font-size'));  //fontSize

发现replace方法好用了，以后还是要replace和正则多多结合。