HTTP

HTTP 和 HTTPS 的区别？

1.HTTPS 是 HTTP 协议的安全版本，HTTP 协议的数据传输是明文的，是不安全的，HTTPS 使用了 SSL/TLS协议进行了加密处理，相对更安全

2.HTTP 和 HTTPS 使用连接方式不同，默认端口也不一样，HTTP 是80，HTTPS 是443

3.HTTPS 由于需要设计加密以及多次握手，性能方面不如 HTTP

4.HTTPS 需要SSL，SSL 证书需要钱，功能越强大的证书费用越高

POST 和 GET 的区别？

1.GET 传递参数直接暴露在 URL 上，POST 传递参数放在 Request body 中

2.GET 在 URL 中传递参数是有长度限制，而 POST 没有

3.GET 在浏览器回退时是无害的，而 POST 会再次提交请求

4.GET 请求只能进行 url 编码，而 POST 支持多种编码方式

5.GET 请求参数会被完整保留在浏览器历史记录里，而 POST 中的参数不会被保留

6.GET 产生的 URL 地址可以被 Bookmark，而 POST 不可以

7.GET 请求会被浏览器主动 cache，而 POST 不会，除非手动设置

8.对参数的数据类型，GET只接受ASCII字符，而POST没有限制

HTTP 1.0/1.1/2.0 的区别？

HTTP 1.0

浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个 TCP 连接，完成请求处理后立即断开 TCP 连接，服务器不跟踪每个客户也不记录过去的请求，简单来讲，每次与服务器交互，都需要新开一个连接

HTTP 1.1

浏览器和服务器支持长连接，在一个 TCP 连接上可以传送多个 HTTP 请求和响应，减少了建立和关闭连接的消耗延迟。虽然复用了 TCP 连接，但是同一个 TCP 连接里面，所有数据通信是按次序进行的，服务器只有处理完一个请求，才会接着处理完下一个请求。如果前面的处理特别慢，后面就会有许多请求排队等待

HTTP 2.0

1.采用二进制格式而非文本格式 2.完全多路复用，而非有序并阻塞的、只需连接即可实现并行 3.使用报头压缩，减低开销 4.服务器推送

在地址栏输入 URL 敲下回车后发生了什么？

1.URL 解析

2.DNS 查询

3.TCP 连接

4.HTTP 请求

5.响应请求

6.页面渲染

DNS 协议是什么？

DNS 是一个域名系统，用来将域名和与之相对应的 IP 地址进行转换

CSS

盒子模型组成？标准盒子模型和怪异盒子模型的区别？

组成： content（内容）+ padding（内边距）+ margin（外边距）+ border（边框）

区别：怪异盒子模型 width/height 包含 padding 和 margin，而标准盒子模型不包含

CSS选择器有哪些？优先级？

ID选择器（#box）

类选择器（.box）

标签选择器（div）

后代选择器（#box div）

子选择器（div>a）

群组选择器（div,p）

伪类选择器（:link，:hover）

伪元素显示器（:after，:before）

属性选择器（[box] ）

优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器

CSS隐藏元素有哪些方法？

display:none           # 设置元素隐藏

opacity:0              # 设置属性透明度

visibility:hidden      # 设置元素不可见

width/height:0         # 设置宽高

position:absolute      # 将元素移出可视区

em、rem、vh、vw单位区别？

vh 和 vw 针对于窗口可视区的宽和高，把窗口的宽度和高度分为一百等份，100vh 表示占满整个窗口高度，50vw 表示占满窗口宽度的一半

em 和 rem 都是相对长度单位，em 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。rem 则总是相对于根元素 font-size 变化

元素水平居中的方法有哪些？

定位 + margin 负值（添加定位然后向上、向左移动自身盒子的一半）元素宽高已知时使用

<style>
    .father {
        position:relative;
        width:400px;
        height:400px;
    }

    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
        width: 200px;
        height: 200px;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

定位 + transform 负值 元素宽高未知时使用

translate ：根据自己当前位置移动，使用百分比时会根据自身的宽和高来移动

<style>
    .father {
        position:relative;
        width:400px;
        height:400px;
    }

    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        width: 200px;
        height: 200px;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

flex 弹性布局

display: flex;
justify-content: center;          # 垂直居中
align-items: center;              # 水平居中

如何实现两栏、三栏布局？

两栏（flex 弹性布局，给一边设置固定宽度，再让另一边占满剩余宽度）

