前端知识点思维导图思维导图模板_ProcessOn思维导图、流程图

虚拟DOM

原因：真实DOM是浏览器渲染的核心，会触发浏览器的重绘和回流

解析HTML

生成DOM树

解析CSS

生成CSSOM树

生成渲染树

生成rander树

回流

根据渲染树进行计算位置，对元素进行布局

定义：
当元素的位置，大小，盒模型等发生修改，会触发浏览器的回流，重新计算布局

场景：
样式修改(影响布局)、DOM操作、浏览器环境变化

重绘

将节点的样式绘制到页面上

定义：
当元素样式发生修改，但是不影响元素布局的情况下，只需要绘制该元素的样式

场景：
只要不涉及：位置，尺寸，盒模型

合成

将页面的各个图层合并到页面上

原理

用js对象模拟真实DOM的结构和属性；内存中的操作远快于真实DOM的操作，Vue可以在内存中通过虚拟DOM计算出‘最小变更’，再一次性更新到真实DOM中

步骤

1、在rander阶段，生成虚拟的DOM树（VNode树）

2、当数据发生变化的时候，Vue重新执行rander，生成新的VNode树，然后通过Diff算法对比新旧的VNode树，找出两者“最小差异”

VNode：
{
tag:'div', // string
data:{ // VNodeData
class:'',
on:{}
},
children:[] // VNode[]
text:'' // 文本
elm: undefined， // 挂载的真实DOM
key: 1 // string/number
}

同层对比

只对比VNode树同一层级下的元素

key复用

列表节点有唯一Key值，Diff根据Key值匹配

3、更新真实DOM

如果tag/key不匹配，销毁节点，创建新节点并插入DOM

如果节点匹配，但是属性/内容变化，仅跟新节点的样式、内容、事件，不销毁节点

如果是列表节点，根据key调整顺序，复用

根实例

const app = new Vue({
el: '#app',
template: '<App/>',
components: { App }
})

Vue应用的起点，通过new Vue创建，挂在到#app上

组件

原理：跟根实例类似，形成树状结构，并非直接挂载到根实例上

单文件组件

通过imports引入

全局组件

注：必须在new Vue之前注册

使用vue.coponent({})注册

组件传参

父传子

父：属性绑定传递

子：用props接收

子传父

this.$emit('事件名', params)

配置

name

components

data

类型：function

作用：
定义组件的响应式数据，返回一个对象，确保每个组件实例数据保持独立

props

类型：Object

作用：
接收父组件传递的数据

methods

类型：
{[key:string]: Function}

作用：
定义组件方法，可以通过this访问组件实例

特点：

无缓存

手动触发

可执行任何操作

computed

类型：
{[key:string]: Function} | {get(){},set(){}}

作用：
定义计算属性，依赖自动缓存（区别于methods）

响应式

读取：触发get()

修改：触发set()

特点

缓存

computed属性具有缓存

脏数据标记：watcher含有属性 dirty
dirty属性为true的时候，读取computed会重新计算
dirty属性为false的时候，读取computed会使用缓存

响应式触发

有返回值

场景：需要处理复杂的逻辑判断

watch

类型：{[key:string]: Function}

作用：
监听数据变化并且进行回调

特点

可以监听data、props、computed的数据

响应式触发

无返回值

配置

immediate

在created阶段后会触发一次

deep

默认对象的属性发生变化的时候，不会触发watch，除非使用deep：true

生命周期

周期顺序

父beforeCreate => 父created => 父beforeMount =>
子beforeCreate => 子created => 子beforeMount =>
子mounted => 父mounted

父beforeDestroy => 子beforeDestroy => 子destroyed => 父destroy

生命周期钩子

beforeCreate

组件实例刚创建，实例属性（data、methods、computed等）均没初始化

几乎不用

created

组件实例创建完成，实例属性初始化完成，但是DOM还没有生成

用于数据初始化，发送请求

beforeMount

模板编译完成，但是没有挂载到页面

用于修改数据，且修改数据不会触发更新

mounted

组件已经挂在到页面，DOM已经生成

用于操作DOM，给DOM添加监听事件

beforUpdate

数据变化后，DOM更新前

