前端最新前沿面试题（ marksheng 私人版）

无论何时，都不要畏惧面试官，这只是一场技术交流而已！！！

一、flex布局的学习

• 采用Flex布局的元素，称为Flex容器（Flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（Flex item），简称"项目"。
• 每个弹性框布局包含两个轴，弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(crossaxis)。
• 弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(crossstart)/**侧轴终点(cross end)**描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由writing-mode 确立的方向（从左到右、从右到左，等等）。
• 根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size)，对应侧轴的称为侧轴尺寸(cross size)。

容器属性：

display:flex |  inline-flex

将元素定义为弹性容器，其子元素则成为弹性项目。

值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。

flex-direction

该属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

flex-direction:row   横向排列，内容从左到右

direction:row-reverse    横向排列，内容从右到左

flex-direction:column   众向排列，内容从上到下

flex-direction:column-reverse   众向排列，内容从下到上

flex-wrap属性（用于设置当项目在容器中一行无法显示的时候如何处理。）

direction: row; wrap: nowrap      表示不换行

flex-wrap:  wrap      正常换行，第一个位于第一行的第一个 

flex-wrap:  wrap-reverse 向上换行，第一行位于下方 

 flex-flow属性

 

二、节抖防流

防抖:  触发事件后在 n秒内函数只能执行一次，如果在 n秒内又触发了事件，则会重新计时

节流：连续触发事件但是在 n秒 中只执行一次函数。

三、原型

原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。

每个构造函数都具有prototype属性，我们将 "构造函数名.prototype" 称为原型

四、生命周期

創建前後 beforeCreate     created     ——————data

挂載前後 beforeMount    mounted    ——————dom

更新前後 beforeUpdate    updated    内存有數據，頁面和内存同步

銷毀前後 beforeDestroy     destroyed    還能訪問到data數據

五、jsonp跨域和反向代理跨域

jsonp的核心则是动态添加<script>标签来调用服务器提供的 js脚本。

参数通过url的方式传递,所以jsonp的 type类型只能是get ！

jsonp:ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

反向代理：

使用nginx搭建企业级接口网关方式
www.a.a.com不能直接请求www.b.b.com的内容，可以通过nginx，根据同域名，但项目名不同进行区分。什么意思呢？这么说可能有点抽象。假设我们公司域名叫www.nginxtest.com

• 当我们需要访问www.a.a.com通过www.nginxtest.com/A访问，并通过nginx转发到www.a.a.com
• 当我们需要访问www.b.b.com通过www.nginxtest.com/B访问，并通过nginx转发到www.a.a.com

我们访问公司的域名时，是"同源"的，只是项目名不同，此时项目名的作用只是为了区分，方便转发。如果你还不理解的话，先看看我是怎么进行配置的：

server {
        listen       80;
        server_name  www.nginxtest.com;
        location /A {
            proxy_pass  http://a.a.com:81;
            index  index.html index.htm;
        }
        location /B {
            proxy_pass  http://b.b.com:81;
            index  index.html index.htm;
        }
    }
我们访问以www.nginxtest.com开头且端口为80的网址，nginx将会进行拦截匹配，若项目名为A，则分发到a.a.com:81。实际上就是通过"同源"的域名，不同的项目名进行区分，通过nginx拦截匹配，转发到对应的网址。整个过程，两次请求，第一次请求nginx服务器，第二次nginx服务器通过拦截匹配分发到对应的网址。

六、闭包——内访外

概念          结论：闭包找到的是同一地址中父级函数中对应变量最终的值

查看更多

七、this指向

this 总是（非严格模式下）指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境；
除了不常用的with和eval的情况，具体到实际应用中，this指向大概可以分为四种：

1. 作为对象的方法调用；
2. 作为普通函数调用；
3. 构造器调用；
4. call 或 apply调用；

箭头函数中，this指向函数上层作用域的this；
构造器和普通函数的区别在于被调用的方式；
A,call(B) => 可以理解成在B的作用域内调用了A方法；
分析：

1、作为对象的方法调用

当函数作为对象的方法被调用时，this指向该对象

2、作为普通函数调用

当函数不作为对象的属性被调用，而是以普通函数的方式，this总是指向全局对象（在浏览器中，通常是Window对象）

3、构造器调用

除了一些内置函数，大部分Js中的函数都可以成为构造器，它们与普通函数没什么不同

构造器和普通函数的区别在于被调用的方式：
当new运算符调用函数时，总是返回一个对象，this通常也指向这个对象

4.call或apply调用

跟普通的函数调用相比，用call和apply可以动态的改变函数的this

5.箭头函数

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this。

因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

八、iframe的理解

iframe就是我们常用的一种标签

查看更多

九、TypeScript的好处

TypeScript解决了JavaScript的一大痛点，那就是动态类型。

JavaScript的动态类型简单、灵活，写起来很爽，但是不适用于大型项目，代码一多会难以维护，尤其是看别人的代码。而TypeScript则采用了静态类型，写法上虽然麻烦点，但是换来了更稳固的结构和清晰的逻辑，配合宇宙第一IDE VSCode的支持下，从此代码一遍过不再是梦想。

TypeScript是JavaScript的超集

 

 

十、动态路由传参

• query传参
• params传参
• 更多

十一、vuex的辅助函数

• ...mapState(["userid'])

十二、移动端配置视口信息

• 使网页的宽度自动适应手机屏幕的宽度
• <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

十三、栈内存和堆内存

更多

• 栈内存和堆内存都是存储数据的地方。

• 栈固定、堆不固定：

  因为栈内存中存储的值的大小是固定的，堆内存中存储值的大小不固定的。

• 5种基本数据类型：String、Number、Boolean、Null、null传递时是按值传递的，内存分配固定大小。

• let a = 1
  let b = a
  
  b = 3
   
  console.log( a ) // 1
  a=1因为1是基本数据类型，所以会在栈内存中分配固定大小的空间给a
  b=a因为a是基本数据类型，所以会在栈内存中分配固定大小的空间给b，并存入值为1

   

• 引用数据类型存在堆内存中，栈内存中存的是堆内存的地址，每次读取值时，先找到栈内存中的内存地址，在通过内存地址，找到在堆内存中的对应的对象。

十四、垃圾回收机制

什么是内存泄漏？

程序的运行需要内存，只要程序提出要求，操作系统或者运行是就必须供给内存。不再用到的内存，没有及时释放，就叫做内存泄漏。

解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其内存。

两种方法：标记清除，引用计数

查看更多

十五、$set

查看

十六、vue首屏加载慢，白屏的问题，怎么解决

为什么会首屏白屏               怎么解决

分包预下载    独立分包

十七、.sync修饰符

vue中我们经常会用v-bind(缩写为:)给子组件传入参数（父傳子）

• 事件名称被换成了update:age
• update：是被固定的也就是vue为我们约定好的名称部分
• age是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来

//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
 mounted () {
    console.log(this.$emit('update:age',1234567));
 }

十八、is:

is

可以直接传递一个组件（取實例化組件）

:is

是查找父组件中的一个赋值，然后找到相应的组件（取值）

十九、uni-app打包

二十、API的封装思路

查看     查看2

二十、vue.nextTick()的理解及使用

当数据发生变化时，视图不会立即更新，而是等到同一事件循环中所有数据变化完成之后，再统一更新视图

    （1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

    （2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

    （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

    （4）主线程不断重复上面的第三步。

查看更多

二十二、ES6新增特性

更多

23.vue3-proxy

更多

24.nocode

更多

过程

25.JS去重