<style>
    .box {
        display:flex;
    }
    
    .left {
        with:100px;
    }
    
    .right {
        flex:1;
    }
</style>

<div class="box">
    <div class="left">右边</div>
    <div class="right">左边</div>
</div>

三栏（和两栏差不多，只需要在加一个盒子设置固定宽度就可以实现）

<style>
    .box {
        display:flex;
    }
    
    .left {
        width:100px;
    }
    
    .right {
        width:100px;
    }
    
    .middle {
        flex:1;
    }
</style>

<div class="box">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>

单行、多行文本溢出用省略号表示？

单行

overflow: hidden;               # 溢出部分隐藏
text-overflow:ellipsis；        # 溢出部分进行修剪，设置为省略号
white-space: nowrap;            # 文本不换行

多行

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow : hidden;                   
text-overflow: ellipsis;

CSS画一个三角形？

当我们把一个正常盒子的宽和高都设置为0时，然后给四条边加上边框就会变成下图

如想要一个三角形只需要把其它颜色设置为透明即可

<style>
    div {
        width:0;
        height:0;
        border: 100px solid transparent;
        border-bottom-color: red;
    }
</style>

<div></div>

效果如下图

Vue

SPA（单页面）的理解？优、缺点？首屏加载慢如何解决？如何给 SPA 做 SEO？

什么是 SPA？

SPA（single page application），翻译为单页面应用程序，也就是只有一个页面，通过动态重写当前页面来与用户交互，在页面第一次加载完成之后不会在进行重新加载或者 URL 的跳转。

优点：

1.用户体验好、快，内容的改变不需要重新加载整个页面

2.前后端分离，分工明确

缺点：

1.不利于搜索引擎抓取

2.首次渲染速度较慢

首屏加载慢如何解决？

1.减小入口文件积（常用的手段是路由懒加载）

2.静态资源本地缓存（运用LocalStorage）

3.UI 框架按需加载

4.图片资源的压缩（icon图标可以使用字体图标、精灵图）

5.组件重复打包

6.开启 GZip 压缩

7.使用 SSR（服务端渲染，组件通过服务器生成 html 字符串，在发送到浏览器）

如何给 SPA 做 SEO？

1.SSR服务端渲染

2.静态化

3.使用 phantomjs 针对爬虫处理

为什么 data 属性是一个函数而不是一个对象？

当使用对象形式时，多个组件在使用数据时都指向一个地址，一个组件的数据发生改变，另一个组件的数据也会改变。当使用函数时，多个组件在使用数据时都会重新开辟一个内存地址，组件之间使用数据互不影响，所以使用函数而不是一个对象是为了防止数据污染

Vue中给对象添加新属性界面不刷新？如何解决？

因为没有通过Object.defineProperty设置成响应式数据

如何解决？

如果为对象添加少量的新属性，可以直接采用 Vue.set()

如果需要为新对象添加大量的新属性，则通过 Object.assign() 创建对象

computed 和 watch 区别？

computed: 计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值

watch：更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作

注：只要可以用 computed 实现的，用 watch 也都能实现

Vue组件和插件有什么区别？

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue

插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身

简单来说，插件就是指对Vue的功能的增强或补充

Vuex都有哪些属性？

state:{}         # 用来存放共享变量的地方

getters:{}       # 从基本数据（state）派生的数据，相当于 state 的计算属性

mutations:{}     # 提交数据更新的方法

actions:{}       # 主要用于异步操作，不能更改数据，需提交到 mutation 来更改数据

modules:{}       # 模块化vuex，可以让每个模块拥有自己的 state、mutation、action、getters

Vue Router 的工作模式？

hash 模式
history 模式

hash 模式

hash(读作：哈希)，其实就是一个# 符号，在一个 URL 中，# 后面的内容就是 hash 值

若将地址通过第三方收集 app 分享，若 app 校验严格，则地址会被标记为不合法
兼容性较好

history 模式

兼容性和 hash 模式相比较差
用部署上线时需要后端人员的支持，解决刷新页面服务端 404 的问题

Vuex 页面刷新数据丢失怎么解决？

使用 vuex-persist插件，它可以直接将状态保存至 cookie 或者 localStorage 中

Vue的性能优化？

1.对象层级不要过深，否则性能就会差

2.不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）

3.v-if 和 v-show 区分使用场景

4.computed 和 watch 区分场景使用

5.v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if