可以获取DOM跟新前的状态，比如input框的值

updated

数据变化导致DOM更新后

可以获取跟新后的DOM

beforeDestroy

准备销毁前，数据任可以访问

用于清理计时器、事件绑定、取消未完成的请求

destroyed

组件消除

keep-alive

使用方式：使用<keep-alive>标签包裹子组件

被包裹的组件不会被销毁，而是进入缓存状态

生命钩子

activeated

当被缓存的组件被激活时

deactivated

当组件被缓存时触发

响应式原理

object.defineProperty()进行数据劫持

多层级对象会通过observer()进行递归劫持

通过发布-订阅进行视图页面更新

根本缺陷

无法监听对象的新增属性或删除属性

需要使用this.$set(this.newData, key, value)

nextTicket

原因：Vue对DOM的跟新是异步的，数据被修改后，不会立即更新DOM，而是将更新缓存起来，在下一次事件循环中更新，这样节省性能，避免频繁更新DOM

问题：导致更新数据后，立马访问DOM可能获取到的是旧的DOM状态

使用方式：
this.$nextTick(() => {
doSomething() // 确保执行函数时DOM已经更新完了
});

使用场景：需要在修改数据后，立马操作基于新数据渲染后的DOM的情况下

router

使用方式：
在new router的时候，将routes放进去

按需加载路由

在引入route的时候，component使用()=>import()

模式

history

兼容性差

SEO友好

参数可见在url后

基于H5的History API（pushState/replaceState）

hash

域名后携带 '#'

基于浏览器hashchange

VueX

使用方法

在new Vue的时候作为state引入

在组件内使用this.$state

核心配置

state

存储全局状态

const sotre = new Vuex.Store({
state:{},
mutation:{},
action:{},
getters:{}
})

mutation

修改状态的唯一方法

store.commit('funName')

action

用于处理异步

store.dispatch('actionName')

支持返回promise

getters

相当于组件内的computed

module

将store拆分为大小模块

与Vue2相比

响应式原理

Vue2的Object.defineProperty无法监听对象属性新增/删除，而且对于对象是递归监听嵌套对象

Vue3基于proxy，能代理整个对象，天然支持数组/对象的属性新增/删除，而且无需递归处理嵌套函数，性能更优

API风格

Vue2主要是使用options选项式写法

Vue3主要使用Composition组合式写法

setup

ref

reactive

虚拟DOM

Vue2局限

Diff是全量整个VNode对比，没有做到靶向diff

Vue2VNode结构冗余
全量属性结构，无论是否需要都包含在VNode内

Vue3改进

1、字段裁剪，标签实际使用了属性时才有该字段

2、通过标记法进行Diff对比，没有标记的标签直接跳过diff

3、进行靶向diff，不再全量diff

跳过空节点和注释

proxy

new Proxy({
get(target, prop){},
set(target, prop, value){},
deleteProperty(target, prop){},
})

参数

get

拦截对象的读取

set

拦截对象/数组的修改

deleteProperty

拦截delete操作

apply

拦截函数调用

组合式API

setup

在beforeCreate前执行，初始化Vue实例和数据

核心作用

声明响应式数据

ref

reactive

定义方法，compute、watch

导入其他函数

ref

用于包装基本类型

访问/修改需要使用.value(模板不需要)

也可以包装对象/数组

reactive

用于包装对象/数组

不能直接赋值，会丢失响应式

解决方案：使用ref替代reactive

包装基础类型会丢失响应式

computed

const doubleCount = computed(() => {
console.log('计算执行了'); // 依赖变化时才会重新执行
return count.value * 2;
});

返回的是ref对象

watch

watch(count, (newVal, oldVal) => {
console.log(`变化：${oldVal} → ${newVal}`);
}, { deep: true });

watchEffect

watchEffect(() => {
console.log(`count 变化：${count.value}`); // 自动追踪 count
});

无需指定数据源，无法获得改变前的值

组件通信

父传子Props

const props = defineProps({
msg: String,
count: {
type: Number,
default: 0
}
});

使用defineProps

父组件通过组件属性传递给子组件，子组件通过defineProps接收

子传父

const emit = defineEmits(['increment', 'updateMsg']);

