interview_tx

Created At : 2024-07-26 21:14

Views 👀 :

Comment:

面试经过汇总

2024.7.26: 腾讯前端开发岗

今年的第二次面试, 腾讯打的电话, 我猜测实际那边的简历应该是我23年提交的一版, 在那一版里面我主要的技术栈还是vue, 实际上这一年以来我用react居多

进度: 暂时未知

面试问题:

在面试的过程中, 大致遵循的过程就是: js, css, react, 简历可能是比较旧所以没有拷打项目和优化, 重点考察了es6的内容

自我介绍

自我介绍就没啥说的了, 简单说一下自己目前主修react, 大三的, 没做过啥项目, 就没了,,,,

关于闭包, 有哪些有点和哪些缺点

闭包的基本概念, 这个老生常谈了, 重点是把作用域的问题说明白

闭包的优点:

数据封装和隐藏:闭包可以帮助创建私有变量和特权方法,增强数据的封装性。
函数柯里化:闭包可以用于实现函数柯里化,提高函数的复用性。
实现回调函数:闭包可以用于实现回调函数,提高代码的灵活性和可扩展性。
缓存数据:闭包可以用于缓存数据,提高应用程序的性能。

闭包的缺点: * 内存泄漏:如果闭包引用的外部变量过多,可能会导致内存泄漏。因为闭包会一直保留外部函数的执行环境,即使外部函数已经执行结束。 * 性能问题:过度使用闭包可能会降低程序的性能,因为闭包会占用更多的内存。 * 代码复杂度增加:使用闭包可能会增加代码的复杂度,使代码难以理解和维护。

关于箭头函数和常规函数的this指向问题

普通函数的this指向取决于函数的调用方式, 当函数作为对象的方法被调用的时候, this指向这个对象. 当函数被独立调用的时候, this指向全局对象(浏览器中为window, nodejs为global).

箭头函数的this指向取决于函数被定义时候的上下文环境, 箭头函数没有自己的this指向, 继承的是外部的this数值

另外, 普通函数的this指向可以通过call, apply, bind修改, 而箭头函数就不能用这三个进行修改

用const创建一个数组, 修改数组是可行的吗

在 JavaScript 中,使用 const 声明创建数组是可以的,并且可以修改数组的元素。这是因为 const 声明的特性是保证变量本身的引用不可变,而不是保证变量指向的值不可变。

...解引用符号怎么用, 效果是什么

面试的时候问了一个console.log(1,...[2,3,4],5)的输出是什么的输出结果是啥

很简单, 1,2,3,4,5, 解引用其实就是将其转化为用逗号分割的形式

将常规函数修改为箭头函数

这个没啥吧, 我甚至不知道他是想要问什么, 反正记得箭头函数的写法就行哩

http和https有什么区别

HTTPS 中这个多出来的 s 代表 secure(安全)。

安全性: HTTP 是不安全的,数据在传输过程中可能被窃听或篡改。 HTTPS 使用加密技术(SSL/TLS),可以确保数据在传输过程中的安全性和完整性。
默认端口: HTTP 的默认端口是 80。 HTTPS 的默认端口是 443。
加密机制: HTTP 不使用任何加密机制,传输的数据是明文的。 HTTPS 使用 SSL/TLS 加密协议,在应用层和传输层之间添加了加密/身份验证层。
身份验证: HTTPS 通过数字证书验证服务器的身份,确保连接到的是合法的网站。 HTTP 没有此功能,容易受到中间人攻击。

HTTPS 的主要特点包括: * 使用 SSL/TLS 加密技术,确保数据在传输过程中的机密性和完整性。 * 提供服务器身份验证,确保用户连接到正确的网站。 * 可选的客户端身份验证,提高访问安全性。

nodejs的优势是什么

优点: * 单线程事件驱动模型: Node.js 采用单线程事件驱动模型,能够高效地处理并发请求,避免了传统多线程模型中的锁定问题。 * 非阻塞 I/O 操作: Node.js 的 I/O 操作是非阻塞的,可以提高系统的吞吐量和响应速度。 * 跨平台: Node.js 可以在 Windows、macOS 和 Linux 等多种操作系统上运行。 * JavaScript 全栈: Node.js 允许开发人员使用 JavaScript 语言编写服务器端和客户端代码,提高了开发效率。 * 庞大的生态系统(但是不够成熟): Node.js 拥有丰富的第三方库和工具,可以快速搭建各种类型的应用程序。 * 适合 I/O 密集型应用: 由于 Node.js 的事件驱动和非阻塞 I/O 特性,它非常适合开发 I/O 密集型的 Web 应用程序,如聊天应用、实时游戏等。

缺点: * 不适合 CPU 密集型任务: 由于 Node.js 是单线程的,对于 CPU 密集型任务,如复杂的数学计算,它的性能会相对较差。 * 错误处理: 由于 Node.js 是单线程的,一旦出现错误,整个应用程序可能会崩溃。错误处理是 Node.js 开发中的一个挑战。 * 不适合企业级应用: Node.js 相对较新,缺乏对企业级应用的全面支持,如事务管理、权限控制等。 * 模块化: Node.js 的模块系统与浏览器 JavaScript 的模块系统不太一样,这可能会带来一些学习成本。 * 异步编程: Node.js 的异步编程模型可能会给开发人员带来一些挑战,尤其是对于那些习惯于同步编程的开发人员。

