前端面试题总结四

前言

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

正文

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

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

//自己思考
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 驼峰格式，请完成此转换功能

1. 以 - 为分隔符，将第二个起的非空单词首字母转为大写
2. -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和正则多多结合。