test-12
hello world
123
【公告】重新建站ING...
最近一段时间一直没有更新博客，有很多原因，不过最近在用Obsidian同步技术笔记，很方便就是了。
实习过程中，用vue写了个小的项目demo ，没有完善好，但暂时不打算继续做了。
不过打算用vuepress重新建站，自己写主题，加上一些生活的板块（沉迷咖啡制作ing）还有工具箱等内容。说不定会迁移到其他网址。
update: 重新部署的过程中说我有一篇文章有违规内容（以前怎么没有? fine，网站迁移倒计时
近期还是会将以前的笔记整理整理并且复习复习，看心情可能会发上来（）
以上。
Array.prototype.unshift方法详解
前言⁍
最近看到这么一道面试题
输出以下代码执行的结果并解释为什么[1]
12345678910var obj = { '2': 3, '3': 4, 'length': 2, 'splice': Array.prototype.splice, 'push': Array.prototype.push}obj.push(1)obj.push(2)console.log(obj)
试了一下，结果如下：
123456789101112> obj.push(1)3> obj.push(2)4> console.log(obj){ '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push]}
这是因为push 方法根据 length 属性来决定从哪里开始插入给定 ...
深拷贝
浅拷贝的时候是地址传递，两个对象指向的是同一个地址，修改其中一个对象里的值，另一个对象里的值也会被改变；深拷贝则是值传递，两个对象指向的是不同的地址，但是值是相同的
方法一：利用json⁍
12// 不支持值为undefined、函数和循环引用的情况const cloneObj = JSON.parse(JSON.stringify(obj))
利用JSON方法来拷贝有空位的数组的时候，空位（undefined）会被拷贝为null
方法二：递归拷贝[1]⁍
1234567891011121314151617181920212223function deepClone(obj, cache = new WeakMap()) { if (obj === null || typeof obj !== 'object') return obj if (obj instanceof Date) return new Date(obj) if (obj instanceof RegExp) return new RegExp(obj) if (cache.ha ...
【FE学习-CSS】图形以及动画
本文简要记录一些freeCodeCamp里涉及的图形和动画相关内容
Transform⁍
CSS 属性 transform 里面的 scale() 函数可以用来改变元素的显示比例。
可以用在:hover上面
skewX()：它使选择的元素沿着 X 轴（横向）倾斜指定的角度。（变成平行四边形那种样子）
rotate()：旋转
图形⁍
创建一个圆形的对象，border-radius 应该被设置成 50%。
新月：利用border-radius和border-shadow
12345678910111213.center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0px blue;}
心形：利用伪元素
123456 ...
【FE学习-JS】函数
概述⁍
声明方法⁍
普通方法
赋值语句（将 匿名函数 赋值给某个变量）
第一等公民⁍
JavaScript 语言将函数看作一种值，与其它值（数值、字符串、布尔值等等）地位相同。凡是可以使用值的地方，就能使用函数。
12345678910111213function add(x, y) { return x + y;}// 将函数赋值给一个变量var operator = add;// 将函数作为参数和返回值function a(op){ return op;}a(operator)(1, 1)// 2
函数名提升与重复声明⁍
用赋值语句定义的函数 不能 在调用前声明，因为变量提升到前面后并未赋值，相当于undefined
采用function命令和var赋值语句声明同一个函数，由于存在函数提升，最后会采用var赋值语句的定义。
而一般情况下，重复声明，后面声明的会覆盖前面的
属性和方法⁍
name属性：函数的名字/匿名函数声明时赋给的变量名
可以用于获取传入的参数函数的名字
length属性：返回 定义 的参数个数
如 ...
【marp】VSCODE+Markdown写slides
本文旨在记录一些marp做slides的常用语法
参考： Marpit Markdown
开启marp⁍
123---marp: true---
常见指令⁍
分割slides⁍
用---/___/***/- - -分割
设置样式的几种方法⁍
用HTML注释实现：当前页及其之后的所有页都会变成该样式 <!-- backgroundColor: aqua -->
加上_就会只应用于本幻灯片 <!-- _backgroundColor: aqua -->
YAML frontmatter：应用所有
全局指令⁍
Name
Description
theme
Specify theme of the slide deck.
style
Specify CSS for tweaking theme.
headingDivider
Specify heading divider option.
用<!-- headingDivider: 3 -->可以设置分页的最低标题级数，不用分割线分割（例如设置为3，则遇到1/2/3 ...
【FE学习-JS】JS基础
本文主要参考[1][2][3][4]
JavaScript⁍
JavaScript可以分为三部分[5]
注：这里暂时没找其他的理论依据，但是道理大概是这么回事
ECMAScript：核心，描述了Js语法及各种标准，目前通用的有ES5，更新的是ES6
DOM（文档对象类型）：HTML和XML的API。用DOM API可以轻松地删除、添加、替换节点
BOM（浏览器对象模型）：对浏览器窗口进行访问和操作（不同浏览器有自己的实现，没有统一标准）
应用程序接口（Application Programming Interfaces（API）） [6]
API 通常分为浏览器API和第三方API
浏览器API包括DOM API、地理位置API、画布和web GL API，以及 HTMLMediaElement 和 WebRTC 等 影音类 API
JavaScript 在页面上做了什么⁍
在 HTML 和 CSS 集合组装成一个网页后，浏览器的 JavaScript 引擎将执行 JavaScript 代码。
JavaScript 最普遍的用处是通过 DOM API（见上文）动态修改 HTML ...
【CSS】格式化上下文
参考MDN文档Introduction to formatting contexts 格式化上下文简介 - CSS（层叠样式表） | MDN (mozilla.org)
格式化的意思是, 在这个环境中元素应当被初始化, 初始化的过程就是元素在此环境中的布局过程[1]
格式化上下文
块格式化上下文 BFC
内联格式化上下文 IFC
灵活（flex）格式化上下文 FFC
块格式化上下文 BFC⁍
BFC布局原则[2]⁍
第1条：内部的Box会在垂直方向，一个接一个地放置。
第2条：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
第3条：每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
导致样例2的出现
第4条：BFC的区域不会与float box重叠。
第5条：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
第6条：计算BFC的高度时，浮动元素也参与计算
文档最外层元素（<html> ...