const handleClick = () => {
emit('increment', 1); // 传递增量
emit('updateMsg', '来自子组件的消息');
};

使用defineEmits

在父组件通过定义函数，将函数绑定到组件属性上，在子组件内通过defineEmits传递

生命周期

同Vue2

pinia

export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: { double: (state) => state.count * 2 },
actions: { increment() { this.count++ } }
});

移除了mutation，可以在action中修改数据

支持ts

通信

在一个 store 的 actions 中直接导入并使用其他 store

模块化方式

区别于Vue2的Vuex.modules，pinia可以定义多个单独的store实现模块化

解构保持响应式

使用storeToRefs实现保持store响应式

小程序

与H5区别

运行环境

小程序运行在微信原生引擎上，H5运行在浏览器

性能

小程序更接近原生app，性能会比H5好

功能

可以调用微信的原生API，H5受浏览器限制

发布流程

小程序受微信审核

结构

app.js // 应用入口

app.json // 全局配置

app.less

project

语法

wxml

view：类似于div标签

scroll-view：可滚动的容器

swiper

轮播图容器

swiper-item

text

文本标签类似于span

selectable

image

video

audio

button

input

textarea

switch：相当于checkbox

radio-group/radio

checkbox-group/checkbox：复选框

css

默认组件隔离，通过@import url('./st.less')引用

不支持通配符*，hover需要通过hover-class使用

子主题

事件绑定

bindtap

绑定事件，支持事件冒泡

catchtap

绑定事件，阻止事件冒泡

bind:func

父子组件通信

数据传递

url传递

页面A在url中添加字段

页面B在onLoad生命钩子中获取

StorageSync

微信提供setStorageSync和getStorageSync

所有页面均可访问

使用globalData存储全局变量

关闭小程序后重置

步骤

在app.js中声明全局变量globalData

在其他页面通过getApp().globalData使用

组件通信

父传子

子组件声明properties

父组件在组件标签属性传参

子传父

子组件通过triggerEvent触发父组件绑定的方法

父组件通过绑定的方法触发事件，接收值的变化

配置文件

app.json

pages（url[]）：声明组件所有page路径，第一个为首页

subPackages：分包

window：设置所有页面的默认样式

tabBar：配置底部标签栏

preloadRule：分包预下载

page.json

同app.json的window

enablePullDownRefresh：仅在当前页面下拉刷新

component.json

component（boolean）：当前是否为自定义组件

externalClasses（str[]）：外部样式类，允许父组件传入的样式类

usingComponents（{string：url}[]）：引用其他自定义组件

styleIsolation

isolation（默认）：组件内样式不受外界干扰

apply-share：组件样式隔离，父组件样式影响子组件

share：组件和父组件的样式互相影响

生命周期

App

App({
onLaunch(options) {
console.log('小程序初始化完成', options);
},
onShow(options) {
console.log('小程序显示', options.scene); // scene 表示启动场景（如扫码进入）
},
onHide() {
console.log('小程序隐藏');
},
onError(err) {
console.error('发生错误', err);
}
});

onLaunch

小程序初始化的时候，全局只触发一次

onShow

小程序启动/从后台切换到前台

onHide

小程序从前天切换到后台

onError

小程序脚本错误

onPageNotFound

Page

Page({
onLoad(options) {
console.log('页面加载，参数：', options); // 接收 URL 中的参数
},
onShow() {
console.log('页面显示');
},
onReady() {
console.log('页面渲染完成');
},
onHide() {
console.log('页面隐藏');
},
onUnload() {
console.log('页面卸载');
},
onPullDownRefresh() {
console.log('下拉刷新');
// 刷新完成后停止刷新动画
wx.stopPullDownRefresh();
}
});

onLoad

页面加载时，只触发一次

onShow

页面显示时

onReady

页面初次渲染完成时触发，只触发一次

onHide

页面隐藏时触发

onUnLoad

页面卸载时

onPullDownRefresh

页面下拉刷新时

Component

