面试梳理（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）相似之处：

​ unknown跟any的相似之处，在于所有类型的值都可以分配给unknown类型。

（3）不同之处：

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

​ a 、unknown类型的变量，不能直接赋值给其他类型的变量 （除了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 模式。

​ 在开发的时候可以通过使用在路由配置中配置mode 或history 这个属性的值来配置使用哪种路由，如果不配置这个字段就默认是 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 返回的是一个回调函数