面试梳理(4.15-11:00)

一、TS中any 和 unknown的区别

借鉴于阮一峰笔记

1、any

​ (1)any 类型表示没有任何限制,该类型的变量可以赋予任意类型的值。

​ (2)变量类型一旦设为any,TypeScript 实际上会关闭这个变量的类型检查。即使有明显的类型错误,只要句法正确,都不会报错。

​ (3)实际开发中,any类型主要适用以下两个场合:

​ a、出于特殊原因,需要关闭某些变量的类型检查,就可以把该变量的类型设为any

​ b、为了适配以前老的 JavaScript 项目,让代码快速迁移到 TypeScript,可以把变量类型设为any。有些年代很久的大型 JavaScript 项目,尤其是别人的代码,很难为每一行适配正确的类型,这时你为那些类型复杂的变量加上any,TypeScript 编译时就不会报错。

​ (4)可能遇到的问题

a、类型推断问题:对于开发者没有指定类型、TypeScript 必须自己推断类型的那些变量,如果无法推断出类型,TypeScript 就会认为该变量的类型是any

b、污染问题any类型除了关闭类型检查,还有一个很大的问题,就是它会“污染”其他变量。它可以赋值给其他任何类型的变量(因为没有类型检查),导致其他变量出错。

2、unknown

(1)说明:

​ 为了解决any类型**“污染”其他变量**的问题,TypeScript 3.0 引入了unknown类型。它与any含义相同,表示类型不确定,可能是任意类型,但是它的使用有一些限制,不像any那样自由,可以视为严格版的any

(2)相似之处:

unknownany的相似之处,在于所有类型的值都可以分配给unknown类型。

(3)不同之处:

unknown类型跟any类型的不同之处在于,它不能直接使用。主要有以下几个限制:

aunknown类型的变量,不能直接赋值给其他类型的变量(除了any类型和unknown类型)

let v: unknown = 123;let v1: boolean = v; // 报错
let v2: number = v; // 报错

​ **b、**不能直接调用unknown类型变量的方法和属性

let v1: unknown = { foo: 123 };
v1.foo; // 报错let v2: unknown = "hello";
v2.trim(); // 报错let v3: unknown = (n = 0) => n + 1;
v3(); // 报错

二、vue和react分别是怎么解决样式污染的

1、vue

​ 只需在style标签上添加scoped即可

2、react
(1)module

.module.css是React为我们提供的一种解决办法,我们只需将css文件后缀改为.module.css

然后修改引入方式即可

(2)使用sass或less

​ 如果你的项目中使用了sass或者less,那更简单,则不需要修改为module.css即可直接引入.scss.less文件,其余使用方式与module一样,在这就不做展示了

三、ES6有哪些新特性

1、块级作用域和常量声明;
2、箭头函数;
3、默认参数值;
4、扩展运算符;
5、解构赋值;
6、类和模块;
7、简化的对象字面量;
8、迭代器和生成器;
9、promise对象;
10、模板字符串。

四、箭头函数为什么没有绑定this

1、因为箭头函数没有自己的作用域。所以箭头函数的this会和调用者共享一个作用域。这是es6出的。在适合的条件下可以解决一些问题2、补充一句,正常的函数都会有一个自己的作用域。

五、set 和map

1、set

(1)Set是ES6给开发者提供的一种类似数组的数据结构,可以理解为值的集合。

(2)它和数组的最大的区别就在于: 它的值不会有重复项。

2、map

(1)JavaScript中的对象,实质就是键值对的集合(Hash结构),但是在对象里却只能用字符串symbol作为键名。

(2)在一些特殊的场景里就满足不了我们的需求了,因此,Map这一数据提出了,它是JavaScript中的一种更完善Hash结构。

六、map和常规对象的区别

1、键类型:

​ Map 中的键可以是任意数据类型,包括对象、函数、基本数据类型等;
​ 而普通对象的键只能是字符串或者 Symbol 类型。

2、顺序保证:

​ Map 会保持插入顺序,而普通对象不会保证键值对的顺序。

3、大小获取:

​ Map 有 size 属性可以获取大小,而普通对象需要手动计算键值对的数量。

4、迭代:

​ Map 提供了迭代器(Iterator)可以直接进行迭代操作;
​ 而普通对象需要先将键转换成数组再进行迭代,或者使用 for…in 循环,但 for…in 循环可能会受到原型链影响。

5、继承:

​ 普通对象具有原型链,可能会受到原型链上属性的影响;
​ 而 Map 是一个纯粹的键值对集合,不会受到原型链的干扰。

七、flex布局