总的来说:nodejs的缺点可以概括为:生态不够成熟, 不适合企业级别的应用, 并且本质为单线程, 需要格外注意错误处理.

nodejs中的io操作是组合还是非阻塞的

非阻塞的, nodejs的事件队列模型可以了解一下

请聊一聊hooks, 在什么版本出现的, 有和没有有什么区别

Hooks 的出现:

React 16.8 版本: Hooks 是在 React 16.8 版本中引入的。此前,React 只支持类组件,函数组件只能用作展示组件。解决类组件的问题: Hooks 旨在解决类组件中状态管理、生命周期方法和逻辑复用等方面的问题。

没有 Hooks 时:

状态管理: 在类组件中,状态通过 this.state 和 this.setState() 进行管理。状态逻辑通常分散在不同的生命周期方法中,难以维护。
逻辑复用: 在类组件中,通过高阶组件、渲染属性等方式来复用逻辑,代码结构比较复杂。
生命周期方法: 类组件的生命周期方法比较多,需要开发者了解各个生命周期方法的作用和使用时机。

有了 Hooks 之后:

状态管理: Hooks 提供了 useState 钩子,可以在函数组件中直接管理状态。状态逻辑可以集中在一个地方,更易于维护。
逻辑复用: Hooks 提供了 useEffect、useContext 等钩子,可以更方便地复用组件逻辑。不再需要高阶组件、渲染属性等复杂的模式。
生命周期方法: Hooks 提供了 useEffect 钩子,可以替代类组件中的生命周期方法。开发者只需关注业务逻辑,而不需要了解各个生命周期方法的细节。

清除浮动有什么方法

使用clear属性清除浮动
这个我知道的还真不是特别多, 因为使用flex布局以后这些东西都可以避免掉了

常见的块级元素都有什么, 如何修改为行内块

常用的块级元素包括:div, h, 列表元素, 表单元素, 表格元素, 以及一些语义化元素比如header

想要一个块级元素修改为行内块元素, 可以使用 display: inline-block;

es6中对象的length是什么(这个没听清是啥)

前端中BFC是什么概念(还真不太会)

BFC(Block Formatting Context)，即块级格式化上下文,是 CSS 中的一个重要概念。它是页面中的一个渲染区域,并且有一套自己的渲染规则。

这样就避免了外边距塌陷等等的情况

1.BFC内部的BOX会垂直方向，一个一个放置。

2.box处置方向之间距离，由margin决定，属于同一个BFC内的连个相邻BOX的margin会重叠

   如：第一个容器设置下外边距为100px , 第一个容器下面的第二个容器设置上外边距为200px.当出现这种情况时，2个容器之间距离只有200px.
   也就是所谓的外边距塌陷.

3.BFC的区域不会与float box发生重叠

    如 ：自适应两栏布局,解决悬浮元素覆盖问题。

4计算BFC的高度时，浮动元素也参与计算

    如：解决浮动造成的高度塌陷

5.BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

6每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

常见的创建BFC的情况就是flex布局

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
overflow 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）。

一个括号匹配的算法题目

一个括号匹配的题目, 可以使用栈进行操作, 不过这种操作方法思路是对的但是太反锁了

具体的题目描述:

一共有三种等级的括号, 从大到小分别为:{}.[],(), 同级的括号可以进行嵌套 (()), 高级的括号可以嵌套低级的括号, 给出一个字符串例如(){}[]{()()[()]}判断是否正确嵌套, 以及正常闭合

感觉是leetcode20题的魔改

我的思路就是使用栈, 如果栈为空, 旧将目前遍历的字符填入, 否则, 就看遍历到的字符能不能和栈顶端的字符对应, 如果对应则弹出栈, 如果可以嵌套则继续加入栈, 如果违反规则旧报错

面试官给了一个新的思路: 使用字面常量, 也就是键值对, 来避免掉冗杂的判断


const str='{[][()]()}'

//这个语法叫对象字面量, 其实创建的就是一堆键值对 map['}']这样子调用
const map={
    '}':'{',
    ']':'[',
    ')':'(',
}

const lexical=(str)=>{
    const stack = [];
    const arr =str.split('')//划分为数组
    for (let i = 0; i < arr.length; i++) {
        if(stack.length==0){
            stack.push(arr[i])
        }else{
            if(map[arr[i]] ){ //如果遍历进来的是闭括号
                if(map[arr[i]]!==stack.pop()){
                    return false
                }
            }else{ //如果遍历到的是开括号, 就根据目前的栈顶元素进行计算
                const char=stack[stack.length-1]
                if((char=='{')||(char=='['&&arr[i]!='{')||(char=='('&&arr[i]=='(')){
                    stack.push(arr[i])
                }else{
                    return false
                }
            }
        }
        
    }
    return stack.length === 0;
}

console.log(lexical('{()()[()]}'))

面试官没说全, 因此这个我只了解到了这里, 可以处理闭合, 但是处理不了优先级

剩下一些没问的题目

webpack之类的, 关于打包的问题, 没问, 也不清楚

需要总结的地方

总结, 前端该学算法还是学算法, 跑不掉

es6应该多看看

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 xranudvilas@gmail.com