打卡JS容易忘记的API(二)
打卡JS容易忘记的API(二)执行上下文JS 代码在遇到一个函数执行时,会进入预编译状态，生成执行上下文,然后再执行。做题目谨记解题的几大过程，此类题目就迎刃而解，变得很简单
预编译之前需要了解的a() // afunction a(){ console.log('a')}
console.log(a) //undefinedvar a = 2 // 变量声明 + 变量赋值
口诀:
函数声明整体提升(函数声明永远提升到js文件最前面)
变量 声明提升
任何变量,如果变量未经声明就赋值,归全局所有
function a(){ var b = c = 20 console.log(window.c) console.log(window.b) }a() //c未声明就赋值归全局所有 20 undefined
一切声明的全局变量,就归 window 所有(可以理解为 window 是全局的域对象，定义变量b，相当于往仓库里添加 b)
// 全局范围内 var b = 10console.log(b) //10con ...
打卡JS容易忘记的API(一)
打卡JS容易忘记的API(一)reduce用法语法：arr.reduce(callback,[initialValue])
参数为:
callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValue （数组中当前被处理的元素） 3、index （当前元素在数组中的索引） 4、array （调用 reduce 的数组）initialValue （作为第一次调用 callback 的第一个参数。）
看一遍就知道怎么用了
var arr = [1, 2, 3, 4];var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur;})console.log(arr, sum);
打印结果
由于没有设置返回值，reduce遍历的index从1开始1,2,13,3, ...
设计 ES6 中 class 实现私有属性
设计 ES6 中 class 实现私有属性为什么会出现 class其实学过其他面向对象语言的人应该对 class 非常熟悉，那为什么 js 里面要引入 class 呢？
在 ES6 之前，虽然 JS 和其他面向对象语言一样都是 OOP（面向对象），但是在 JS 中只有对象而没有类的概念。
ES6 中 class 的出现拉近了 JS 和传统 OOP 语言的距离，但是它仅仅是一个 语法糖 ，不能实现传统 OOP 语言一样的功能，这其中一个比较大的痛点就是私有属性问题。
何为私有属性？私有属性是面向对象编程（OOP）中一个非常常见的特性，一般满足以下特点：
能被 class 内部的不同方法访问，但不能在 class 外部访问；
子类不能继承父类的私有属性。
在 Java 中，可以使用 private 实现私有变量，但可惜 JS 中并未实现该功能。
私有属性提案2015 年 6 月，ES6 发布成为标准，为了纪念这个历史性时刻，这个标准又被称为 ES2015。至此，JavaScript 的 class 从备胎转正，但是还是没有解决私有属性的问题，产生了一个新的提案 – 在属性前加 # 用于 ...
使用 CSS3 Cubic-Bezier 创建动画链接悬停效果
使用 CSS3 Cubic-Bezier 创建动画链接悬停效果我们将使用 CSS3 动画过渡来创建简单但引人入胜的悬停效果，将鼠标悬停在 div 上，会弹出一个小浮层。
我们还将看一下CSS3 Cubic-Bezier（贝塞尔）曲线，它是CSS过渡，为弹出框提供了更加流畅的运动，而不是僵化的机械运动。
我们看一下最终效果：
让我们开始吧
HTML部分因为我们讨论的是 CSS 动画，因此模版尽量简单：
<html><head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"></head><body> <div class="container"> <div class="block">Block 1 <span>Tab 1</span> </div> <div ...
前端下载普通文件与二进制流文件
前端下载普通文件与二进制流文件前端下载文件通常会遇到这两种情况
文件上传到资源服务器，后端只保存了文件地址，前端拿到后端返回的文件地址直接下载。
文件就存在后端服务器上（通常是临时根据前端参数动态生成，用完就删），后端读取文件后向前端返回文件的二进制流。
下面以下载 excel 文件为例，分别模拟这是这两种情况。
通过文件地址直接下载新建一个项目，在项目中新建一个空的文件夹 service 模拟一个服务，在文件夹内新建一个 test.xlsx，然后在根目录上新建一个 index.html 模拟前端。
安装 serve 用来启动静态资源服务器。
yarn global add serve
进入 service 目录，启动服务
cd serviceserve -s
此时在页面中放置一个 a 标签，并写上 download 属性，在浏览器中打开点击下载。
这种相当于一个 get 请求，浏览器直接访问该静态资源地址，download 属性告诉这个浏览器这个 a 标签不是打开页面预览而是直接下载。
这与通常在实际项目中通过 ajax 请求接口无关，只需要按照请求，因为后端返回的只是 ...
如何保持高效学习
如何保持高效学习最近在从公司离职后回校作毕业设计的很长一段时间内，学习进度都挺慢的。所谓学习 1 小时，摸鱼 1 小时。除了坚持每周三次的健身，自己给自己制定的学习任务，双 11 囤下来书，都是进展缓慢。
不像在公司那样，周围同事都很努力，到处弥漫着积极上进的氛围。学校里面大多数时间是自己独自一人在搞事情，没有监督，没有比较，自然严重缺乏动力。
所以，我意识到确实是要作出一些改变了。
制定任务，模拟奖励根据这几个月重新玩「神武」（一款类似梦幻西游的回合制游戏）的感触，我发现这款游戏让人上瘾的点在于：你可以通过做任务/参见活动，获得各种奖励，并且提高人物的属性面板。我天，仔细想了下这不是和自我学习有点相似？
于是我尝试着给自己制定每周任务，像「实现 promise」、「计算机专业论文算法完成」、「数学专业完成矩阵特征值的 4 中方法编程实现」。
有了任务，怎么模拟奖励呢？游戏给我的奖励是「提高人物属性」，潜意识里就是告诉玩家“你在变强”。思路转化过来就是，模拟的奖励需要让我自己感觉我在变强：）因此模拟的奖励是：
技术面变广，技术栈变深
定期将所学输出文章，方便日后回查，也打造个人 IP ...
butterify扩展用法
文章置顶【推荐】hexo-generator-index从 2.0.0 开始，已经支持文章置顶功能。你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。
当然，你也可以安装第三方插件来实现这个功能(hexo-generator-index-pin-top 或者 hexo-generator-indexed)
如果使用hexo-generator-index-pin-top, 需要先卸载掉hexo-generator-index，然后在文章的front-matter区域里添加top: true属性来把这篇文章置顶
如果使用hexo-generator-indexed, 需要先卸载掉hexo-generator-index，然后在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大
标签外挂{% note simple %}默认 提示块标籤{% endnote %}{% note default simple % ...
CSS常用的代码片段
垂直居中.item position absolute top 50% left 50% transform translate3d(-50%,-50%).item position absolute top 50% left 50% width 100px height 100px margin -50px 0 -50px
全屏显示page position fixed width 100% height 100% div height 100%
背景图background拓展
多个背景图叠加
效果图:logo和title均为image
**分析:**分为三部分 header盒下: bg盒(蒙层) logo盒(底部背景) title 标题图
.header position relative width 100% height 200px box-sizing border-box overflow hidden display flex align-items center justify-content center .bg ...
CSS容易忘记的一些属性
text-align属性
text-align:justify 两端对齐
text-align属性只对块级元素起作用，行内级元素无效
这一居中显示可以用margin 0 auto 表示
line-height属性行高指的是文本间基线的距离，其单位可以为px,百分比,em文字基线 顶线 划分
行高就是 inline-box 的高度,默认情况下行内元素是基于base-line对齐的
图片1px问题:因为图片本身也是行内元素,也是基于基线对齐,基线距离底部会有一个间隙,所以会有留白,解决方案:font-size:0 或者 vertical-align:bottom
vertical-align垂直对齐方式 只作用于行内元素,块级元素设置无效
vertical-align:top:垂直对齐于一行内最高的元素
vertical-algin:Text-top:垂直对齐于文本顶部
vertical-align:middle:对齐于文本中线
vertical-align:baseline:对齐于文本基线(英文字母文本底部)
vertical-align:Text-bottom:对齐于文本底部 ...
数据结构与算法学习(js版)
时间复杂度和计算方法
计算时间复杂度就是计算代码执行多少次，循环多少次。
例:
o(1)n+1=2console.log(n)o(n)for(let i = 0;i < n;i++){ console.log(i)}o(n^2)for(let i =0;i<n;i++){ for(let j = 0;j < n;j++){ console.log() }}o(logN)let i =1while(i<n){ i* = 2 console.log(n)}
空间复杂度空间复杂度计算就是计算声明的变量，或者内存变量是多少个
例:
O(1)let i =1console.log(1)O(n)let a = []for(let i=0;i<n;i++){ a.push[i]}O(n^2)let a = []for(let i = 0;i<n;i++){ a.push([]) for(let ...