6.大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格

7.防止内部泄露，组件销毁后把全局变量和时间销毁

8.图片懒加载、路由懒加载、异步路由

9.第三方插件的按需加载

10.适当采用 keep-alive 缓存组件

11.防抖、节流的运用

12.服务端渲染 SSR or 预渲染

new Vue() 这个过程中做了些什么?

new Vue的时候调用会调用_init方法
- 定义 $set、$get 、$delete、$watch 等方法
- 定义 $on、$off、$emit、$off等事件
- 定义 _update、$forceUpdate、$destroy生命周期
调用$mount进行页面的挂载
挂载的时候主要是通过mountComponent方法
定义updateComponent更新函数
执行render生成虚拟DOM
_update将虚拟DOM生成真实DOM结构，并且渲染到页面中

v-show 和 v-if 的共同点？区别？使用场景？

共同点

都能控制元素在页面是否显示

区别

v-show:通过 display 属性对元素显示与隐藏，dom 元素依旧在

v-if:通过删除与增加 dom 节点来对元素显示与隐藏

使用场景

v-show：切换频繁

v-if：切换不频繁

Vue双向绑定原理？

通过 Object.definePropert 中的 getter 和 setter 来劫持数据，然同通过消息的订阅与发布来实现

Vue生命周期？（从上往下依次为生命周期执行顺序）

beforeCreate          # 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务

created               # 组件初始化完毕，各种数据可以使用，常用于异步数据获取

beforeMount           # 未执行渲染、更新，dom未创建

mounted               # 初始化结束，dom已创建，可用于获取访问数据和dom元素

beforeUpdate          # 更新前，可用于获取更新前各种状态

updated               # 更新后，所有状态已是最新

beforeDestroy         # 实例销毁之前，此时实例仍然可以使用

destroyed             # 完全销毁一个实例，可清理它与其它实例的连接，解绑它的全部指令及事件监听

还有另外三个

activated（keep-alive 缓存的组件激活时）、deactivated（keep-alive 缓存的组件停用时调用）、errorCaptured（捕获一个来自子孙组件的错误时被调用）

v-if 和 v-for 为什么不建议使用?

v-for 优先级比 v-if 高，所以同时用在同一元素上会带来性能上的浪费（每次渲染都会先循环在进行条件判断），如果想要避免这种情况，可以在外面嵌套 <template> 标签

Vue组件之间通信的方式有哪些？

父传子： props、ref

子传父：$emit

兄弟相传：$bus

复杂关系：Vuex

Vue中常用的修饰符？

表单修饰符

lazy（在我们填写完信息，光标离开标签的时候，才会将值赋予给 value，也就是在 change 事件之后在进行信息同步）

trim（自动过滤用户输入的首空格字符，而中间的空格不会过滤）

number（自动将用户输入的值转为数值类型，但如果这个值无法被 parseFloat 解析，则会返回原来的值）
事件修饰符

stop（阻止事件冒泡，相当于调用了 event.stopPropagation）方法

prevent（阻止了事件的默认行为，相当于调用了 event.preventDefault）方法

self （只当在 event.target 是当前元素自身时触发处理函数）

once （绑定事件只能触发一次）

capture（使事件触发从包含这个元素的顶层往下触发）

passive

native
鼠标按钮修饰符

left（左键点击）、right（右键点击）、middle（中键点击）

Vue中的$nextTick作用？

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

Vue中key的作用？

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点

keep-alive理解？

keep-alive 是 vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM，当在某些场景下不需要让页面重新加载时我们可以使用keeplive

关于自定义指令应用场景？

表单防止重复提交
图片懒加载
一键 Copy 的功能

Vue中的过滤器？

filter （过滤器）就是对数据进行加工处理后返回过滤的数据在进行调用处理，原数据不会发生改变，通常用来单位转换、文本格式化、事件格式化之类等

JavaScript

JavaScript中的数据类型有哪些？存储区别？

基本类型：

Number、Null、String、Symbol、Undefined、Boolean、bigInt

引用类型：

Object、Array、Function、Date、RegExp

存储区别？

声明变量时不同的内存地址分配：

1.简单类型的值存放在栈中，在栈中存放的是对应的值

2.引用类型对应的值存储在堆中，在栈中存放的是指向堆内存的地址

不同的类型数据导致赋值变量时的不同：

1.简单类型赋值，是生成相同的值，两个对象对应不同的地址

