记一次前端面试的小题 分析 -> 思考

前几天去万科的一个团队面试,面试官问的几个小题有点意思,回来思考后做一些解析

1,如何实现查找字符串里面出现次数最多的那个字符,他出现了几次,出现在哪位?

当时我认为应该拆分为数组进行对比(类似去重的思路),但是发现这样会出现其他问题,一时思路非常混乱,导致答得非常不好。回来后查阅一些答案,找到比较好的解法,但是这些答案基本只告诉你这样做,不会从更原理层的告诉你为什么可以这样做。下面会分析一个解法。

首先答案给出一个判断函数。

function check(str) {

         var temp = {}

         var max = 0;

        for(var i=0; i

            var slogan = str[i];

            if(temp[slogan]){

                temp[slogan]++

              }else{

                temp[slogan] = 1

              }

            }

//这个函数可以简单的返回{x:1,y:2}  x,y为键值对,1,2为出现次数。

相信看到这里你一定会想str[i]不是一个字符串吗,那temp[‘字符串’]判断为真是个什么鬼,++是搞啥用的?

这里就涉及到一个对象属性的问题。

我找到来自stackoverflow的一个解释

理解:Javascript的数组其实不像PHP或者其他一些语言一样拥有真正的字符串下标,当我们试图为一个js数组添加字符串下标的时候,其实就相当于为该数组对象添加了一个属性,属性名称就是我们所谓的“字符串下标”。由于为数组对象添加属性不会影响到同为该对象属性的length的值,因此该值将始终为零。

也就是说当你遍历temp[‘字符串’]的时候,他也就是undefined, 而因为JavaScript的undefined 不等于true ,所以这里他会走else分支,而因为我们这里给他设置为temp[slogan] = 1。所以他成为一个属性进入temp对象 ,此时temp对象应该是这样的 { 字符串:  1  }

而如果这个值有重复temp[‘字符串’],则会直接返回一个对象里面键值名相同的值 ,视为你在temp对象里面查找他嘛,很好理解,这里就会返回temp{字符串:1},当然如果这里找到了那么自然就走判断正确的分支,那么这里就是temp{字符串:2}

测试范例

同理这样这个函数就完成了查找字符串里面最大值的作用,那么下面我们就要把最大值输出并完成其他要求。

            for(var key in temp) {

                if(max <temp[key])

                     max = temp[key];

                }

            }

这里就是暴力遍历的和temp键值的数值进行比较,得出最大值。下面就根据我们找到的最大值和键值进行对比,indexOf找到所属位置,到此这个函数也就结束了。例外情况: 当出现两个字符次数想等的情况下,根据最后的遍历结果我们能猜到,此函数会直接把两个结果打印出来。

            for(var key in temp) {

                if(max==temp[key]){

                    console.log("最多的字符是" + key);

                    console.log("他首次出现在数组的第"+ parseFloat(str.indexOf(key)+1)+"位")

                    console.log("出现的次数是" + max);

                }

            }

        }

        var str = 'helloworld'

        check(str)

helloworld输出结果



其他小问题

2,slot插槽怎么理解

最重要的作用是 增强了组件的可配置性,曾经在公司一个项目使用过这方面,但其实发现用其他方法也可以实现。

3,flex布局实现一排3个同等大小的div,左边和右边的div距离中间的div1稳定保持为10px(简单)

4,   vue keep-alive的两个vue内置钩子 :activated 和 deactivated

5,面向对象理解

嗯,玄学

总的来说面试官问的问题可能某些比较刁钻,开发可能也遇不到,但是比较考验的是JavaScript基础知识的认知,例如如上对象的一些属性特征,还是要学习一个啊。

不过这些也还好,比起用es5实现一个object.create()还要简单一些的~笑,(广州某公司题目)



---------------update 5.10 --------------

隔了好久,发现现在实现它已经不用当时那么蛋疼的方法,而且更为快速了

var str = 'dsfjkskfjskfjksdjkfsjk23322332'

var changeStr = str.split('')

var obj = {}

changeStr.reduce((prev, cur) => {

    obj[cur] ? obj[cur]+=1 : obj[cur] = 1

    return prev

})

var max = {
   value: 0,

   key: ''

}


for(const [key, value] of Object.entries(obj)) {

    if (max.value < value) {

        max.value = value 

        max.key = key

  }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容