Skip to content

Latest commit

 

History

History
134 lines (89 loc) · 9.44 KB

突击.md

File metadata and controls

134 lines (89 loc) · 9.44 KB
Raw

突击面试

JS

  • 原型是一个对象, 任何一个对象都可以成为原型, 并让其他对象继承

  • constructor 属性始终指向创建当前对象的构造函数

  • prototype 属性是每个 函数对象 ( function ) 都有的属性, 被称为原型对象, proto 属性是每个对象都有的属性, 是指向该原型对象的内部指针.

  • javascript 变量是松散类型变量,意味着可以给变量赋值任意类型,可以分为 基本类型 引用类型 两类

    • 基本类型 : 包括 Undefined, Null, Boolean, Number 和 String 五种基本数据类型 当复制基本类型的值时会在变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上,两个变量互相操作 而不受影响
    • 引用类型 : 保存在内存中的对象们, 不能直接操作, 只能通过保存在变量中的地址引用对其进行操作 当一个变量向另一个变量中赋值引用类型的值时,同样会吧存储在变量对象中的值复制一份到新变量,但是这个值只 是一个指针,而这个指针指向的是存储在堆中的一个对象.复制结束之后,两个变量实际上引用一个对象,因此改变一 个变量,就会影响另一个变量

  • Object.assign 浅复制,是因为这种复制只能复制一层,在多层嵌套的情况下依然会出现副作用.

  • Set：

    成员唯一、无序且不重复. [value, value], 键值与键名是一致的（或者说只有键值, 没有键名）. 可以遍历, 方法有：add、delete、has. WeakSet：

    成员都是对象. 成员都是弱引用, 可以被垃圾回收机制回收, 可以用来保存 DOM 节点, 不容易造成内存泄漏. 不能遍历, 方法有 add、delete、has. Map：

    本质上是键值对的集合, 类似集合. 可以遍历, 方法很多可以跟各种数据格式转换. WeakMap：

    只接受对象作为键名（null 除外）, 不接受其他类型的值作为键名. 键名是弱引用, 键值可以是任意的, 键名所指向的对象可以被垃圾回收, 此时键名是无效的. 不能遍历, 方法有 get、set、has、delete.

  • 向 Set 加入值的时候, 不会发生类型转换, 所以 5 和"5"是两个不同的值. Set 内部判断两个值是否不同, 使用的算法叫做“Same-value-zero equality”, 它类似于精确相等运算符

  • Immutable 实现的原理是 Persistent Data Structur（持久化数据结构）, 对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象, 同时使用旧数据创建新数据时, 要保证旧数据同时可用且不变,对象树中一个节点发生变化, 只修改这个节点和受它影响的父节点

  • Promise 必须为以下三种状态之一：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）. 一旦 Promise 被 resolve 或 reject, 不能再迁移至其他任何状态（即状态 immutable）.

  • Promise 是异步编程的一种解决方案： 从语法上讲, promise 是一个对象, 从它可以获取异步操作的消息；从本意上讲, 它是承诺, 承诺它过一段时间会给你一个结果.

    promise 有三种状态：pending(等待态), fulfiled(成功态), rejected(失败态)；状态一旦改变, 就不会再变. 创造 promise 实例后, 它会立即执行.

    最大问题是代码冗余, 原来的任务被 Promise 包装了一下, 不管什么操作, 一眼看去都是一堆 then, 原来的语义变得很不清楚. 为了解决 Promise 的问题, async、await 在 ES7 中被提了出来, 是目前为止最好的解决方案

    • 代码臃肿.
    • 可读性差.
    • 耦合度过高, 可维护性差.
    • 代码复用性差.
    • 容易滋生 bug.
    • 只能在回调里处理异常.

  • Generator 函数是 ES6 提供的一种异步编程解决方案,一是, function 关键字与函数名之间有一个星号；二是, 函数体内部使用 yield 语句, 定义不同的内部状态（yield 语句在英语里的意思就是“产出”）. 协程简单来说就是多个线程互相协作, 完成异步任务