2.复杂类型赋值，是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中的同一个对象

数组中常用的方法有哪些？

增： push()、 unshift()、 splice()、 concat()

删： pop()、shift()、splice()、slice()

改：splice()

查： indexOf()、includes()、find()

迭代方法：

some()、every()、forEach()、filter()、map()

对原数组有影响的方法： push()、unshift()、splice()、pop()、shift()

字符串的常用方法？

增：concat()
删：sice()、substr()、substring()
改：trim()、trimLeft()、trimRight()、repeat()、padStart()、padEnd()、toLowerCase()、toUpperCase()
查：chatAt()、indexOf()、startWith()、includes()

== 和 === 的区别？

== 会做类型转换，再进行值的比较，=== 不会做类型转换，类型相等，值也要相等

什么是防抖和节流？区别？应用场景？

节流：n秒内只运行一次，若在 n 秒内重复触发，只有一次生效

防抖：n秒后在执行该事件，若 n 秒内被重复触发，则重新计时

区别？

相同点：都可以使用 setTimeout 实现，目的都是降低回调执行频率节省计算资源

不同点：函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。函数节流，在一段连续操作中，每一段时间只触发一次，频率较高的时间中使用来提高性能。函数防抖关注一定时间连续触发的事件，只能最后执行一次，而函数节流一段时间内只执行一次

应用场景？

防抖在连续的事件，只触发一次回调的场景有：

1.搜索框搜索输入。只需用户最后一次输入完，再发送请求

2.手机号、邮箱验证输入检测

3.窗口大小 resize,只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有：

1.滚动加载，加载更多或滚动到底部监听

2.搜索框，搜索联想功能

内存泄漏？

指不再使用的内存没有被及时释放出来，导致该段内存无法被使用

深拷贝和浅拷贝的区别？

浅拷贝是拷贝一层，属性为对象时，浅拷贝是复制，两个对象指向同一个地址

深拷贝是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向不同的地址

闭包的理解？优缺点？

当一个内部函数被调用，就会形成闭包，闭包就是能够读取其它函数内部变量的函数

优点：

1.可以读取函数内部的变量

2.将变量始终保存在内存中

3.可以封装对象的私有属性和私有方法

缺点：

比较耗费内存、使用不当会造成内存溢出的问题

this?

1.this总是指向函数的直接调用者

2.如果 new 关键字，this指向 new 出来的对象

3.在事件中，this 指向触发这个事件的对象

同源策略？

同源指的是域名、协议、端口号相同

如何解决跨域？

1.jsonp跨域

2.document.domain + iframe 跨域

3.node.js中间件代理跨域

4.后端在头部信息里面设置安全域名

什么是内存泄露？

内存泄露是指不在用的内存没有被及时释放出来，导致该内存无法使用就是内存泄漏

typeof 与 instanceof 的区别?

typeof（返回一个变量的基本类型）

const rose = 1
console.log(typeof rose) // Number

instanceof(返回一个布尔值)

const rose = 1
const jisoo = '1'
console.log(rose instanceof jisoo) // false

箭头函数和普通函数的区别？

1.箭头函数比普通函数更简洁

2.箭头函数没有自己的 this

3.箭头函数没有自己的 arguments

4.箭头函数不能作为构造函数使用

5.箭头函数不能用作 Generator 函数,不能使用 yeild 关键字

6.箭头函数没有 prototype

7.call()、apply()、bind() 等方法不能改变箭头函数中的 this 指向

ES6

var、let、const之间的区别？

1.变量提升

var声明的变量存在变量提升，let 和const 不存在变量提升

2.暂时性死区

var 不存在暂时性死区，let 和 const 存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

3.块级作用域

var 不存在块级作用域，let 和const 存在块级作用域

4.重复声明

var 允许重复声明变量,let 和 const 在同一作用域不允许重复声明变量

5.修改声明的变量

var 和 let 可以，const 声明一个只读的常量。一旦声明，常量的值就不能改变

Set 和 Map 的区别？

Set：一种叫做集合的数据结构，是一堆无序的、相关联，且不重复的内存结构组成的组合，以值的性质存储元素（[值，值]）

Map：一种叫做字典的数据结构，是一些元素的集合。每个元素都有一个称作 key 的域，不同元素的 key 各不相同，以键值对的形式存储（['键','值']）

Set 和 Map 都可以存储不重复的值

Git

Git常用命令

# 初始化本地仓库
git init

