一道面试题引起的思考

时间: 2018-11-23阅读: 1143标签: 面试

今天在认真干(划)活(水)的时候,看到群里有人发了一道头条的面试题,就顺便看了一下,发现挺有意思的,就决定分享给大家,并且给出我的解决方案和思考过程。题目如下:


实现一个get函数,使得下面的调用可以输出正确的结果

const obj = { selector: { to: { toutiao: "FE Coder"} }, target: [1, 2, { name: 'byted'}]};
get(obj, 'selector.to.toutiao', 'target[0]', 'target[2].name');
// [ 'FE Coder', 1, 'byted']


乍眼一看,这不就是实现一个lodash.get方法吗?看上去好像很简单。所以我就开始写了第一个版本。思想其实很简单,遍历传进来的参数,使用split将每一个参数分隔开,然后遍历取值,最终返回结果。

function get(data, ...args) {
    return args.map((item) => {
        const paths = item.split('.');
        let res = data;
        paths.map(path => res = res[path]);
        return res;
    })
}

一运行,果不其然,报错了。后来仔细看了一下提供的测试代码,发现居然有target[0]这种东西。。居然还带了个数组索引。


冷静分析一下,对于后面带了个索引的类型,比如'target[0]',我们肯定是要特殊对待的。所以,我们首先得先识别到这种特殊的类型,然后再对它进行额外处理。

这个时候,很快的就可以想到使用正则表达式来做这个事情。为什么呢?因为像这种带有索引的类型,他们都有一个特色,就是有固定的格式:[num],那么我们只需要能构造出可以匹配这种固定格式的正则,就可以解决这个问题。

对于这种格式,不难想到可以用这个正则表达式来做判断:/\[[0-9]+\]/gi,可是我们还需要将匹配值取出来。这个时候查了下正则表达式的文档(文档点击这里),发现有一个match方法,可以返回匹配成功的结果。那么就让我们来做个测试:

const reg = /\[[0-9]+\]/gi;
const str = "target[123123]";
const str1 = "target[]"

if (reg.test(str)) {
    console.log('test success');
}

if (!reg.test(str1)) {
    console.log('test fail');
}

const matchResult = str.match(reg);
console.log(matchResult); // ["[123123]"]


诶,我们现在已经找到了解决这种问题的方法,那让我们赶紧来继续改进下代码

function get(data, ...args) {
    const reg = /\[[0-9]+\]/gi;
    return args.map((item) => {
        const paths = item.split('.');
        let res = data;
        paths.map((path) => {
                  if (reg.test(path)) {
                    const match = path.match(reg)[0];
                    // 将target[0]里的target储存到cmd里
                    const cmd = path.replace(match, '');
                    // 获取数组索引
                    const arrIndex = match.replace(/[\[\]]/gi, '');
                    res = res[cmd][arrIndex];
                  } else {
                    res = res[path];
                  }
        });
        return res;
    });
}


const obj = { selector: { to: { toutiao: "FE Coder"} }, target: [1, 2, { name: 'byted'}]};

console.log(get(obj, 'selector.to.toutiao', 'target[0]', 'target[2].name'));

写完赶紧运行一下,完美,输出了正确的结果了。那么到这里就结束了?


改进

可是总感觉有点不妥,感觉事情没有那么简单。一般来说,面试题除了考验你解决问题的能力之外,可能还考验着你思考问题的全面性、严谨性。像上面那种写法,如果用户传入了一个不存在的path链或者一些其他特殊情况,就可能导致整个程序crash掉。想下lodash.get调用方式,即使你传入了错误的path,他也可以帮你做处理,并且返回一个undefined。因此,我们还需要完善这个方法。

function get(data, ...args) {
    const reg = /\[[0-9]+\]/gi;
    return args.map((item) => {
        const paths = item.split('.');
        let res = data;
        paths.map(path => {
            try {
                if (reg.test(path)) {
                    const match = path.match(reg)[0];
                    const cmd = path.replace(match, '');
                    const arrIndex = match.replace(/[\[\]]/gi, '');
                    res = res[cmd][arrIndex];
                } else {
                    res = res[path];
                }
            } catch (err) {
                console.error(err);
                res = undefined;
            }
        });
        return res;
    });
}