Component({
lifetimes: {
created() {
console.log('组件创建（未挂载）');
this.internalData = '非响应式数据'; // 可初始化非响应式数据
},
attached() {
console.log('组件挂载到页面');
this.setData({ count: 0 }); // 可调用 setData
},
detached() {
console.log('组件从页面移除');
clearInterval(this.timer); // 清理定时器
}
},
});

created

组件实例刚被创建时

此时还不能使用setData

attached

组件实例进入页面时

ready

页面布局完成时触发

moved

组件实例被移动到另一个节点上触发

detached

组件实例被移除

性能优化

分包主包

主包

小程序启动的时候必须加载的资源，包含（入口页面，全局状态管理）要求<2MB

分包

根据业务划分，仅当用户访问到对应功能才加载

控制主包体积，小程序初始化，仅下载解析主包，快速呈现

分包预下载

减少onLaunch的同步操作

合并多余的setData()，每一次setData都会触发页面重新渲染

图片增加lazy-load，只加载可视区域的图片

合并请求

使用CDN加速

使用节流，防抖

按需引入组件

webpack

定义：一个静态模块打包工具，将所有的资源视为模块，分析依赖关系，打包成浏览器能识别的静态资源

webpack作用

.vue文件：通过webpack+vue-loader拆分转换为Html + css + js(ES5)

ts文件：通过webpack + ts-loader转换为Es5的js

图片：通过webpack + url-loader转换为base64

配置

Entry

入口文件：webpack从这里开始解析依赖

Output

输出配置：指定打包后输出的路径和名称

Loader

模块转换器：处理非js文件资源

ts-loader处理ts文件

css-loader处理css文件

less-loader

babel-loader转译Es5

url-loader

专注于转换文件内容，将非JS文件转换为JS文件

在模块解析阶段

Plugin

插件：扩展webpack功能，原生功能不够用

HtmlWebpackPlugin生成Html

CleanWebpackPlugin清理输出目录

注重于打包优化，通过钩子函数介入webpack生命周期

Mode

模式（development/production）

打包流程

初始化

读取配置文件，创建Compiler实例

编译

从entry出发，递归解析所有依赖模块

对所有模块调用对应的loader解析

输出

输出到output指定的目录

性能优化

打包速度

使用cache：true，缓存已编译的模块；babel-loader使用cacheDirector缓存转译结果

打包体积

import动态导入组局，实现组件懒加载

资源压缩：使用css-minimizer-webpack-plugin

图片压缩，url-loader将图片转base64，image-webpack-loader压缩图片

vite

对比webpack

vite

基于ESM，无需打包，按需编译

热更新：需要重新构建相关模块，大型项目比较慢

基于Rollup打包，性能更优

webpack

webpack基于打包器，需要全量打包后再启动服务

热更新：基于模块依赖图只跟新变化的模块

基于自身打包器

区别

避免全量打包，基于ESM按需加载，按需编译

预构建优化，将第三方依赖预构建为ESM模块缓存，避免重复构建依赖

一个前端构建工具

配置

root

项目根目录

base

部署基础路径

service

开发服务器配置

build

生产构建配置

plugin

插件

AI

AI插件codeBuddy

解释代码作用，生成注释

自然语言生成代码

代码审查和优化，针对一些方法

DtoC

使用QPilot-Figma2Code

figma一键转代码

浏览器

http协议

TCP/IP

性能优化

资源预加载、懒加载

dns-prefetch、preload资源

合并多余请求，减少请求次数

使用http请求缓存

使用离线包、本地缓存

使用CDN部署

精灵图/雪碧图

合并多次wx.setData

requestIdelCallback

删除多余遗留防水墙

使用骨架屏，减少用户感知

减少DOM的操作，尽量一次性修改样式

高频事件使用防抖节流

按需引入/按需导入

tree-sharking删除死代码

前端安全

HTML

<!DOCTYPE html>

释：用于对浏览器声明文档类型

缺失后果：浏览器会进入怪异模式

怪异模式

布局错乱

兼容性差

html特性失效

<a></a>

行内元素：不可设置高宽，宽度有内容决定

属性

href

hreflang:表示href指向的是其他语言的网址

target

_self(默认)

_blank：新窗口打开

_top：在最顶层窗口打开，同_self

_parent：在上层窗口打开，同_self

释：用于文本缩写

属性

