【JS面试题】返回对象中指定层次的所有键名

简介: 返回对象中指定层次的所有键名

前几个月是面试的高峰期,我在群里看到了有几个小伙伴在面试时被问到了这样一个问题:


Q:封装一个函数key,传入两个参数,第一个为指定对象;第二个为指定的层次。函数作用是返回一个对象中指定层次的所有键名


例如现在有这样一个对象


    let obj = {    name: {        a: 1,        b: 2,        c: {            o: 9,            p: 10,            q: 11        }    },    age: {        m: 3,        n: 4    }
    }


    现在调用三次函数,分别为 key(obj, 1) 、key(obj, 2) 、key(obj, 3) 则得到以下结果


      key(obj, 1)   // 返回结果:['name', 'age']key(obj, 2)   // 返回结果:['a', 'b', 'c', 'm', 'n']key(obj, 3)   // 返回结果:['o', 'p', 'q']


      看它们当时讨论得挺激烈,方法各异,当时我就一想呀,这其实考察得就是一个递归,先递归获取每一层的键值,然后最后返回就可以了,我们来看一下代码思路是如何的吧


      A:  首先我们规定一下在递归过程中,存储数据的数据结构如何,结构类似这样:


        let arr = [    ['name', 'age'],  // 存放对象第一层的所有键值    ['a', 'b', 'c', 'm', 'n'],  // 存放对象第二层的所有键值    ['o', 'p', 'q']   // 存放对象第三层的所有键值]


        然后就来写一下封装的函数代码


          function key(o, level) {    // 创建空数组用于存储每个层次的键值    let arr = []    // 封装一个内部函数用于递归调用    function from(ob, l) {        // 遍历对象ob的第 l+1 层次的所有键值        Object.keys(ob).forEach(key => {            // 将key值添加到 arr 中存储            if(arr[l]) arr[l].push(key);            else {                arr[l] = [key]            }            // 这里做了一些优化,即不需要将原对象每一层都遍历出来            if(l !== level - 1) {                // 继续深入遍历下一层所有键名                from(ob[key], l + 1)            }        })         }    // 从原对象的第一层开始遍历    from(o, 0)    // 最后直接返回我们要的那一层的键值就可以啦    return arr[level - 1]   }


          所有的封装思路我都写在注释里啦,大家可以仔细看看,也可以亲自动手写一写。


          另外说一点小技巧,我在代码中其实略微得做了一点优化,这会给面试官留下很好的印象,因为他会发现你很细心,还会注意提高代码的运行效率。所以也建议你们在面试的过程中,在能力范围内对代码优化一下,会更加分哦~


          本次的面试题就到这儿啦。我是Lpyexplore,一个前端的探索者,关注我~带你了解不一样的前端干货


          相关文章
          |
          29天前
          |
          JavaScript 前端开发
          如何在 JavaScript 中使用 __proto__ 实现对象的继承?
          使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
          |
          1月前
          |
          Web App开发 JavaScript 前端开发
          如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
          【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
          |
          20天前
          |
          JSON 前端开发 JavaScript
          JavaScript中对象的数据拷贝
          本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
          18 1
          JavaScript中对象的数据拷贝
          |
          1月前
          |
          JSON JavaScript 前端开发
          [JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
          本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
          34 2
          [JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
          |
          1月前
          |
          JavaScript 前端开发 图形学
          JavaScript 中 Math 对象常用方法
          【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
          |
          2月前
          |
          缓存 JavaScript 前端开发
          JavaScript中数组、对象等循环遍历的常用方法介绍(二)
          JavaScript中数组、对象等循环遍历的常用方法介绍(二)
          43 1
          |
          2月前
          |
          存储 JavaScript 前端开发
          js中函数、方法、对象的区别
          js中函数、方法、对象的区别
          21 2
          |
          2月前
          |
          JavaScript 前端开发 大数据
          在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
          在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
          31 0
          |
          2月前
          |
          Web App开发 JavaScript 前端开发
          前端Node.js面试题
          前端Node.js面试题
          |
          2月前
          |
          JavaScript 前端开发 索引
          JavaScript中数组、对象等循环遍历的常用方法介绍(一)
          JavaScript中数组、对象等循环遍历的常用方法介绍(一)
          28 0