随心所欲的便笺

map转为树状结构

类是用于创建对象的模板。他们用代码封装数据以处理该数据。JS 中的类建立在原型上，但也具有某些语法和语义未与 ES5 类相似语义共享。

在任何作用域中使用var声明的变量，都会被提升到。但是其赋值操作还是在原先的位置。var允许重复声明，后声明的变量相当于是对前一次声明的重新赋值。

给定一个对象数组，要求按照指定的顺序进行排序展示。

建议看官网，更全面这里就初尝Swiper做一个总结

点击导出按钮，将页面的表格导出为excel格式使用js-xlsx进行导出导出如图

为期两周的前端面试过程中遇到的问题

防抖和节流概念：防抖: 就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。常用于输入框节流: 就是指连续触发事件但是在设定的一段时间内中只执行一次函数。常用于频繁点击按钮

闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。

浅拷贝: 拷贝对象的一层属性,如果对象里面还有对象,拷贝的是地址.两者之间修改会有影响 ()深拷贝：拷贝对象的多层属性,如果对象里面还有对象,也能继续拷贝。使用递归来实现。

本地存储localStorage

axios.all axios.spread

组件通讯--->vuex实现数组对象的“双向绑定”

ES6模块化&Promise&async awiat

npm操作模块&nrm更改镜像源

node执行js的原理以及fs，path模块

防抖&节流

同源策略 & 跨域

XMLHttpRequest & 跨域

form表单&文件上传

问题最近在使用webpack5进行打包时，多出了一个LICENSE.txt的文件，查阅官网资料，找到了解决办法。官方：https://webpack.js.org/plugins/terser-webpack-plugin/如何解决？原因解决办法module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin({ extractCom

需求使用node在终端实现歌词自动播放的功能。分析拿到一个歌词文件需要不同时间显示不同的文本，首先要分别拿到时间和文本选择正则表达式来提取时间和文本 /(\[\d{2}:\d{2}\.\d{2}\])(.*)/g 提取歌词文件内容fs文件系统的 readFile()将歌词转化为毫秒值将时间转化为时间戳，便于使用延时器实现歌词播放使用正则表达式分理出m,s,ms 然后转化为毫秒 /(\d{2}):(\d{2})\.(\d{2})/使用延时器播放歌词代码

Ajax(一)服务器相关基础概念常见的客户端浏览器谷歌，IE/Edge , Safari服务有哪两个重要作用：资源存放服务对外提供具体服务客户端和服务器的通讯是基于 请求 和 响应URL主要有哪几部分组成：协议 主机名 端口号 资源存放路径协议http: 使用明文传输 不安全https: s 表示 SS L加密协议，安全端口号默认端口号http: 80https: 443URL编码在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地

Canvas基础入门学习

正则表达式介绍含义是用于匹配字符串中字符组合的模式用来查找、替换那些符合正则表达式的文本在js中，正则表达式也是对象使用场景表单验证：手机号的格式（匹配）过滤掉页面中的敏感词，或者个人信息（替换）获取我们想要的特定部分（提取）组成普通字符写啥匹配啥大多数的字符仅表示它自身，例如所有的字母和数字元字符是一些具有特殊含义的字符，可以极大提高灵活性和匹配功能例如：26个英文字母，元字符写法：[a-z]语法定义规则查找语法：let 变量名 = /表达式/ 例如：

BOM：浏览器对象模型Window是浏览器内置的全局对象（也叫顶级对象），我们学习的所有Webapi知识都是基于Window对象实现的。 DOM BOM都是属于window对象在任何位置都可以使用window这个对象，可以省略不写延时器JavaScript 内置的，用来让代码延迟执行的函数，叫 setTimeout。语法：setTimeout(函数, 延时时间)注意： setTimeout 仅仅只执行一次，平时省略window清除延时函数let timerId = setTimeout