title：全文本

audio

属性

autoplay

controls

loop

muted

src

video

属性

autoplay

controls

height

loop

muted

src

poster

区别：strong是表文本强调，加粗只是强调的其中一种方式、b是指加粗文本，二者在SEO的权重不一致

<base>

释：用于规定页面下所有链接的默认url和默认target

属性

href

target

<body>

释：文档主体

<br>

释：换行

属性/值

autofocus

disabled

form

释：按钮属于一个或多个表单

值：<form>标签的id值

type

释：写在form表单标签内时，可以使用type属性功能

值

submit

reset

button

作用：用于表示页脚，利于SEO理解页面结构和内容

作用：用于表示页头，利于SEO理解页面结构和内容

<img>

属性/值

loading

释：指定浏览器是应立即加载图像还是延迟加载图像，性能优化点

值：eager/lazy

alt

规定图像的替代文本，SEO和无障碍化都需要

height

width

src

相比href，src会阻塞页面渲染

<input>

行内元素：不可设置高宽

属性/值

type

button：按钮

checkbox：复选框

checked

color：拾色器

date：年月日

datetime-local：年月日时分秒

file：上传文件

multiple：附加属性

image：定义图像作为提交按钮

附加属性：src\height\width\alt

month：年月控件

number：数字控件

password：密码控件

radio：单选

checked

value

size

input框的长度

placeholder

name：元素名称

min

max

maxlength：最大字符数

form

disabled

<label>

for

form

<link>

href

hreflang

<main>

浏览器不支持javascript的时候显示

disabled

label

selected

value

<p>

script

会阻塞html解析

async

适用于独立脚本，异步下载，不阻塞html执行。下载完立即执行，可能会打断html执行

滥用后果：找不到依赖的变量，导致报错

滥用后果：操作DOM的时候找不到元素

滥用后果：全局变量/覆盖冲突

defer

异步下载，html解析完成后，再执行脚本

src

会堵塞渲染性能，将src的资源请求回来，并且替代掉该标签

type

<span>

行内元素：不可设置高宽

CSS

选择器权重

!important

行内样式

ID选择器

类/伪类/属性选择器

伪类

:hover 鼠标悬停

:active 被点击时

:focus 鼠标注焦

:visited 链接被访问后

标签/伪元素选择器

伪元素

::before/::after

在元素的前/后添加一个子元素，使用content写入内容

::first-letter

选中块元素的第一个字母

::first-line

选中块元素的第一行

::selection

鼠标选中的文本

placeholder

input框或者textarea的placeholder的样式

全局选择器

样式list

背景background

background-image

background-image和<img>区别：前者属于装饰性样式，后者归属页面内容，后者有对SEO友好

linear-gradient

background-color

background-repeat

背景是否重复

background-position

背景位置

值：right top

文本text

text-align

释：文本对齐方式，因为文本在盒子内默认是居左对齐

right

center

justify

text-decoration

释：用于删除一些标签的自带装饰

none

取消装饰

overline

顶画线

line-through

中画线

underline

下划线

text-transform

释：可以转换英文文本的大小写

uppercase

lowercase

capitalize

text-indent

释：文本缩进，设置第一行的文本缩进，用于段落

text-overflow

释：超出容器的文本

ellipsis

超出部分使用省略号

white-space

空白处理，可设置不可换行

line-height

释：控制文本的垂直距离

word-wrap

break-word

释：允许换行

字体font

font-family

释：字体系列

font-style

释：字体样式（是否倾斜）

font-size

px

em

释：1em等于文字的大小默认16px

font-weight

vertical-align

释：控制非块级元素，垂直方向对齐

盒模型box-sizing

content-sizing：默认值-标准盒模型只算content

box-sizing：IE盒模型

边框border

清除浮动：border内元素浮动，导致边框塌陷

添加无意义标签：clear：both

border元素添加overflow：hidden，
触发BFC（块级格式化上下文）

使用伪元素清除

border-style

释：盒子是否虚实线

border-color

border-width

border-radius

轮廓outline

不占位置

outline-color

outline-style

outline-width

margin

padding

显示

display

不会出现在渲染树上

visibility

保留布局空间

opacity