React

  • React 渲染&优化 在 React16 版本之后,生命周期更新了静态方法 getDerivedStateFromProps,主要是解决异步渲染问题,分 为 比较阶段 和 更新阶段 .

    由于 React 在更新节点时,如果父节点改变,子节点也会相应改变(diff 算法),所以标识子节点使得组件在比较时更快找出改变的节点,加入 Key 可以使这一过程更容易.所以性能优化上,主要集中在一下几点: 避免没有必要的卸载和更新

    • 保持标签和 DOM 结构的稳定性
    • 避免重复渲染,可以使用 shouldComponentUpdate 生命周期来对比有无变化的 props 和 state 来避免组件更新,对于基本类型和引用类型的不同所带来的 shouldComponentUpdate 周期无效的情况,可以看一下 immutable 的使用.
    • 分离组件,尽量避免父组件的更新. 比如,一个父组件里有循环出来的子组件,在更新 state 改变子组件数量或者值的时候,可以把改变的过程放在子组件完成或者是在父组件时将改变后的数据赋值给一个变量传入子组件中

  • Redux 可靠规整, 有一整套最佳实践, 写大型应用时能避免很多坑

    • Action – 这是一个用来描述发生了什么事情的对象. Reducer – 这是一个确定状态将如何变化的地方. Store – 整个程序的状态/对象树保存在 Store 中. View – 只显示 Store 提供的数据.

  • MobX 轻便锋利, 概念不多上手容易, 在中小型应用中开发效率更高

    • observable 创建被依赖项, 在设计中即 state computed 被依赖项的计算值, 和 Vue 中的 computed 属性一致 action 动作, 用来修改 state, 显式的使用可以使逻辑更清楚, 当然不在 action 里修改 observable 也是允许的 observer 和 autorun/reaction/when, 前者是 derivation 即根据 state 衍生出的结果, 后者是 reaction 即 state 变化会触发的副作用（如 IO 等）

  • React 一直都提倡使用函数组件, 但是有时候需要使用 state 或者其他一些功能时, 只能使用类组件, 因为函数组件没有实例, 没有生命周期函数, 只有类组件才有 Hooks 是 React 16.8 新增的特性, 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性,

    • 状态逻辑难复用： 在组件之间复用状态逻辑很难, 可能要用到 render props （渲染属性）或者 HOC（高阶组件）, 但无论是渲染属性, 还是高阶组件, 都会在原先的组件外包裹一层父容器（一般都是 div 元素）, 导致层级冗余 趋向复杂难以维护：

    • 在生命周期函数中混杂不相干的逻辑（如：在 componentDidMount 中注册事件以及其他的逻辑, 在 componentWillUnmount 中卸载事件, 这样分散不集中的写法, 很容易写出 bug ） 类组件中到处都是对状态的访问和处理, 导致组件难以拆分成更小的组件

    • this 指向问题：父组件给子组件传递函数时, 必须绑定 this

    • 只能在函数内部的最外层调用 Hook, 不要在循环、条件判断或者子函数中调用 只能在 React 的函数组件中调用 Hook, 不要在其他 JavaScript 函数中调用

    • 顾名思义, 虚拟 DOM 并不是真实的 DOM 节点数据, 而是一个 javascript 对象, 这个对象被 React 维护着, 在组件的 mount 时, 该对象会被转化为一组真实的 DOM 树结构.

其他

  • Docker 是一种容器技术, 它可以将应用和环境等进行打包, 形成一个独立的, 类似于 iOS 的 APP 形式的「应用」, 这个应用可以直接被分发到任意一个支持 Docker 的环境中, 通过简单的命令即可启动运行.

    Docker 是一种最流行的容器化实现方案. 和虚拟化技术类似, 它极大的方便了应用服务的部署；又与虚拟化技术不同, 它以一种更轻量的方式实现了应用服务的打包.

    使用 Docker 可以让每个应用彼此相互隔离, 在同一台机器上同时运行多个应用, 不过他们彼此之间共享同一个操作系统.

    Docker 的优势在于, 它可以在更细的粒度上进行资源的管理, 也比虚拟化技术更加节约资源.

  • Flex 布局和 grid 布局都是创建网页布局的好方法. 但是, 面试官想知道的是两者的主要区别：它们具有哪些功能和更强大灵活的功能？以及应该在何时使用？ Flex 布局是 1D. 这意味着使用 flex 布局可以操作行或列, 但只能同时操作行和列中的任意一个. 在 grid 布局中, 您可以同时操作行和列. grid 布局功能非常强大, 因为它具有许多强大而有用的特性, 这些功能将有助于简化复杂布局的开发和控制. 可以通过 grid 进行大方向的布局, 使用 flex 进行具体内容的布局.

  • 低代码本质

    改变⽅式

    ⼀套标准的JSON结构⻚⾯/组件描述DSL，屏蔽了源码技术栈本身的差异，提供全新的技术⽣态底盘。 在其之上，能够基于特定技术栈（如React）实现低代码可视化开发平台和低代码物料⽣态。

    体验标准化：布局系统、平台强控，提供有效的约束⼒ ⻔槛降低：不写react、不写css、少些JS 效率提升：复⽤、⽣态丰富、改变⽣产关系 可扩展性：混合研发