事件对象含义当事件触发的时候 ,会产生对象,记录一些事件和有关信息获取事件处理函数中，形参就是事件对象document.addEventListener('click' , function(e) { // e就是事件对象 // 关于事件对象，如果需要使用，就写上形参e,不需要使用，可以忽略不写 console.log(e) })事件对象常用属性1. pageX / pageY获取鼠标的位置信息pageX ：距离页面左侧的水平距离pageY

时间对象可以让网页显示时间作用：得到当前系统时间或者指定时间语法：1. 获取当前时间let data = new Date()// 得到当前时间 let date = new Date() console.log(date)2. 获取指定时间let date = new Date(‘指定的时间’)// 得到指定时间 let date = new Date('1949-10-01') console.log(date)时

DOM节点含义DOM树中每一个内容都称之为节点DOM树节点类型元素节点(🔺)所有的标签，比如：body , div属性节点所有的属性，比如：href文本节点所有的文本节点操作查找结点父节点语法： 子元素.parentNode (这是属性)// 查找son的父元素 let son = document.querySelector('.son') console.log(son.parentNode) // 找到父亲

基本数据类型number ， string ， Boolean ， null , undefined在存储时变量中存储的是值本身，也叫做值类型 let num1 = 10 let num2 = num1 // 10 num2 = 20 console.log(num1) // 10 console.log(num2) // 20引用数据类型function , array , object在存储时变量中存储的是内存地址let

事件含义事件是在编程时系统内发生的动作或者发生的事（比如用户再网页上单击一下按钮）事件监听让浏览器检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应也称为注册事件语法：元素.addEventListener('事件' , 要执行的函数)事件监听三要素事件源：哪个dom元素被事件触发了事件：用什么方式触发事件调用的函数 ：要做什么事例如： // 给元素注册上事件 let btn = document.querySelector('but

初识作用使用js去操作html和浏览器分类DOM：文档对象模型BOM：浏览器对象模型DOM（文档对象模型）用来呈现 ，以及与任意 HTML 或 XML文档交互的作用：实现网页特效实现用户交互DOM树**含义：**将HTML文档以树状结构直观地表现出来作用： 直观地体现了标签与标签之间的关系DOM对象含义： 浏览器根据html标签生成的JS对象核心思想： 把网页内容当作对象来处理 let divObj = document.querySelector('div') co

对象可以理解为一种无序的数据集合比如 描述学生信息静态特征（姓名，年龄，性别，身高…） ——> 使用数字, 字符串, 数组, 布尔类型等表示动态行为 （唱歌，跳舞，打篮球）——> 使用函数表示语法声明语法对象由属性和方法组成 let 对象名 = { 属性名：属性值, 方法名：函数 }1. 属性：信息或叫特征（名词）例如：let person = { uname: 'Tricia', age: 18,

函数概念函数是被设置为执行特定任务的代码块，执行结束后将结果返回语法声明语法function 函数名 （参数列表） { 函数体}调用语法 函数名（传递的参数列表）有返回值的函数当调用某个函数，这个函数会返回出一个结果。不是所有的函数都需要返回值，比如 alert(‘弹框’)函数返回值return语法：return 数据（要返回的内容）<script> function getSum(x,y) { ret

vw/vh是相对单位vw：viewport width1vw = 1/100视口宽度vh：viewport height1vh = 1/100视口高度vw单位尺寸1.确定设计稿对应的vw尺寸 （1/100视口宽度）查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）2.vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )vh单位尺寸确定设计稿对应的vh尺寸（1/100视口高度）查看设计稿宽度 → 确定参考

less认识Less是一个 CSS预处理器， Less文件后缀为.less浏览器不识别less文件，所以在VScode里使用Easy Less插件自动生成css文件优点：css逻辑更加清晰免去了繁琐的计算（直接写计算式就可）注释// 单行注释 CTRL+/ 不会跑到css中/* 多行注释 Alt+shift+a 会跑到css中*/语法.box { /* 加法 */ width: 100 + 30px; /* 减法 */ width: 100

rem认识优点：可以适应不同大小的屏幕使用px或者百分比布局不能实现：px单位时绝对单位百分比布局是宽度自适应，高度固定的rem使用rem使用时需要配合:媒体查询flexible.js(推荐使用⭐)rem 单位相对单位相对于HTML标签的字号计算结果1 rem = 1 HTML字号大小媒体查询作用能够检测视口宽度，根据不同的视口宽度设置不同的html字号大小HTML字号取值不同的视口宽度，设置不同的HTML字体大小，取值为视口宽度的1/10语法@m

程序三大流程控制语句顺序结构从上往下执行分支结构根据条件选择执行循环结构某段代码重复执行分支语句1. if分支语句单分支语法：if（条件） { 满足条件要执行的代码}当条件为true，代码会执行若条件结果不是布尔型，则会发生隐式转换成布尔型双分支语法：if（条件） { 满足条件要执行的代码} else { 不满足条件执行的代码}多分支语法：if（条件1） { 代码1} else if （条件2）{ 代码2

省略号作用在制作网页的时候，经常会遇到文字内容太多超出部分省略的情况。例如：我们可以把这个类设置在公共样式里，需要的时候随时调用。实现方法.omit { width: 185px; /* 省略号的设置 前提：文本父级要有宽度 */ white-space: nowrap;/* 设置文本不换行 */ overflow: hidden; text-overflow: ellipsis;}...

字体图标字体图标，显示的是图标，本质是字体。开源字体图标库：iconfont-阿里巴巴矢量图标库下载后文件重命名为iconfont使用步骤： 引入字体图标库（引入css文件） 通过两个类名（iconfont 要引入的字体图标类名）来展示想要的字体图标 <link rel="stylesheet" href="./iconfont/iconfont.css"><style>.iconfont{...