(1)容器属性:
  • flex-direction 调整主轴方向
  • flex-wrap 控制是否换行
  • flex-flow 是flex-direction、flex-wrap的简写
  • justify-content 调整主轴对齐(水平对齐)
  • align-items 调整侧轴对齐(单行垂直对齐)
  • **align-content ** 多行垂直对齐
(2)项目属性
  • align-self 自己的对齐方式 ,可以覆盖
  • order 控制子项目的排列顺序,用整数值来定义排列顺序,数值小的排在前面

八、flex:1的含义

说明:flex:1,其实就是 flex-grow:1;flex-shrink:1;flex-basis:0% 这三个属性的简写

  • flex flex-grow flex-shrink flex-basis 的简写
  • flex-grow : 分配剩余空间的相对比例(0)
  • flex-shrink :指定了 flex 元素的收缩规则 (1)
  • flex-basis :指定了 flex 元素在主轴方向上的初始大小 (auto)

九、vue-router两种路由实现方式

​ **说明:**Vue-router 有两种模式:Hash 模式和 History 模式。

​ 在开发的时候可以通过使用在路由配置中配置modehistory 这个属性的值来配置使用哪种路由,如果不配置这个字段就默认是 hash 模式。

  1. 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
  2. hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
  3. hash模式:
    1. 地址中永远带着#号,不美观 。
    2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式:
    1. 地址干净,美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。

十、react的useState定义的状态如何确保能拿到最新的值

useState的set操作是异步的,不能立刻取到新值,如果想立刻取到新数值,只能额外再定义一个useRef变量作为副本,在进行set操作的同时更新useRef变量的数值,useRef变量.current可以立刻取到(使用useRef是因为函数组件内不应该使用var/let定义变量,异步操作获取var/let变量数值取到的永远都是最初默认值,例如在click事件中)
useEffect(() => {console.log(name);
}, [name])

自定义useState主要思路其实是基于useState和useEffect,在useEffect获取到状态变化时回调callback函数,从而拿到新值

十一、useMemo和useCalback区别

useCallback和useMemo是一样的东西,只是入参有所不同;

1、useCallback缓存的是回调函数,如果依赖项没有更新,就会使用缓存的回调函数;

2、useMemo缓存的是回调函数的return,如果依赖项没有更新,就会使用缓存的return

返回的值类型不同
  • useMemo 返回的是计算值
  • useCallback 返回的是一个回调函数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/1940.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

龙迅LT8618SXB TTL /BT656/BT601/BT1120桥接到HDMI 1.4,低功耗HDMI1.4发射机

龙迅LT8618SXB描述: LT8618SX是Lontium基于ClearEdgeTM技术的低功耗版本HDMI发射机。它支持24位颜色深度HDMI1.4(高清多媒体接口)规范。它们完全向后兼容Lontium的第一代HDMI发射机LT8618EX。LT8618SX是一款高性能、低功耗的部件&#xff0c…

UART总线详解

UART原理介绍 Universal Asynchronous Receiver/Transmitter (UART) 是一种广泛应用于嵌入式系统、计算机硬件和通信设备中的串行通信接口。它负责将并行数据转换为串行数据进行传输,同时也能将接收到的串行数据转换回并行数据。UART采用异步通信方式,即…

国债逆回购介绍

在券商上开户后,有两种现金管理方式,一种是场内货币基金,一种就是国债逆回购。 什么是国债逆回购?就是有人拿国债作质押,找你借钱,到期还本付息。沪深两市都有自己的国债逆回购。都是1000块整数倍起购。其…

2W 隔离宽范围输入,单输出 DC/DC 电源模块——TP2L-2W 系列

TP2L-2W系列是一款高性能、超小型的电源模块,宽范围2:1输入,输出有稳压和连续短路保护功能,隔离电压为1.5KVDC、3KVDC,工作温度范围为–40℃到85℃。特别适合对输出电压的精度有严格要求的地方,外部遥控功能…

【STM32】嵌入式实验二 GPIO 实验:数码管

实验内容: 编写程序,在数码管上显示自己的学号。 数码管相关电路: PA7对应的应该是段码,上面的图写错了。 注意:选中数码管是低电平选中;并且用74HC595模块驱动输出的段码, 这个模块的学习可以…

shell--for循环

1.带列表for循环 语法格式 for 循环变量 in 列表 do执行语句... done 在上面的语法中,循环变量是每次循环时得到的列表的某一个数据,当循环一次结束后,再获取另一个数,然后再执行 do 里面的语句,依次类推&#xff0…

数学建模国赛,时间怎么安排,每个时间段应该完成什么事情才能确保进度?

目录 2024全国大学生数学建模思路见文末名片 第一天(开赛日) 第二天 第三天 第四天 2024全国大学生数学建模思路见文末名片 在数学建模比赛中,时间节点的进度安排对于确保团队在有限时间内高效率地完成比赛至关重要。精确的时间管理不仅能帮…