# 将工作区所有文件添加到暂存区
git add .

# 将暂存区文件提交到版本库  
git commit -m "<提交说明>"

# 将版本库添加到远程仓库 
git push  <远程仓库名字> <远程仓库url地址>

# 将其它分支合并到当前分支  
git merge <分支名字>

# 查看所有分支
git branch

# 切换分支  
git checkout <分支名字>

# 删除本地分支  
git checkout -d <分支名字>

# 创建并设置为当前分支  
git checkout -b <分支名字>

# 查看提交历史
git log

# 查看所有操作记录
git reflog

# 查看远程仓库名字
git remote

# 查看远程仓库名字地址
git remote -v

# 删除远程仓库地址        
git remote remove <远程仓库名字>

# 指定默认的远程仓库，在每次提交时省略远程仓库名和本地分支参数
git push -u <远程仓库名字> <本地分支名字>

其它

前端登录流程？

1.初次登陆时，前端拿着用户名和密码调用后端登录接口，后端收到后进行验证，如果验证失败则前端返回一个错误信息。验证成功就给前端返回一个 token，前端把拿到的 token 存储到 vuex 和 localStorage 中，然后跳转页面

2.每次跳转到需要具备登录的页面时，都需要判断 token 是否存在，如果不存在跳转到登录页面，如果存在跳转到相应的页面（通常我们把它封装在路由守卫中）

3.在每次发送 get/post 请求的时候都应该在请求头中添加 token，后端拿到 token 进行判断，成功则返回数据，token 过期或者不存在则跳转到登录页面并清除本地用户信息（通常把它封装在请求拦截器中）

为什么 `token` 要同时存储到 `vuex` 和 `localStroage` 中？

1.vuex 存储数据是响应式的，刷新页面会导致数据丢失，localStorage存储到本地的数据是永久性的，但是数据不是响应式。

2.localStorage 中的数据是存放到磁盘中，而 vuex 的数据是存储到内存中，从内存中的读取速度远高于磁盘读取，所以要同时存储到 vuex 和localstorage

数组的常用方法？

push()
将一个或多个元素添加到数组的末尾，并返回该数组的新长度（改变原数组）

<script>
    const rose = ['盲僧','豹女']
    const total = rose.push('奥拉夫')
    console.log(rose)       // ['盲僧','豹女','奥拉夫']
    console.log(total)      // 3
</script>

unshift()
将一个或多个元素添加到数组的开头，并返回该数组的新长度（改变原数组）

<script>
    const rose = ['男枪','稻草人']
    const total = rose.unshift('努努')
    console.log(rose)       // ['努努','男枪','稻草人']
    console.log(total)      // 3
</script>

splice (start，deleteCount，item)
splice（指定修改的开始位置，移除数组元素的个数，要添加进数组的元素）

在数组的指定位置添加/删除一个或多个元素，如果只添加不删除，则返回一个空数组,如果删除了一个或多个元素，返回的是被删除的元素所组成的数组（改变原数组）

<script>
    // 从索引为 1 的位置添加一个 '石头人'

    const jisoo = ['鳄鱼','狗头','风女']
    const rose = jisoo.splice(1,0,'石头人')
    console.log(jisoo)      // ['鳄鱼','石头人',狗头','风女']
    console.log(rose)       // []
</script>

<script>
    // 从索引为 1 的位置添加一个 '石头人' ，并删除一个元素

    const jisoo = ['鳄鱼','狗头','风女']
    const rose = jisoo.splice(1,1,'石头人')
    console.log(jisoo)      // ['鳄鱼','石头人','风女']
    console.log(rose)       // ['狗头']
</script>

concat()
用于合并两个或多个数组（返回一个新的数组，原数组不发生变化）

<script>
    const rose = ['a','b']
    const jisoo = ['c','d']
    const lisa = rose.concat(jisoo)
    console.log(lisa)       // ['a','b','c','d']
</script>

pop()
删除数组中最后一个元素，并返回该元素的值（改变数组）

<script>
    const rose = ['a','b','c']
    const jisoo = rose.pop()
    console.log(rose)       // ['a','b']
    console.log(jisoo)      // 'c'
</script>

shift()
删除数组中的第一个元素，并返回该元素的值（改变数组）

<script>
    const w = [4,2,7]
    const h = w.shift()
    console.log(w)      // [2,7]
    console.log(h)      // 4
</script>