保留布局空间

定位position

static

默认值，相当于无定位

fixed

释：固定在窗口位置不变

relative

相对原来位置变化

absolute

绝对定位

sticky

粘性定位

释：在页面上，滚动超出一定距离后变为fixed定位

用法：需要配合设置top值使用

overflow

visible

hidden

scroll

浮动float

清除浮动clear：both

转换transform

2D转换

释：控制元素2D变换

translate（50px,100px）

XY轴移动

rotate(30deg)

顺时针30度

scale(0.5)

缩小放大一半

3D转换

rotateX(30deg)

rotateY(30deg)

rotateZ(30deg)

过度transition

释：元素变化的时候附加时间属性

transition

过度动画的汇总

transition-property

过度动画的属性

transition-duration

过度动画的时长

动画animation

@keyframes

用于声明一个动画

animation:myfirst 10s

轮廓outline

释：给盒子增加一层轮廓，且不占用空间，且在margin外

outline-offset

释：可以设定轮廓距离盒子

布局

网格布局gird

flex布局

flex-direction

row:默认横向排

column:改后纵向排

flex-wrap

nowrap

wrap

justify-content

flex-start:默认左对齐/上对齐

flex-end：右对齐/下对齐

center：居中对齐

space-between：两端对齐，两端无空格

space-around：平均空格对齐

align-items

flex-start

flex-end

center

baseline

align-content

同justify-content

align-self

可以给元素设置单独的对齐方式

JS

声明方式

var

1、函数级作用域，整个函数内可访问（直接穿透if、for等代码块）、
如果函数外声明，则变成全局变量
2、存在变量提升，但是赋值不会
3、可以重复声明

let

块级作用域，无法穿透代码块

const

1、块级作用域，无法穿透代码块
2、不允许修改指向地址（只可以修改引用数据类型的属性值）

数据类型

种类

基本数据类型

boolean

string

赋值方式

直接赋值

使用关键字new

会影响性能，以及一些未知的bug

内置属性

constructor

length

prototype

内置方法

charAt(i)：返回字符串第i个字符

charCodeAt(i)：返回字符串第i个字符的Unicode码

concat()：连接两个或以上个字符串

endswith(str)：判断字符串是否由str结尾

startwith(str)：判断字符串是否由str开头

fromCharCode(num)：将unicode码转换成str

indexOf(s)：s在字符串中首次出现的位置

lastIndexOf(str)：搜索字符串中最后出现str的index值

search(reg)：同indexOf，但是可以支持传入reg进行正则

includes(str)：字符串是否包含str

match(reg)：匹配字符串中的正则

repeat(num)：将字符串重复num遍

return replace(str1,str2)：在字符串中匹配str1，并替换成str2，然后返回新值

return replaceAll(str1,str2)：在字符串中匹配所有str1，并且全部替换成str2，然后返回新值

return slice(index1,index2)：从第index1开始，截取到index2（不包含），并且返回

return split(str)：将字符串以str分割成数组返回

return substr(index,num)：从index开始提取num个字符，并返回

return substring(index1,index2)：从index1截取到index2，并返回

return toLowerCase()：将字符串转为小写，并返回

return toUpperCase()：将字符串转为大写，并返回

trim()：去除字符串两边空格

toString()：将字符串对象(new String())转换为字符串

number

对象属性

MAX_VALUE

由于对数字的存储方式导致

MIN_VALUE

NAN

对象方法

isInteger()：是否为整数

isNaN()：是否为有效数字

toFixed(num)：保留num位小数

toString()：将数字转化为字符串

valueOf()：转为为纯数字

null

undefined

symbol

引用数据类型

Array

内置方法

循环遍历方法

every((e)=>e>6)：检测数组内所有都符合某个条件，返回boolean

some((e)=>e>6)：检测数组内是否有符合某个条件的元素，返回boolean

filter(e=>e>6)：返回数组内所有符合条件的元素

find(e=>e>6)：找到首个符合条件的元素并返回

findeIndex(e=>e>6)：同上，返回index值

forEach()：每个元素执行回调函数

return Array.from(arr,(e)=>e*6)：对数组做处理并且返回新的数组