字符数组和字符串题

1.字符数组(1-2) 下面的程序段将输出 ▁▁▁C▁▁ 。 char s[10] "abcd"; printf("%d\n", sizeof(s)); A.4 B.5 C.10 D.11 2.字符数组(1-3) 下面的程序段将输出 ▁▁C▁▁▁ 。 char s[] "abcd"; printf("%d\n", strlen(s))…

JAVA基础之垃圾收集器

一 JVM垃圾收集 分代收集思想 当前虚拟机的垃圾收集一般采用分代收集算法,这种算法本身没有创新性,只是根据对象存活周期的不同将内存分为几块。一般将java堆内存分为新生代和老年代,这样我们就可以根据不同年龄到的特点选择不同的垃圾收集…

学之思考试系统环境启动QA

学之思考试系统环境启动Q&A 目录 学之思考试系统环境启动Q&A后台代码启动失败:前台代码启动失败常见解决方式参考资料后台代码启动失败: 后端代码启动不成功,不能够自动导入maven,配置依赖; 使用idea打开到:\xzs-master\xzs-mysql-master\source\xzs这个路径下;…

SQL UNION

在SQL中,UNION 是一个用于合并两个或多个 SELECT 语句结果集的操作符。使用 UNION 时,结果集会去重,只包含唯一的行。如果保留重复的行,可以使用 UNION ALL。 以下是 UNION 的一些关键点: 1. 去重:UNION 默…

ruoyi-cloud-plus添加一个不要认证的公开新页面

文章目录 一、前端1. 组件创建2. src/router/index.ts3. src/permission.ts 二、后端1. 设计思想2. ruoyi-gateway.yml3. 开发Controller 版本RuoYiCloudPlusv2.1.2plus-uiVue3 ts 以新增一个公开的课程搜索页面为例。 一、前端 1. 组件创建 在view目录下创建一个页面的vue…

Java面试题笔记(持续更新)

目录 Java基础 java中的Math.round(-1.5)等于多少? JDK和JRE的区别? 抽象类能被final修饰吗? 如何决定使用TreeMap还是HashMap? 迭代器Iterator是什么? Queue中的poll和remove有什么区别? 为什么要使用克隆&a…

web前端框架设计第五课-计算属性与监听属性

web前端框架设计第五课-计算属性与监听属性 一.预习笔记 1.计算属性 computed split():拆分 reverse():倒序 join():拼接 计算属性与方法,两者效果一致,但是computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 met…

Nodejs安装与配置--基于Linux系统--RedHat7.9

nodejs安装从未这么简单 1、nodejs版本设置? curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash - 其他版本如下: * https://rpm.nodesource.com/setup_16.x — Node.js 16 "Gallium" (deprecated) * https://rpm.nodesource.co…

为什么需要分布式存储

为什么需要分布式存储?这是个好问题,如下是我本人的部分理解。 分布式存储,相对应的是集中式存储。 作为存储系统,对客户应用而言,可以提供: 结构化业务,即块服务。非结构业务,即如…

2024 抖音欢笑中国年(五):Wasm、WebGL 在互动技术中的创新应用

前言 随着 Web 前端技术的不断发展,越来越多的新兴技术方案被引入到 Web 开发中,其中 Wasm 和 WebGL 作为前端领域的两大利器,为开发者带来了更多的可能性。 本文将结合2024 年抖音欢笑中国年的部分项目,重点介绍如何利用 Wasm 和…

javaScript3

javaScript 一.对象1.概念2.创建对象的三种方法(1).字面量创建(利用{})(2)变量、属性、函数、方法的区别(3).new Object创建(4).构造函数 3.new关键字的执行过程4.遍历对象(for..in) 二.内置对象 一.对象 1.概念 一组无序的相关属性和方法的…

前端开发攻略---Vue项目(Vue2和Vue3)引入高德地图,超详细,超简单,保姆级教程。

1、图片演示 2、引入前的准备 1、前往 高德开放平台 进行账号注册。如果手机上有高德地图App并且已经登录过,则可以直接选择登录 2、注册/登录完成后来到应用管理-->我的应用 3、点击创建新应用 4、填写好应用名称和选择应用类型 5、填写好后点击添加Key 6、填写…

上市公司-企业数据要素利用水平数据集及参考文献(2010-2022年)

01、数据介绍 企业数据要素利用水平是指企业在其生产经营活动中,对数据的收集、处理、分析和应用的能力及效果。这种利用水平的高低直接反映了企业在数字化时代中的竞争力和创新能力。 本数据参考《中央财经大学学报》史青春(2023)老师的研…