在这里,我们对每一个path的处理进行了try catch处理。若出错了,则返回undefined。哇,这样看起来就比较稳了。

那么,有没有别的解决方法呢?

群里有一个大佬提出了一种更简单也很取巧的解决方案,就是通过构建一个Function解决这个问题(Function的详细介绍点击这里)。由于代码很简单,我就直接贴出来了:

function get(data, ...args) {
    const res = jsON.stringify(data);
    return args.map((item) => (new Function(`try {return ${res}.${item} } catch(e) {}`))());
}

const obj = { selector: { to: { toutiao: "FE Coder"} }, target: [1, 2, { name: 'byted'}]};

console.log(get(obj, 'selector.to.toutiao', 'target[0]', 'target[2].name', 'asd'));

看完之后,就两个字,牛逼。

这种方法我承认一开始我确实没想到,确实是很奇技淫巧。不过仔细思考了下,其实很多框架都用到了这个奇技淫巧。比如说vue里,就使用new Function的方式来动态创建函数,解决执行动态生成的代码的问题。

再比如说,Function.prototype.bind方法里(我写了个类似的bind方法:仓库),也使用了Function来解决一些问题(fn.length丢失问题)。说明这个东西还是挺有用的,得学习了解一波,说不定哪天就用到了。


总结

学习完之后,最重要就是要总结,只有总结下来了,知识才是你自己的。那么我来总结下文章想表达的内容

对于具有固定格式的字符串,可以考虑使用正则表达式来识别和匹配。

实现一个功能的时候,不要只考虑正常情况,要多考虑一些非正常情况,比如输入格式不对、用户不按套路来或者因为一些奇奇怪怪的事情报错。并且能对可预见的非正常情况做一个容错处理。

有时候还是可以多学习了解一下一些黑科技(比如Function),说不定哪天就可以用它来解决问题。

本文地址在->本人博客地址, 欢迎给个 start 或 follow

原文来源:https://github.com/chenjigeng/blog/blob/master/一道面试题引起的思考.md


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1402

程序员面试IT公司,这些地方你要注意!

不管是应届生还是在职人员,都会面临着各种面试问题,网上有很多面经,但是大部分都是和技术相关的,总结有哪些技术需要掌握等等。但是我觉得,面试本来就是一个双向的选择过程。

35道必须要清楚的 React面试题

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中,并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤,整个过程被称为调和。函数组件和类组件当然是有区别的

程序员如何拿下编程面试?

多年以来,我在好几家公司工作过,所以我的面试技巧得到了很好的磨炼,而且我参与面试的过程也教会了我该说什么、该做哪些准备,以及如何面试。在这篇指南里,你会了解到面试的概况、面试取得成功的六大步骤,以及我在考察数据结构和算法时所考虑的方面

技术面试官的9大误区

如果你做过技术面试官,就至少犯过下面9大误区中的一个:压制求职者,拿自己擅长的东西问求职者,寻找全才,根据自己喜好评判求职者,盲目相信求职者,自己说得太多,让求职者说得太少,不了解公司、团队、产品和岗位职责,不清楚自己在面试中的角色和职责

前端面试题汇总(主要为Vue)

毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧。。。。

前端面试常见功能的简单实现

答案以实际面试为背景,一些细节会照顾不到,例如 promise 的实现只应对了简单的情况,这些基本满足面试,大家可以根据情况继续深入学习,例如 underscore 源码

前端同学经常忽视的一个JavaScript面试题

这几天面试上几次碰上这道经典的题目,特地从头到尾来分析一次答案,这道题的经典之处在于它综合考察了面试者的JavaScript的综合能力,包含了变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等知识

程序员面试的时候,大家都中过什么套路?

利用面试人员解决难题,之前有网友爆料自己在面试一家创业公司的时候,最开始只是一位面试官在场,面着面着整个开发组的人都过来了,围绕面试者擅长的数据库开发,提出了非常具体的问题。

有趣的Js面试题_如何让 (a == 1 && a == 2 && a == 3) 返回 true

题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。

提高你的 JavaScript 技能10 个面试题

刷题是我们提高自己技术的一种好方法。下面的问题很有挑战性和“指导性”。如果你知道该怎样回答,那意味着自己的水平很好,但是如果你发现自己答错了,并能够搞清楚为什么错,我认为那会更好!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!