includes(str)：返回str是否在数组内

indexOf(str)：返回数组中str的位置

return map((e)=>e*6)：返回处理后的新数组

reduce((total,val)=> total+val)：将前一个元素和后一个元素做处理，最后生成一个值

return concat()：连接多个数组，并且返回新数组

fill(param,index1,index2)：将param从index1填充到index2

isArray()：判断是否数组

join(str)：将数组拼接到一个字符串内

keys()：返回数组的key值

pop()：删除最后一个元素，并返回删除掉的元素

push(param)：将param添加到数组最后

shift()：删除并返回首个元素

unshift(param)：将param添加到数组的首位

reverse()：将数组顺序倒转

slice(index1,index2)：截取数组中第index1到第index2（不包含）个元素并且返回新数组

splice(index,num,params)：在index1的位置删除num个，并且返回删除的元素，然后在index的位置插入params

sort()：对数组进行排序

toString()：将数组转化为字符串输出

flat(num)：数组扁平化

return with(index,param)：将数组第index个元素更新为param，并返回新数组

Object

Function

Date

判断方式

typeof

局限性：只能判断基本类型，引用类型均返回object

instanceof

局限性：只能用于判断引用数据类型

Object.prototype.toString.call()

最完美的方式，但是麻烦，需要用slice获取具体类型

Array.isArray()

BOM

对象属性

closed：返回窗口是否被关闭

frames

视口尺寸（用户看到的页面尺寸）

innerHeight

innerWidth

浏览器尺寸（包含工具栏、滚动条）

outerHeight

outerWidth

浏览器存储

localStorage

sessionStorage

name

length

包含<iframe>标签

navigator

释：包含浏览器的信息

对象属性

userAgent

language

screen

客户端屏幕的信息

history

特性：只读

方法

back()：加载history的前一个url

forward()：加载history的下一个url

go(url)：加载指定的url

location

host：主机名和端口

hostname：主机名

pathname：路径

href：完整的url

protocol：协议

对象方法

alert()：弹出一段警告

confirm()：浏览器自带确定框

prompt(msg,defaultText)：浏览器自带的input框

btoa(str)：将字符串base64加码

atob(encodeStr)：将base64加码后的字符串解码

focus()：键盘获得焦点

blur()：键盘失去焦点

setTimeout

setInterval

clearTimeout

clearInterval

close()：关闭浏览器窗口

open(url,'_blank')：打开一个新窗口

print()：唤起打印机打印当前页面

stop()：停止页面载入

DOM

对象属性

对象方法

JS事件

onchange

onclick

onmouseover

onmouseout

onkeydown

onload

原型链

constructor

浏览器存储

cookies

属于DOM，document.cookies

随会话清除

每次请求会自动发送到服务器

大小小于4kb

localStorage

手动去除或者清除浏览器缓存

大小约5M

sessionStorage

关闭浏览器则清除

getItem(key)：获取key的值

setItem(key,value)：设置key和value

removeItem(key)：删除key

clear()：清除所有存储

window.name

可以当sessionStorage使用，同窗口共享支持跨域

可以储存大小2-5M

闭包

闭包是指函数拥有自己的私有变量，并且保护该变量不会被外界随意修改

vuex和pinia

类

构造函数

constructor

关键字

extends

static

static声明的变量方法只能在类内部使用，new出来的实例无法使用static的变量

super

调用父类构造函数

new一个函数的过程

1：创建一个空对象

2绑定原型：将空对象的原型，指向构造函数的prototype，使得实例能继承构造函数原型上的方法

3this指向：把构造函数的this指向这个空对象

4执行构造函数：为该空对象添加变量和属性

5返回对象：

TS

特性

在编译时发现类型错误

提升代码可读性

类型提示

定义类型

interface

支持extends继承

支持合并声明

type

支持计算属性

不支持合并

enum

适合枚举

支持合并声明

可以支持反向枚举

泛型

T

function reverseArray<T>(arr: T[]): T[] {
return arr.slice().reverse();
}

不指定

any

关闭检查

unknown

未知类型，不能直接调用原型链上的方法

类型断言

使用as断言类型(abc as string).atob()

never

不存在的类型，用于无需返回的函数