slice (start，end)
sile（提取起始处的索引包含该元素，提取终止处的索引不包含该元素）
提取数组中指定位置的元素（不改变原数组）

<script>
    const w = [2,1,5,3,63,24,100,39]
    const s = w.slice(4)
    consloe.log(s)      // [63,24,100,39]
    const o = w.slice(2,5)
    console.log(o)      // [5,3,63]
</script>

indexOf()
查找数组中元素的索引，如果不存在则返回 -1

<script>
    const w = [2,4,6]
    const a = w.indexOf(6)
    console.log(a)      // 2
    const s = w.indexOf(5)
    console.log(s)      // -1
</script>

includes()
用来判断一个数组是否包含一个指定的值，包含则返回 true ，否则返回 true

<script>
    const rose = ['猫咪','牛头','蛤蟆']
    const jisoo = rose.includes('猫咪')     
    console.log(jisoo)      // true
    const ww = rose.includes('马头')        
    console.log(ww)     // false
</script>

reverse()
将数组中的元素位置颠倒

<script>
    const w = [1,2,3]
    const s = w.reverse()
    console.log(s)      // [3,2,1]
</script>

forEach()
对数组的每个元素执行一次给定的函数

 <script>
    const jisoo = ['机器人', '锤石', '露露']
    jisoo.forEach(item => {
        console.log(item)
    })
    // 机器人
    // 锤石
    // 露露
</script>

查找数组中重复的元素？

<script>
    const arr = [1, 2, 2, 3, 4, 4, 5]
    const newArr = []
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j] & newArr.indexOf(arr[j]) === -1) {
                newArr.push(arr[j])
            }
        }
    }
    console.log(newArr)     // [2,4]
</script>

微信小程序

微信小程序中路由跳转方式有哪些？

wx.navigateTo(Object)         # 保存当前页面，跳转到某个页面

wx.redirectTo(Object)         # 关闭当前页面，跳转到某个页面

wx.switchTab(Object)          # 跳转到 tabBar 页面

wx.navigateBack(Object)       # 关闭当前页面，返回上一级或多级页面

wx.reLaunch(Object)           # 关闭所有页面，跳转到某个页面

微信小程序的优缺点？

优点

方便快捷、开发门槛低

缺点

1.用户留存较少

2.微信小程序最大只有2M，无法开发大型的小程序

3.比较受微信的限制，比如一些功能接口和一些内容

微信小程序的生命周期有哪些？

应用的生命周期（即小程序的生命周期，在 app.js 中调用）

onLanuch                 # 小程序初始化完成时触发，全局只触发一次

onShow                   # 小程序启动，或从后台进入前台显示时触发

onHide                   # 小程序从前台进入后台时触发

onError                 # 小程序发生脚本错误或 API 调用报错时触发

onPageNotFound           # 小程序要打开的页面不存在时触发

onUnhandledRejection     # 小程序未处理的 Promise 拒绝时触发

onThemeChange            # 系统切换主题时触发

页面的生命周期（当进入/切换一个页面的时候触发）

onLoad                  # 生命周期回调-监听页面加载（发送请求数据）

onShow                  # 生命周期回调-监听页面显示（请求数据）

onReady                 # 生命周期回调-监听页面初次渲染完成（获取页面元素）

onHide                  # 生命周期回调-监听页面隐藏（终止任务，如定时器或者播放音乐）

onUnload                # 生命周期回调-监听页面卸载（终止任务）

组件的生命周期

created                 # 组件实例刚刚被创建好时触发，此时不能调用 setData

attached                # 组件初始化完毕，此时可以对数据进行一些操作

ready                   # 页面初次渲染完成触发

moved                   # 页面隐藏之后触发

detached                # 当组件离开页面时触发

error                   # 每当组件方法抛出错误时执行

当存在应用生命周期和页面生命周期时，它的执行过程

onLaunch(App 打开小程序) -- > onShow(App) --> onLoad(pages) --> onShow(pages) --> onRead(pages) --> onHide(App 离开小程序)

小程序的发布流程？

上传代码（在开发者工具中上传）
提交审核（在微信公众号官网提交审核）
发布版本（审核通过之后即可发布）

提高微信小程序的手段？

采取分包，按需加载
减少图片资源
控制代码包的大小
请求在页面 onLoad 时加载，不需要等页面 ready 后异步请求数据
减少 https 请求，将数据存储到本地
合理使用 setData
使用自定义组件

前端面试题