├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom.md │ └── feature_request.md ├── .gitignore ├── README-ENGLISH.md ├── README.md ├── assets ├── WX20220410-161926.png ├── WX20220410-162023.png ├── new_file.html └── pay.jpg ├── code ├── 1343.js ├── 三数之和.js ├── 下一个更大元素II.js ├── 两数之和.js ├── 二维数组中的查找.js ├── 全排列.js ├── 全排列II.js ├── 前K个高频单词.js ├── 合并区间.js ├── 在排序数组中查找元素的第一个和最后一个位置.js ├── 字符串相乘.js ├── 字符串相加.js ├── 存在重复元素III.js ├── 戳气球.js ├── 最小路径和.js ├── 最长不含重复字符的子字符串.js ├── 最长连续递增序列.js ├── 最长递增子序列.js ├── 组合总和.js ├── 链表反转.md ├── 零钱兑换.js └── 青蛙跳台阶问题.js ├── js-code ├── code │ ├── 下一个更大元素II.js │ ├── 全排列II.js │ ├── 前K个高频单词.js │ ├── 合并区间.js │ ├── 字符串相乘.js │ ├── 字符串相加.js │ ├── 存在重复元素III.js │ ├── 最长连续递增序列.js │ └── 最长递增子序列.js └── js │ ├── EventCenter.js │ ├── Object.create.js │ ├── Promise.all.js │ ├── Promise.race.js │ ├── Promise.then.js │ ├── _filter.js │ ├── _flat.js │ ├── _map.js │ ├── _push.js │ ├── _reverse.js │ ├── add.js │ ├── ajax.js │ ├── apply.js │ ├── argumentsNum.js │ ├── asynclight.js │ ├── bind.js │ ├── call.js │ ├── callbacklight.js │ ├── code1.js │ ├── copy.js │ ├── curry.js │ ├── dateFormat.js │ ├── debounce.js │ ├── deepcopy.js │ ├── expansion-operator.js │ ├── extendPrototype.js │ ├── fetch-async-await.js │ ├── findMostWord.js │ ├── flatten.js │ ├── formatNumber.js │ ├── getType.js │ ├── instanceof.js │ ├── likeToArr.js │ ├── new.js │ ├── objectToTree.js │ ├── promise-ajax.js │ ├── promise.js │ ├── promiseImg.js │ ├── promiselight.js │ ├── react-props-test.md │ ├── react-props.md │ ├── react_min_setState.md │ ├── react_setState.md │ ├── reduce.js │ ├── repeat.js │ ├── setArr.js │ └── throttle.js ├── leetcode ├── 1.two-sum.js ├── 1.两数之和.js ├── 101.symmetric-tree.js ├── 129.sum-root-to-leaf-numbers.js ├── 1312.minimum-insertion-steps-to-make-a-string-palindrome.js ├── 1319.number-of-operations-to-make-network-connected.js ├── 1338.reduce-array-size-to-the-half.js ├── 1343.js ├── 1343.number-of-sub-arrays-of-size-k-and-average-greater-than-or-equal-to-threshold.js ├── 1432.改变一个整数能得到的最大差值.js ├── 198.house-robber.js ├── 206.反转链表.js ├── 2135.count-words-obtained-after-adding-a-letter.js ├── 220.contains-duplicate-iii.js ├── 239.sliding-window-maximum.js ├── 263.ugly-number.js ├── 3.longest-substring-without-repeating-characters.js ├── 3.无重复字符的最长子串.js ├── 300.longest-increasing-subsequence.js ├── 312.burst-balloons.js ├── 37.sudoku-solver.js ├── 415.add-strings.js ├── 43.multiply-strings.js ├── 503.next-greater-element-ii.js ├── 56.merge-intervals.js ├── 62.unique-paths.js ├── 64.minimum-path-sum.js ├── 674.longest-continuous-increasing-subsequence.js ├── 7.reverse-integer.js ├── 78.子集.js ├── 784.letter-case-permutation.js ├── 三数之和.js ├── 下一个更大元素II.js ├── 两数之和.js ├── 二维数组中的查找.js ├── 全排列.js ├── 全排列II.js ├── 前K个高频单词.js ├── 合并区间.js ├── 在排序数组中查找元素的第一个和最后一个位置.js ├── 字符串相乘.js ├── 字符串相加.js ├── 存在重复元素III.js ├── 戳气球.js ├── 最小路径和.js ├── 最长不含重复字符的子字符串.js ├── 最长连续递增序列.js ├── 最长递增子序列.js ├── 组合总和.js ├── 链表反转.md ├── 零钱兑换.js └── 青蛙跳台阶问题.js ├── webVueBlogStars.md ├── 全栈架构师 ├── Flutter.md ├── React16虚拟dom原理剖析.js ├── Taro框架.md ├── koa2源码剖析.js ├── node-test │ ├── app.js │ ├── context.js │ ├── da.js │ ├── favicon.ico │ ├── package.json │ ├── request.js │ ├── response.js │ └── test-compose.js ├── vue-router前端路由原理剖析.md ├── vue源码解读.js ├── vue组件设计.md ├── webpack.js └── webpack原理剖析.md ├── 数据结构与算法基础(Python) ├── 10堆排序前传-树与二叉树.md ├── 11堆排序的实现.md ├── 1算法基础.md ├── 2汉诺塔问题.md ├── 3顺序查找.md ├── 4二分查找.md ├── 5排序查找.md ├── 6冒泡排序.md ├── 7选择排序.md ├── 8插入排序.md └── 9快速排序.md ├── 深入理解JS核心技术 └── readme.md ├── 编程 ├── 第1课-5分钟讲递归.md └── 第2课-从暴力搜索到二分查找.md ├── 阶段一 ├── Axios.md ├── BFC.js ├── BFC.md ├── EventBus订阅发布模式.md ├── ObjectdefinePropery和proxy.md ├── TCP.md ├── commonjs和es6.js ├── csrf.md ├── defer和async的区别.md ├── html加载过程.md ├── http各版本.md ├── http请求头.md ├── osi七层模型.md ├── vue-DIFF算法.md ├── vue-router原理.md ├── vue-router原理2.md ├── vuex核心原理.js ├── vue双向绑定.md ├── vue双向绑定弊端set实现.md ├── vue框架好在哪里.md ├── vue组件通信.md ├── websocket.md ├── xss总结.md ├── 三次握手和四次挥手.md ├── 三角形.html ├── 前端性能优化.md ├── 单向数据流与双向数据绑定.md ├── 发布订阅模式.js ├── 圣杯布局.html ├── 左侧固定右侧自适应.html ├── 模块加载方案.md ├── 模块化.md ├── 浏览器线程线程模型.md ├── 浏览器缓存.md ├── 清除浮动的方式.md ├── 箭头函数和普通函数的区别.md ├── 跨域.md ├── 跨域问题解决方案.md ├── 输入一个url后.md ├── 闭包和作用域链.js ├── 隐式类型转换.md └── 项目难点.md ├── 阶段七 ├── DataView视图.js ├── TypedArray.js ├── WeChata275aefede4d88662ff210f15ff9ca48.png ├── apply.js ├── bind.js ├── call.js ├── class属性继承原理.js ├── class方法继承原理.js ├── https加密原理.js ├── iterator使用场景.js ├── js.js ├── new关键字.js ├── protected.js ├── 使用构造函数继承call.js ├── 借用原型链.js ├── 原型工厂封装.js ├── 原型式继承.js ├── 原型继承.js ├── 原型链实例.js ├── 原型链继承prototype.js ├── 寄生式继承.js ├── 寄生组合式继承.js ├── 属性访问器.js ├── 总结原型链.js ├── 防抖与节流.js └── 静态方法的实现原理.js ├── 阶段三 ├── 1.OSI七层网络模型.jpg ├── 5.三次挥手.jpg ├── 6.四次挥手.jpg ├── 9.缓存.jpg ├── HTTPS工作流程.js ├── OSI七层网络模型.js ├── assign.js ├── delete.js ├── keep-alive.js ├── map语法.js ├── mustache.js ├── nodeEvent.js ├── public属性.js ├── scoped.js ├── set语法.js ├── vue-loader.js ├── vue-router.js ├── webpack实践.js ├── websocket.js ├── 三次挥手.js ├── 代理函数.js ├── 代理对象.js ├── 传递参数.js ├── 修饰符.js ├── 创建对象.js ├── 加解密.js ├── 原型链.js ├── 发送消息.js ├── 四次挥手.js ├── 在类里面使用访问器.js ├── 声明类的语法.js ├── 对象api.js ├── 对象的含义.js ├── 延伸函数生命周期.js ├── 数组使用代理拦截操作.js ├── 构造函数.js ├── 构造函数的作用和使用形态.js ├── 模板字符串.js ├── 浅拷贝.js ├── 浏览器输入URL后回车.js ├── 深拷贝.js ├── 箭头函数.js ├── 缓存.js ├── 解构赋值.js ├── 计算机的组成.js ├── 访问器.js ├── 进程和线程.js └── 闭包语义.js ├── 阶段三十 └── Text类型.js ├── 阶段三十一 ├── Object.defineProperty.js ├── Route.js ├── code1.js ├── code10.js ├── code2.js ├── code3.js ├── code4.js ├── code5.js ├── code6.js ├── code7.js ├── code8.js ├── code9.js ├── compare_react_life.md ├── creat_react_app.md ├── higher_order_fn.md ├── jsonp.js ├── react.md ├── react_component.md ├── react_createRef.md ├── react_domdiffing.md ├── react_eventhandler.md ├── react_life_cycle.md ├── react_lift_process.md └── setTimeoutTosetInterval.js ├── 阶段三十三 ├── code21.js ├── code22.js ├── code23.js ├── code24.js ├── code25.js ├── code26.js ├── code27.js ├── this1.js ├── this10.js ├── this11.js ├── this12.js ├── this13.js ├── this14.js ├── this15.js ├── this2.js ├── this3.js ├── this4.js ├── this5.js ├── this6.js ├── this7.js ├── this8.js └── this9.js ├── 阶段三十二 ├── code1.js ├── code10.js ├── code11.js ├── code12.js ├── code13.js ├── code14.js ├── code15.js ├── code16.js ├── code17.js ├── code18.js ├── code19.js ├── code2.js ├── code20.js ├── code3.js ├── code4.js ├── code5.js ├── code6.js ├── code7.js ├── code8.js └── code9.js ├── 阶段三十四 ├── code1.js ├── code2.js ├── code3.js ├── code4.js ├── code5.js ├── code6.js ├── code7.js ├── code8.js ├── globalThis.js ├── react_BrowserRouter_HashRouter.md ├── react_NavLink使用.md ├── react_Switch.md ├── react_ant.md ├── react_push_replace.md ├── react_redirect.md ├── react_redux.md ├── react_spa.md ├── react_原理.md ├── react_嵌套路由.md ├── react_工作流程.md ├── react_路由.md ├── react_路由匹配.md ├── react_路由的基本使用.md ├── react_路由组件与一般组件.md └── 手写promise.md ├── 阶段九 ├── BFC.js ├── call.js ├── class和await的结合.js ├── cookie和token.js ├── cookie是如何工作的.js ├── flex.html ├── flex属性.html ├── inline-block.js ├── new.js ├── position.js ├── promise.js ├── promise封装ajax.js ├── promise的单一状态与中转.js ├── promise队列原理.js ├── super原理分析.js ├── then.js ├── then返回值的处理技巧.js ├── visibility.js ├── 三角形.js ├── 什么是语义化与新特性.js ├── 元素的alt和title有什么区别.js ├── 动画.js ├── 字符串编号.js ├── 封装setTimeout定时器.js ├── 左固定右适应.js ├── 异步封装到类内部.js ├── 弹性布局.html ├── 柯里化.js ├── 模拟forOf.js ├── 测试promise例子.js ├── 清除浮动.js ├── 用reduce实现promise队列.js ├── 节流.js ├── 重绘与重排.js └── 防抖.js ├── 阶段二 ├── BFC.md ├── CSS3新增的伪类有哪些.md ├── CSS3有哪些新特性.md ├── HTML5的离线储存怎么使用.md ├── Promise构造函数是同步执行还是异步执行.md ├── Set和Map的区别.md ├── WX20220319-092710.png ├── async和await.md ├── a标签中.md ├── css选择器优先级顺序.md ├── em、rem的区别.md ├── get和post的区别.md ├── git.md ├── git1.md ├── html5有哪些新特性.md ├── img标签上title与alt属性的区别是什么.md ├── less和sass的区别.md ├── position有哪些属性.md ├── var、let、const之间的区别.md ├── xhtml和html有什么区别.md ├── 下面的输出结果是多少.md ├── 为什么要初始化css样式.md ├── 什么是SPA.md ├── 什么是弹性布局.md ├── 什么是空元素.md ├── 介绍一下你对浏览器内核的理解.md ├── 优化这些图片的加载.md ├── 伪类和伪元素的区别.md ├── 使用箭头函数应注意什么.md ├── 前端性能优化方案.md ├── 区别.md ├── 如何在Git恢复先前的提交.md ├── 如何处理HTML5新标签的浏览器兼容性问题.md ├── 如何实现0.5px边框.md ├── 如何实现浏览器内多个标签页之间的通讯.md ├── 如何让一个盒子在页面垂直水平居中.md ├── 如何进行seo优化.md ├── 常见的浏览器内核有哪些.md ├── 提升.md ├── 浏览器工作原理.md ├── 浏览器是如何渲染UI的.md ├── 简述Chome盒模型与IE盒模型的区别.md ├── 简述优雅降级与渐进增强.md ├── 行内元素和块级元素都有哪一些.md ├── 解释csssprites，如何使用.md ├── 解释下浮动和它的工作原理和清除浮动的方法.md ├── 说说对canvas，svg，webgl的理解.md ├── 请说出1px，1rem，1vh，1em各自代表的含义.md ├── 重绘与重排.md └── 页面导入样式时，使用link和@import有什么区别.md ├── 阶段二十 ├── 优美的排列.js ├── 克隆图.js ├── 可迭代协议.js ├── 对称二叉树.js ├── 提前终止迭代器.js ├── 求根节点到叶节点数字之和.js ├── 理解迭代.js ├── 组合总和.js ├── 自定义迭代器.js ├── 迭代器协议.js └── 迭代器模式.js ├── 阶段二十一 ├── 1343.js ├── Promise.js ├── Promisethen.js ├── Promise承诺状态.js ├── Promise术语.js ├── 戳气球.js ├── 最小路径和.js ├── 等差数列划分.js ├── 组合总和.js └── 零钱兑换.js ├── 阶段二十七 ├── k.js ├── 两两交换链表中的节点.js ├── 旋转链表.js ├── 最近的请求次数.js ├── 翻转.js └── 节点关系.js ├── 阶段二十三 ├── yield.js ├── 从上到下打印二叉树.js ├── 剪绳子.js ├── 剪绳子2.js ├── 反转链表.js ├── 提前终止生成器.js ├── 数值的整数次方.js ├── 斐波那契数列.js ├── 机器人的运动范围.js ├── 树的子结构.js ├── 生成器作为默认迭代器.js ├── 生成器基础.js ├── 矩阵中的路径.js └── 重建二叉树.js ├── 阶段二十九 ├── Element类型.js └── 接雨水.js ├── 阶段二十二 ├── CRLF.js ├── arguments.js ├── css的属性content有什么作用呢.js ├── meta.js ├── 三数之和.js ├── 两数之和.js ├── 二维数组中的查找.js ├── 什么是无障碍web.js ├── 全排列.js ├── 写一个方法把0和1互转.js ├── 写一个验证身份证号的方法.js ├── 在排序数组中查找元素的第一个和最后一个位置.js ├── 字体变得清晰.js ├── 怎样修改chrome记住密码后自动填充表单的黄色背景.js ├── 最长不含重复字符的子字符串.js ├── 获取数组.js ├── 请描述css的权重计算规则.js ├── 透明效果.js ├── 青蛙跳台阶问题.js └── 验证码.js ├── 阶段二十五 ├── Node.js ├── 去除重复字母.js ├── 括号.js ├── 无重复字符的最长子串.js ├── 统计追加字母可以获得的单词数.js ├── 节点层级.js └── 让字符串成为回文串的最少插入次数.js ├── 阶段二十八 ├── 亲密字符串.js ├── 任务调度器.js ├── 删除最外层的括号.js ├── 化栈为队.js ├── 有效的括号.js ├── 柠檬水找零.js ├── 棒球比赛.js ├── 比较含退格的字符串.js ├── 煎饼排序.js └── 验证栈序列.js ├── 阶段二十六 ├── suspense-and-lazy.js ├── token.js ├── 买卖股票的最佳时机.js ├── 买卖股票的最佳时机3.js ├── 买卖股票的最佳时机4.js ├── 买卖股票的最佳时机含手续费.js ├── 单词拆分.js ├── 合并.js ├── 基本计算器.js ├── 日志功能.js ├── 最佳买卖股票时机含冷冻期.js └── 每个小孩最多能分到多少糖果.js ├── 阶段二十四 ├── Axios.js ├── DOM.js ├── n个骰子的点数.js ├── 买卖股票的最佳时机.js ├── 删除有序数组中的重复项.js ├── 在排序数组中查找数字.js ├── 字符串的排列.js ├── 把数字翻译成字符串.js ├── 搜索插入位置.js ├── 滑动窗口的最大值.js ├── 礼物的最大价值.js └── 解决高并发.js ├── 阶段八 ├── 1.js ├── BFC规范的理解.js ├── ES新特性.js ├── HTML5.js ├── JS方法源码实现.js ├── css常用的布局方式有哪些.js ├── html5中的form怎么关闭自动完成.js ├── htmlcss.js ├── http都有哪些状态码.js ├── iframe框架都有哪些优缺点.md ├── style标签写在body前和body后的区别是什么.js ├── viewport常见设置都有哪些.js ├── 三角形.html ├── 事件循环.js ├── 什么是回调函数.js ├── 什么是闭包.js ├── 优雅降级和渐进增强.js ├── 写一个判断数据类型的方法.js ├── 写一个加密字符串的方法.js ├── 写一个去除制表符和换行符的方法.js ├── 写一个数组去重的方法.js ├── 写一个获取当前url查询字符串中的参数的方法.js ├── 区别.js ├── 圣杯布局和双飞翼布局的理解和区别.html ├── 有什么不同.js ├── 标签语义化的理解.js ├── 模块化.js ├── 浏览器内多个标签页之间的通信方式有哪些.js ├── 浏览器内核都有哪些.js ├── 清除浮动的方式有哪些及优缺点.js ├── 知识点.js ├── 简要描述下JS有哪些内置的对象.js ├── 统计某一字符或字符串在另一个字符串中出现的次数.js ├── 网页应用从服务器主动推送到客户端有哪些方式.js └── 返回到顶部的方法有哪些.js ├── 阶段六 ├── CSS3新增伪类有哪些并简要描述.md ├── CSS3有哪些新增的特性.md ├── CSS选择器.md ├── HTML5的文件离线储存怎么使用，工作原理是什么.md ├── HTML全局属性.md ├── html的元素有哪些.md ├── label都有哪些作用.md ├── 事件冒泡和事件捕获到底有何区别.md ├── 写一个把字符串大小写切换的方法.js ├── 写一个方法去掉字符串中的空格.js ├── 写一个方法把下划线命名转成大驼峰命名.js ├── 去除字符串中最后一个指定的字符.js ├── 在页面上隐藏元素的方法有哪些.md ├── 用递归算法实现.js └── 简述超链接target属性的取值和作用.md ├── 阶段十 ├── HTTP工作原理.js ├── MVVM.js ├── Observable.js ├── SEO优化.js ├── SPA单页面.js ├── Symbol语法.js ├── computed和data.js ├── cookie和session区别.js ├── data和属性名.js ├── get和post的区别.js ├── location.js ├── parent.js ├── v-model的原理.js ├── v.js ├── xss.js ├── 响应式原理.js ├── 模版引擎.js ├── 生命周期.js ├── 计算属性和监听器.js ├── 路由缓存.js └── 重置data.js ├── 阶段十一 ├── const.js ├── let.js ├── noscript元素.js ├── script元素.js ├── script元素放置位置.js ├── var.js ├── 严格模式.js ├── 关键字与保留字.js ├── 动态加载脚本.js ├── 区分大小写.js ├── 可扩展超文本标记语言.js ├── 异步执行脚本.js ├── 推迟执行脚本.js ├── 文档模式.js ├── 标识符.js ├── 注释.js ├── 行内代码与外部文件.js └── 语句最佳实践.js ├── 阶段十七 ├── Git的branch及工作流的理解是什么.js ├── Symbol使用场景.js ├── form标签的enctype属性.js ├── script.js ├── z-index的理解.js ├── 伪元素.js ├── 写一个判断设备来源的方法.js ├── 在页面中的应该使用奇数还是偶数的字体.js ├── 如何快速让一个数组乱序.js ├── 属性data.js ├── 延长作用域链.js ├── 手动实现一个new方法.js ├── 用过CSS预处理器.js ├── 说说浏览器解析CSS选择器的过程.js └── 页面上产生乱码的可能原因.js ├── 阶段十三 ├── Boolean.js ├── Date.js ├── Date日期格式化方法.js ├── Date组件方法.js ├── Date继承的方法.js ├── Global.js ├── HTML.js ├── Math.js ├── Number.js ├── RegExp.js ├── RegExp实例属性.js ├── RegExp实例方法.js ├── RegExp构造函数属性.js ├── RegExp模式局限.js ├── String.js ├── localeCompare.js ├── repeat.js ├── trim.js ├── 作用域链增强.js ├── 内存管理.js ├── 原始值包装类型.js ├── 变量声明.js ├── 垃圾回收.js ├── 基本引用类型.js ├── 字符串包含方法.js ├── 字符串操作方法.js ├── 字符串模式匹配方法.js ├── 字符串迭代与解构.js ├── 引用计数.js ├── 性能.js ├── 方法.js └── 标记清理.js ├── 阶段十九 ├── Object和Array复习.js ├── 三次握手.js ├── 四次挥手.js ├── 基本引用类型复习.js ├── 复习.js ├── 奇偶链表.js ├── 数据类型复习.js ├── 滑动窗口最大值.js ├── 移掉.js └── 行星碰撞.js ├── 阶段十二 ├── Boolean类型.js ├── Null类型.js ├── Number类型.js ├── Object类型.js ├── String类型.js ├── Symbol.js ├── Undefined类型.js ├── typeof操作符.js ├── 传递参数.js ├── 函数.js ├── 动态属性.js ├── 原始值与引用值.js ├── 复制值.js ├── 执行上下文与作用域.js ├── 最佳实践.js └── 确定类型.js ├── 阶段十五 ├── ArrayBuffer.js ├── DataView.js ├── Map.js ├── Map顺序与迭代.js ├── Set.js ├── WeakMap.js ├── WeakSet.js ├── 动态添加路由及生成菜单.js ├── 定型数组.js ├── 数组归并方法.js ├── 数组排序方法.js ├── 数组搜索和位置方法.js ├── 数组操作方法.js ├── 数组迭代方法.js ├── 视图.js ├── 迭代与扩展操作.js └── 选择.js ├── 阶段十八 ├── 301与302.js ├── jsx.md ├── jsx是怎么变成dom的.js ├── let和const.js ├── 全排列.md ├── 存在重复元素.md ├── 宏任务与微任务.js ├── 数组的扩展.js ├── 组件.md └── 高频单词.md ├── 阶段十六 ├── Async.js ├── HTML元素的显示优先级.js ├── html中的置换元素和非置换元素的理解.js ├── index.html ├── input元素中readonly和disabled属性的理解.js ├── javascript的作用域.js ├── js放在html的body和head有什么区别.js ├── margin边界叠加是什么及解决方案.js ├── my-app │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── sprites.js ├── strict.js ├── table的作用和优缺点.js ├── typeof是操作符还是函数.js ├── 什么是FOUC.js ├── 写一个方法验证是否为中文.js ├── 在页面上实现一个圆形的可点击区域.js ├── 安装.js ├── 对SVN和GIT的理解和区别.js ├── 指数运算符.md ├── 文件夹结构.md ├── 有什么不同.js ├── 理解.js ├── 要让Chrome支持小于12px的文字怎么做.js └── 重绘和重排.js ├── 阶段十四 ├── Array.js ├── Object.js ├── VueRouter.js ├── VueRouter入门.js ├── 复制和填充方法.js ├── 带参数的动态路由匹配.js ├── 数组空位.js ├── 数组索引.js ├── 栈方法.js ├── 检测数组.js ├── 转换方法.js ├── 迭代器方法.js ├── 队列方法.js └── 集合引用类型.js ├── 阶段四 ├── Flex实现垂直居中.html ├── console.md ├── flex左侧固定右侧自适应.html ├── hasOwnProperty属性检测.js ├── instanceof.js ├── instanceof2.js ├── isPrototypeOf原型检测.js ├── promise原理.js ├── reduce.js ├── 一个大小为父元素宽度一半的正方形.html ├── 使用父类构造函数初始属性.js ├── 函数有多个长辈.js ├── 原型中的constructor引用.js ├── 原型方法与对象方法优先级.js ├── 和.md ├── 好处和坏处.md ├── 左右固定中间自适应.html ├── 数据绑定的容器更新.html ├── 数组.md ├── 数组的扩展.js ├── 权重和优先级.js ├── 理解对象.js ├── 盒模型.js ├── 箭头函数.js ├── 结构赋值.js ├── 迭代器.js ├── 那些对象没有原型.js ├── 静态属性的使用.js ├── 页面导入样式时.js └── 高阶函数.js └── 题库 ├── 1.md ├── 2.md ├── 两数之和.md ├── 两数相加.md └── 无重复字符的最长子串.md /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/.gitignore -------------------------------------------------------------------------------- /assets/WX20220410-161926.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/assets/WX20220410-161926.png -------------------------------------------------------------------------------- /assets/WX20220410-162023.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/assets/WX20220410-162023.png -------------------------------------------------------------------------------- /assets/pay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/assets/pay.jpg -------------------------------------------------------------------------------- /code/在排序数组中查找元素的第一个和最后一个位置.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {number[]} nums 3 | * @param {number} target 4 | * @return {number[]} 5 | 34. 在排序数组中查找元素的第一个和最后一个位置 6 | */ 7 | var searchRange = function(nums, target) { 8 | let ans = new Array(2).fill(-1); 9 | nums = nums.sort((a,b) => a - b); 10 | let startIndex = nums.findIndex(value => value === target) 11 | if(startIndex !== -1) { 12 | ans[0] = startIndex 13 | let endIndex = nums.lastIndexOf(target) 14 | if(endIndex !== -1) { 15 | ans[1] = endIndex 16 | } 17 | } 18 | return ans; 19 | }; -------------------------------------------------------------------------------- /code/最长不含重复字符的子字符串.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {string} s 3 | * @return {number} 4 | 剑指 Offer 48. 最长不含重复字符的子字符串 5 | "abcabcbb" 6 | */ 7 | var lengthOfLongestSubstring = function(s) { 8 | const n = s.length; 9 | let i = 0; 10 | let max = 0; 11 | let window = []; 12 | while(i { 15 | // return item > 3 16 | // }) 17 | // console.log(newArr, arr) // [ 4, 5 ] [ 1, 2, 3, 4, 5 ] 18 | 19 | // console.log(arr._filter((item) => { 20 | // return item > 3 21 | // }), arr)// [ 4, 5 ] [ 1, 2, 3, 4, 5 ] -------------------------------------------------------------------------------- /js-code/js/_flat.js: -------------------------------------------------------------------------------- 1 | // 实现数组的flat方法 2 | function _flat(arr, depth) { 3 | if(!Array.isArray(arr) || depth <= 0) { 4 | return arr 5 | } 6 | return arr.reduce((prev, cur) => { 7 | if(Array.isArray(cur)) { 8 | return prev.concat(_flat(cur, depth-1)) 9 | }else{ 10 | return prev.concat(cur) 11 | } 12 | },[]); 13 | } 14 | 15 | // let arr = [1, [2, [3, 4]]]; 16 | // console.log(_flat(arr, 3)) 17 | 18 | // Debugger attached. 19 | // [ 1, 2, 3, 4 ] 20 | // Waiting for the debugger to disconnect... -------------------------------------------------------------------------------- /js-code/js/_map.js: -------------------------------------------------------------------------------- 1 | // 实现数组的map方法 2 | 3 | Array.prototype._map = function(fn) { 4 | if(typeof fn !== 'function') { 5 | throw Error('参数必须是一个函数') 6 | } 7 | const res = [] 8 | for(let i = 0, len = this.length; i < len; i++) { 9 | res.push(fn(this[i])) 10 | } 11 | return res 12 | } 13 | 14 | // let arr = [1,2,3,4,5]; 15 | // let newArr = arr.map((item) => { 16 | // return item * 3 17 | // }) 18 | // console.log(newArr, arr) // [ 3, 6, 9, 12, 15 ] [ 1, 2, 3, 4, 5 ] 19 | 20 | // console.log(arr._map((item) => { 21 | // return item * 3 22 | // }), arr)// [ 3, 6, 9, 12, 15 ] [ 1, 2, 3, 4, 5 ] -------------------------------------------------------------------------------- /js-code/js/_push.js: -------------------------------------------------------------------------------- 1 | // 实现数组的push方法 2 | 3 | Array.prototype.myPush = function() { 4 | for(let i = 0; i < arguments.length; i++) { 5 | this[this.length] = arguments[i]; 6 | } 7 | return this.length; 8 | } 9 | 10 | let arr = [1,2] 11 | console.log(arr.myPush(3), arr) // 3 [1,2,3] -------------------------------------------------------------------------------- /js-code/js/_reverse.js: -------------------------------------------------------------------------------- 1 | // 字符串翻转 2 | 3 | // String.prototype._reverse = function(a) { 4 | // return a.split('').reverse().join(''); 5 | // } 6 | // var obj = new String(); 7 | // var res = obj._reverse('hello'); 8 | 9 | function myReverse(a) { 10 | return a.split('').reverse().join(''); 11 | } 12 | 13 | // console.log(myReverse('hello')) // olleh -------------------------------------------------------------------------------- /js-code/js/add.js: -------------------------------------------------------------------------------- 1 | // add(1)(2)(3) 2 | /** 3 | 函数柯里化概念：柯里化是把接受多个参数的函数转变为接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术。 4 | */ 5 | 6 | // 暴力法 7 | // function add(a) { 8 | // return function (b) { 9 | // return function (c) { 10 | // return a + b + c; 11 | // } 12 | // } 13 | // } 14 | 15 | -------------------------------------------------------------------------------- /js-code/js/argumentsNum.js: -------------------------------------------------------------------------------- 1 | // es5 2 | 3 | function sumEs5() { 4 | let sum = 0 5 | Array.prototype.forEach.call(arguments, function(item) { 6 | sum += item * 1 7 | }) 8 | return sum 9 | } 10 | 11 | // es6 12 | 13 | function sumEs6(...nums) { 14 | let sum = 0 15 | nums.forEach(function(item) { 16 | sum += item * 1 17 | }) 18 | return sum 19 | } 20 | 21 | // 使用es5和es6求函数参数的和 -------------------------------------------------------------------------------- /js-code/js/code1.js: -------------------------------------------------------------------------------- 1 | // 实现每隔一秒打印 1,2,3,4 2 | 3 | // 闭包实现 4 | for(var i = 0; i < 5; i++) { 5 | (function(i) { 6 | setTimeout(function() { 7 | console.log(i) 8 | }, i*1000) 9 | })(i) 10 | } 11 | 12 | for(let i = 0; i < 5; i++) { 13 | setTimeout(function() { 14 | console.log(i) 15 | }, i * 1000) 16 | } -------------------------------------------------------------------------------- /js-code/js/dateFormat.js: -------------------------------------------------------------------------------- 1 | const dateFormat = (dateInput, format) => { 2 | var day = dateInput.getDate() 3 | var month = dateInput.getMonth() + 1 4 | var year = dateInput.getFullYear() 5 | format = format.replace(/yyyy/, year) 6 | format = format.replace(/MM/, month) 7 | format = format.replace(/dd/, day) 8 | return format 9 | } 10 | 11 | // dateFormat(new Date('2020-12-01'), 'yyyy/MM/dd') // 2020/12/01 12 | // dateFormat(new Date('2020-04-01'), 'yyyy/MM/dd') // 2020/04/01 13 | // dateFormat(new Date('2020-04-01'), 'yyyy年MM月dd日') // 2020年04月01日 14 | -------------------------------------------------------------------------------- /js-code/js/debounce.js: -------------------------------------------------------------------------------- 1 | // 所有按钮加上防抖 2 | // 防抖是指在事件被触发n秒后再次执行回调，如果在这个n秒内事件又被触发，则重新计时 3 | 4 | function debounce(fn, wait) { 5 | // fn函数，wait等待秒数 6 | let timer = null; // 用于重新计时 7 | 8 | return function() { 9 | // 返回一个回调执行函数 10 | let context = this, args = arguments; 11 | 12 | // 如果此时存在定时器的话，则取消之前的定时器重新计时 13 | if(timer) { 14 | clearTimeout(timer); 15 | timer = null; 16 | } 17 | 18 | // 设置定时器，使时间间隔指定事件后执行 19 | timer = setTimeout(() =>{ 20 | fn.apply(context, args) 21 | }, wait) 22 | } 23 | } -------------------------------------------------------------------------------- /js-code/js/expansion-operator.js: -------------------------------------------------------------------------------- 1 | let arr1 = [1,2,23,2] 2 | let arr2 = [23,2,2,1] 3 | console.log(...arr1); // 展开一个数组 4 | let arr3 = [...arr1, ...arr2] // 连接数组 5 | 6 | // 在函数中使用 7 | function sum(...numbers) { 8 | return numbers.reduce((preValue, currentValue) => { 9 | return preValue + currentValue 10 | }) 11 | } 12 | console.log(sum(1,2,3,4)); 13 | // 构造字面量对象时使用展开语法 14 | let person = {name: 'tom', age: 18} 15 | let person2 = {...person} 16 | // console.log(...person); // 报错，展开运算符不能展开对象 17 | person.name = 'da' 18 | console.log(person2); 19 | console.log(person); 20 | 21 | // 合并 22 | let person3 = {...person, name: 'j', address: '地址'} 23 | console.log(person3) -------------------------------------------------------------------------------- /js-code/js/extendPrototype.js: -------------------------------------------------------------------------------- 1 | // 实现prototype继承 2 | // 所谓原型链继承 就是让 新实例的原型 等于 父类的实例 3 | 4 | // 父方法 5 | function SupperFunction(flag1) { 6 | this.flag1 = flag1 7 | } 8 | // 子方法 9 | function SubFunction(flag2) { 10 | this.flag2 = flag2 11 | } 12 | // 父实例 13 | var superInstance = new SupperFunction(true); 14 | 15 | // 子继承父 16 | SubFunction.prototype = superInstance; 17 | 18 | // 子实例 19 | var subInstance = new SubFunction(false); 20 | // 子调用自己和父的属性 21 | subInstance.flag1; // true 22 | subInstance.flag2; // false -------------------------------------------------------------------------------- /js-code/js/findMostWord.js: -------------------------------------------------------------------------------- 1 | function findMostWord(article) { 2 | if(!article) return 3 | // 参数处理 4 | article = article.trim().toLowerCase(); 5 | let wordList = article.match(/[a-z]+/g), 6 | visited = [], 7 | maxNum = 0, 8 | maxWord = '' 9 | article = ' ' + wordList.join(' ') + ' '; 10 | // 遍历判断单词出现次数 11 | wordList.forEach(function(item) { 12 | if(visited.indexOf(item) < 0) { 13 | visited.push(item); 14 | let word = new RegExp(' ' + item + ' ', 'g'), 15 | num = article.match(word).length; 16 | if(num>maxNum) { 17 | maxNum = num; 18 | maxWord = item; 19 | } 20 | } 21 | }); 22 | return maxWord + ' ' + maxNum; 23 | } -------------------------------------------------------------------------------- /js-code/js/likeToArr.js: -------------------------------------------------------------------------------- 1 | 2 | // 1. 通过call调用数组的slice方法来实现转换 3 | Array.prototype.slice.call(arrayLike); 4 | 5 | // 2. 通过call调用数组的splice方法来实现转换 6 | 7 | Array.prototype.splice.call(arrayLike, 0) 8 | 9 | // 3. 通过apply调用数组的concat方法来实现转换 10 | 11 | Array.prototype.concat.apply([], arrayLike); 12 | 13 | // 4. Array.from方法来实现转换 14 | 15 | Array.from(arrayLike) -------------------------------------------------------------------------------- /js-code/js/promiseImg.js: -------------------------------------------------------------------------------- 1 | // 用Promise实现图片的异步加载 2 | 3 | let imageAsync = (url) => { 4 | return new Promise((resolve, reject) => { 5 | let img = new Image(); 6 | img.src = url 7 | img.onload = () => { 8 | console.log('成功') 9 | resolve(Image) 10 | } 11 | img.onerror = (err) => { 12 | console.log('失败') 13 | reject(err) 14 | } 15 | }) 16 | } 17 | 18 | imageAsync('url').then(() => { 19 | console.log('加载成功') 20 | }).catch((error) => { 21 | console.log('加载失败') 22 | }) -------------------------------------------------------------------------------- /js-code/js/react-props.md: -------------------------------------------------------------------------------- 1 | ```js 2 | // 创建组件 3 | class Person extends React.Component { 4 | render() { 5 | console.log(this); 6 | const { name, age, sex } = this.props 7 | return ( 8 | 13 | ) 14 | } 15 | } 16 | // 渲染组件到页面 17 | // ReactDOM.render(, document.getElementById('text')) 18 | const p = {name: 'name', age: '12', sex: 'n'} 19 | ReactDOM.render(, document.getElementById('test2)) 20 | ``` 21 | // 20 -------------------------------------------------------------------------------- /js-code/js/reduce.js: -------------------------------------------------------------------------------- 1 | let arr = [1,2,3,4,5] 2 | arr.reduce((prev, next) => { return prev + next }, 0) 3 | 4 | let arr2 = [1,2,3,[23,4,5]] 5 | arr2.flat(Infinity).reduce((prev, next) => { return prev + next }, 0) 6 | 7 | let arr3 = [{a:9, b:3, c:4}, {a:1, b:3}, {a:3}] 8 | arr3.reduce((prev, cur) => { 9 | return prev + cur["a"]; 10 | }, 0) 11 | -------------------------------------------------------------------------------- /js-code/js/repeat.js: -------------------------------------------------------------------------------- 1 | // console.log(new Array(2)) // [ <2 empty items> ] 2 | // console.log(new Array(2).join('abc')) // abc 3 | // console.log('123'.repeat(0)) // '' 4 | // console.log('123'.repeat(1)) // 123 5 | 6 | function repeat(s, n) { 7 | return (n > 0) ? s.concat(repeat(s, --n)) : '' 8 | } 9 | 10 | console.log(repeat('123', 0)) // '' 11 | console.log(repeat('123', 1)) // '' 12 | 13 | -------------------------------------------------------------------------------- /js-code/js/setArr.js: -------------------------------------------------------------------------------- 1 | 2 | const setArr = function(array) { 3 | return Array.from(new Set(array)) 4 | } 5 | 6 | // const array = [1, 2, 3, 5, 1, 5, 9, 1, 2, 8]; 7 | // console.log(setArr(array)) // [1, 2, 3, 5, 9, 8] 8 | 9 | // es5: 使用map存储不重复的数字 10 | function uniqueArray(array) { 11 | let map = {} 12 | let res = [] 13 | for(let i = 0; i < array.length; i++) { 14 | if(!map.hasOwnProperty([array[i]])) { // 对象属性[] 15 | map[array[i]] = 1 16 | res.push(array[i]) 17 | } 18 | } 19 | return res 20 | } -------------------------------------------------------------------------------- /js-code/js/throttle.js: -------------------------------------------------------------------------------- 1 | // 节流 2 | // 函数节流:指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内事件被触发多次，只有一次能生效。 3 | 4 | // 场景 节流可以使用scroll函数的事件监听上，通过事件节流来降低事件调用的频率 5 | 6 | function throttle(fn, delay) { 7 | let curTime = Date.now(); // 当前时间 8 | 9 | return function() { 10 | // 回调函数执行 11 | let context = this, args = arguments, nowTIme = Date.now(); 12 | 13 | // 如果两次时间间隔超过了指定时间，则执行函数 14 | if(nowTIme - curTime >= delay) { 15 | curTime = Data.now(); 16 | return fn.apply(context, args); 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /leetcode/1.two-sum.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=1 lang=javascript 3 | * 4 | * [1] Two Sum 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number[]} nums 10 | * @param {number} target 11 | * @return {number[]} 12 | */ 13 | var twoSum = function(nums, target) { 14 | 15 | }; 16 | // @lc code=end 17 | 18 | -------------------------------------------------------------------------------- /leetcode/1.两数之和.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=1 lang=javascript 3 | * 4 | * [1] 两数之和 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number[]} nums 10 | * @param {number} target 11 | * @return {number[]} 12 | */ 13 | var twoSum = function(nums, target) { 14 | let map = new Map(); 15 | 16 | for (let i = 0; i < nums.length; i++) { 17 | if (map.has(target - nums[i])) { 18 | 19 | } 20 | } 21 | }; 22 | // @lc code=end -------------------------------------------------------------------------------- /leetcode/101.symmetric-tree.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=101 lang=javascript 3 | * 4 | * [101] Symmetric Tree 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * Definition for a binary tree node. 10 | * function TreeNode(val, left, right) { 11 | * this.val = (val===undefined ? 0 : val) 12 | * this.left = (left===undefined ? null : left) 13 | * this.right = (right===undefined ? null : right) 14 | * } 15 | */ 16 | /** 17 | * @param {TreeNode} root 18 | * @return {boolean} 19 | */ 20 | var isSymmetric = function(root) { 21 | 22 | }; 23 | // @lc code=end 24 | 25 | -------------------------------------------------------------------------------- /leetcode/1432.改变一个整数能得到的最大差值.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=1432 lang=javascript 3 | * 4 | * [1432] 改变一个整数能得到的最大差值 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number} num 10 | * @return {number} 11 | */ 12 | var maxDiff = function(num) { 13 | 14 | }; 15 | // @lc code=end 16 | 17 | -------------------------------------------------------------------------------- /leetcode/198.house-robber.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=198 lang=javascript 3 | * 4 | * [198] House Robber 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number[]} nums 10 | * @return {number} 11 | */ 12 | var rob = function(nums) { 13 | let len = nums.length; 14 | let dp = new Array(len); 15 | dp[-1] = dp[-2] = 0; 16 | for (let i = 0; i < len; i++) { 17 | dp[i] = Math.max(dp[i - 1], dp[i - 2] + nums[i]); 18 | } 19 | return dp[len - 1]; 20 | }; 21 | // @lc code=end -------------------------------------------------------------------------------- /leetcode/220.contains-duplicate-iii.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=220 lang=javascript 3 | * 4 | * [220] Contains Duplicate III 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number[]} nums 10 | * @param {number} k 11 | * @param {number} t 12 | * @return {boolean} 13 | */ 14 | var containsNearbyAlmostDuplicate = function(nums, k, t) { 15 | 16 | }; 17 | // @lc code=end 18 | 19 | -------------------------------------------------------------------------------- /leetcode/239.sliding-window-maximum.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=239 lang=javascript 3 | * 4 | * [239] Sliding Window Maximum 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number[]} nums 10 | * @param {number} k 11 | * @return {number[]} 12 | */ 13 | var maxSlidingWindow = function(nums, k) { 14 | 15 | }; 16 | // @lc code=end 17 | 18 | -------------------------------------------------------------------------------- /leetcode/263.ugly-number.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=263 lang=javascript 3 | * 4 | * [263] Ugly Number 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number} n 10 | * @return {boolean} 11 | */ 12 | var isUgly = function(n) { 13 | 14 | }; 15 | // @lc code=end 16 | 17 | -------------------------------------------------------------------------------- /leetcode/3.无重复字符的最长子串.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=3 lang=javascript 3 | * 4 | * [3] 无重复字符的最长子串 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {string} 10 | * @return {number} 11 | */ 12 | var lengthOfLongestSubstring = function(s) { 13 | const map = {}; 14 | var left = 0; 15 | 16 | return s.split('').reduce((max, v, i) => { 17 | left = map[v] >= left ? map[v] + 1 : left; 18 | map[v] = i; 19 | return Math.max(max, i - left + 1); 20 | }, 0); 21 | }; 22 | // @lc code=end -------------------------------------------------------------------------------- /leetcode/312.burst-balloons.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=312 lang=javascript 3 | * 4 | * [312] Burst Balloons 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number[]} nums 10 | * @return {number} 11 | */ 12 | var maxCoins = function(nums) { 13 | 14 | }; 15 | // @lc code=end 16 | 17 | -------------------------------------------------------------------------------- /leetcode/37.sudoku-solver.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=37 lang=javascript 3 | * 4 | * [37] Sudoku Solver 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {character[][]} board 10 | * @return {void} Do not return anything, modify board in-place instead. 11 | */ 12 | var solveSudoku = function(board) { 13 | 14 | }; 15 | // @lc code=end 16 | 17 | -------------------------------------------------------------------------------- /leetcode/7.reverse-integer.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=7 lang=javascript 3 | * 4 | * [7] Reverse Integer 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number} x 10 | * @return {number} 11 | */ 12 | var reverse = function(x) { 13 | 14 | }; 15 | // @lc code=end 16 | 17 | -------------------------------------------------------------------------------- /leetcode/78.子集.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @lc app=leetcode.cn id=78 lang=javascript 3 | * 4 | * [78] 子集 5 | */ 6 | 7 | // @lc code=start 8 | /** 9 | * @param {number[]} nums 10 | * @return {number[][]} 11 | */ 12 | var subsets = function(nums) { 13 | 14 | }; 15 | // @lc code=end 16 | 17 | -------------------------------------------------------------------------------- /leetcode/在排序数组中查找元素的第一个和最后一个位置.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {number[]} nums 3 | * @param {number} target 4 | * @return {number[]} 5 | 34. 在排序数组中查找元素的第一个和最后一个位置 6 | */ 7 | var searchRange = function(nums, target) { 8 | let ans = new Array(2).fill(-1); 9 | nums = nums.sort((a,b) => a - b); 10 | let startIndex = nums.findIndex(value => value === target) 11 | if(startIndex !== -1) { 12 | ans[0] = startIndex 13 | let endIndex = nums.lastIndexOf(target) 14 | if(endIndex !== -1) { 15 | ans[1] = endIndex 16 | } 17 | } 18 | return ans; 19 | }; -------------------------------------------------------------------------------- /leetcode/最长不含重复字符的子字符串.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {string} s 3 | * @return {number} 4 | 剑指 Offer 48. 最长不含重复字符的子字符串 5 | "abcabcbb" 6 | */ 7 | var lengthOfLongestSubstring = function(s) { 8 | const n = s.length; 9 | let i = 0; 10 | let max = 0; 11 | let window = []; 12 | while(i 0: 22 | hanoi(n-1, a, c, b) 23 | print("moving from %s to %s" % (a, c)) 24 | hanoi(n-1, b, a, c) 25 | 26 | hanoi(3, 'A', 'B', 'C') 27 | ``` 28 | 29 | 汉诺塔移动次数的递推式：h(x)=2h(x-1)+1 -------------------------------------------------------------------------------- /数据结构与算法基础(Python)/5排序查找.md: -------------------------------------------------------------------------------- 1 | 1，什么是列表排序 2 | 2，常见排序算法介绍 3 | 3，排序算法分析 4 | 5 | > 列表排序 6 | 7 | 排序：将一组“无序”的记录序列调整为“有序”的记录序列。 8 | 9 | 列表排序：将无序列表变为有序列表 10 | 11 | 输入：列表 12 | 13 | 输出：有序列表 14 | 15 | 升序与降序 16 | 17 | 内置排序函数： sort() 18 | 19 | > 常见排序算法 20 | 21 | 排序LowB三人组：冒泡排序，选择排序，插入排序 22 | 23 | 排序NB三人组：快速排序，堆排序，归并排序 24 | 25 | 其他排序：希尔排序，计数排序，基数排序 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /数据结构与算法基础(Python)/8插入排序.md: -------------------------------------------------------------------------------- 1 | 2 | > 插入排序 3 | 4 | 1，初始时手里（有序区）只有一张牌 5 | 2，每次（从无序区）摸一张牌，插入到手里已有牌的正确位置 6 | 7 | ``` 8 | def insert_sort(li): 9 | for i in range(1, len(li)): # i 表示摸到的牌的下班,不包含len(li)->n 10 | tmp = li[i] # 摸到的牌 11 | j = i - 1 # j 指的是手里的牌的下标 12 | while j >= 0 and li[j] > tmp: 13 | li[j+1] = li[j] 14 | j -= 1 # 箭头向左移 15 | li[j+1] = tmp # 否则添加到右边 16 | ``` 17 | 18 | 时间复杂度：O(n的2次方) 19 | 20 | ``` 21 | def insert_sort(li): 22 | for i in range(1, len(li)): 23 | tmp = li[i] 24 | j = i -1 25 | while j >= 0 and tmp < li[j]: 26 | li[j+1] = li[j] 27 | j = j -1 28 | li[j+1] = tmp 29 | ``` 30 | 31 | -------------------------------------------------------------------------------- /深入理解JS核心技术/readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/深入理解JS核心技术/readme.md -------------------------------------------------------------------------------- /编程/第1课-5分钟讲递归.md: -------------------------------------------------------------------------------- 1 | 递归： 2 | 3 | n! = n * (n-1) * (n-2) * ... * 1 4 | 5 | ``` 6 | assert n >= 0 7 | def f(n) 8 | if n == 1 or n == 0: 9 | return 1 10 | return n * f(n-1) 11 | ``` 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /编程/第2课-从暴力搜索到二分查找.md: -------------------------------------------------------------------------------- 1 | bruteforce 2 | pow(i,0.5) 3 | sqrt(i) 4 | 5 | O(logN) 6 | 7 | ``` 8 | def findIntRoot(n): 9 | if n < 0: 10 | return None 11 | for i in range(n + 1): 12 | if i**2 == n: 13 | return i 14 | ``` 15 | 16 | ``` 17 | def findIntRoot(n): 18 | if n < 0: 19 | return 20 | L,R = 0,n 21 | while L <= R 22 | M = (L+R) // 2 23 | MM = M ** 2 24 | if MM == n: 25 | return M 26 | if MM > N 27 | R = M - 1 28 | else: 29 | L = M + 1 30 | ``` 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /阶段一/Axios.md: -------------------------------------------------------------------------------- 1 | 2 | axios是一个基于promise的方法，可以发送get，post等请求，同时支持浏览器端和服务端的请求。 3 | 4 | 原理： 5 | 6 | createInstance底层根据默认设置新建一个Axios对象， axios中所有的请求[axios, axios.get, axios.post等...]内部调用的都是Axios.prototype.request, 7 | 将Axios.prototype.request的内部this绑定到新建的Axios对象上,从而形成一个axios实例。新建一个Axios对象时，会有两个拦截器，request拦截器，response拦截器。 8 | 9 | 特点: 10 | 11 | 1.从浏览器创建XMLHttpRequest 12 | 13 | 2.从node.js发起http请求 14 | 15 | 3.支持promise api 16 | 17 | 4.拦截请求和响应(axios.interceptors.request/response) 18 | 19 | 5.转换请求和响应数据 20 | 21 | 6.取消请求 22 | 23 | 7.自动转化为JSON格式 24 | 25 | 8.客户端防止CSRF/XSRF 26 | 27 | 28 | -------------------------------------------------------------------------------- /阶段一/BFC.js: -------------------------------------------------------------------------------- 1 | BFC块级格式化上下文，在布局中生成块级盒子的区域，BFC为独立布局环境，内部的元素不受外界影响 2 | 3 | 4 | 实现BFC的条件: 5 | 6 | 1.HTML. 7 | 8 | 2.float不为none. 9 | 10 | 3.display：inline-block，table，table-caption，flex，table-cell，grid 11 | 12 | 4.overflow不为visible 5.position为absolute或者fixed 13 | 14 | BFC的特性: 15 | 16 | 1.内部的box会在垂直方向上，一个接一个的放置 17 | 18 | 2.盒子外边距会重叠 19 | 20 | 3.BFC的区域不会与浮动元素重叠 21 | 22 | 4.计算高度会把浮动元素一并计入 23 | 24 | 5.子元素不会影响到外部元素，反之也如此 25 | 26 | 6.元素的margin-left与其包含块的border-left相接触 27 | 28 | 29 | -------------------------------------------------------------------------------- /阶段一/EventBus订阅发布模式.md: -------------------------------------------------------------------------------- 1 | 2 | eventBus它的工作原理是发布/订阅方法，通常称为 Pub/Sub 3 | 4 | 因为vue是单页面应用，在某个页面刷新之后，与之相关的EventBus会被移除，这样就导致业务走不下去，还有如果业务有反复操作的页面， 5 | eventBus在监听的时候就会触发多次，这是一个非常大的隐患，所以在vue页面销毁时，同时移除EventBus的监听EventBus.$off('aMsg', {}) 6 | 7 | -------------------------------------------------------------------------------- /阶段一/TCP.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 1.TCP是通过什么来保证可靠性？ 4 | 5 | ①.应用数据被分割成合理的长度 6 | 7 | ②.超时重发，当TCP发出一个段后，它启动一个定时器，等待目标端收到这个报文段，如果不能及时确认，就重新发送。 8 | 9 | ③对于收到的请求，给出确认响应，当TCP收到另一端的数据，他将发送一个确认，这个确认是对包做完整校验再发送 10 | 11 | ④校验包出错，丢弃报文段，不给出响应，TCP超时会重发。 12 | 13 | ⑤对失序数据进行重新排序，然后才交给应用层：既然TCP报文段作为IP数据报来传输，而IP数据报的到达可能会失序，因此TCP报文段的到达也可能会失序。 14 | 15 | 如果必要，TCP将对收到的数据进行重新排序，将收到的数据以正确的顺序交给应用层。 16 | 17 | ⑥对于重复数据，能够丢弃重复数据 18 | 19 | ⑦可以提供流量控制，TCP连接的每一方都有固定大小的缓冲空间，只允许另一端发送接收端缓冲区所能接纳的数据，防止较快主机致使较慢主机的缓冲区溢出。 20 | 21 | TCP提供的是一种面向连接的，可靠的字节流服务 22 | 23 | 面向连接：意味着两个使用TCP的应用在彼此交换数据前必须先建立一个连接，在连接中仅两方彼此通信。 24 | 25 | -------------------------------------------------------------------------------- /阶段一/vue-router原理2.md: -------------------------------------------------------------------------------- 1 | 2 | vue-router作为插件被引用到vue时， 3 | 4 | Vue.use()如果传进去的是对象，则必须传install方法，如果是函数，就直接作为install调用， 5 | 6 | vue-router被引入调用了install函数，用vue作为参数，利用vue.mixin混入机制， 7 | 8 | 在beforeCreate获取$option 创建私有属性 _route = this.$option.route.并且在这个函数中通过vue.util.defineReactive定义了响应式的_route属性， 9 | 10 | 当_route值改变的时候就会自动调用vue的render方法，更新视图。 11 | 12 | vue的实例引用vue-route实例，利用object.defineProperty截取了_route的属性，在触发更新时候，响应依赖他的组件们， 13 | 调用vue.util.defineReactive 这个是vue的发布订阅者劫持数据的函数，触发render的更新， 14 | -------------------------------------------------------------------------------- /阶段一/vue组件通信.md: -------------------------------------------------------------------------------- 1 | ## vue组件通信 2 | 3 | 1.方法一、props/$emit 4 | 5 | 父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现 6 | 7 | 2.子组件向父组件传值（通过事件形式）:组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。 8 | 9 | 方法二、$emit/$on 10 | 11 | ```js 12 | var Event=new Vue(); 13 | Event.$emit(事件名,数据); 14 | Event.$on(事件名,data = {}); 15 | ``` 16 | 17 | https://github.com/webVueBlog/Leetcode -------------------------------------------------------------------------------- /阶段一/单向数据流与双向数据绑定.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 单向数据流： 4 | 5 | state驱动应用的数据源， 6 | view：以声明方式将state映射到视图， 7 | actions：响应在view上的用户输入导致的状态变化 8 | 9 | 用户在view操作通过action改变state里面的值同时state驱动view层显示，这就是一个闭环的单向数据流。 10 | 11 | 单向数据流主要为了避免子组件修改父组件的状态出现应用数据流混乱的状态，避免不必要的理解，维持父子组件正常的数据依赖关系。 12 | 13 | 双向数据绑定是由mvvm框架实现，主要由view，viewModel和model三个部分组成，其中view和Model不能直接通信， 14 | 15 | 他们要通过中间件viewModel来通信，比如当model部分数据发生改变，viewModel通知view更新视图， 16 | 17 | 当在视图view数据发生变化也会同步到model中， 18 | 19 | view和model之间的同步完全是自动的，不需要人为操作dom，viewModel通常会实现一个observe观察者，当数据发生变化，视图就会更新 20 | 21 | -------------------------------------------------------------------------------- /阶段一/清除浮动的方式.md: -------------------------------------------------------------------------------- 1 | 2 | 1.最后一个标签新增 css clear：both 3 | 4 | 2.父元素 overflow：hidden 5 | 6 | 3.伪元素 7 | 8 | .clearfix:after：clearfix{clear:both;content:'';width:0;height:0;overflow:visible;display:block} 9 | 10 | 4.双伪元素 11 | 12 | .clearfix:after,.clearfix:before{content:'',display:table},.clearfix:after{clear:both} 13 | 14 | -------------------------------------------------------------------------------- /阶段一/箭头函数和普通函数的区别.md: -------------------------------------------------------------------------------- 1 | ## 箭头函数和普通函数的区别 2 | 3 | 1. 箭头函数是匿名函数，不能作为构造函数，不能使用 new 4 | 2. 箭头函数不绑定 arguments，需要解构赋值解决 5 | 3. 箭头函数不绑定 this 会根据上下文来作为自己的 this，箭头函数中 this 的指向在它被定义的时候就已经确定了，之后永远不会改变。 6 | 4. 箭头函数通过 call 和 apply 函数调用一个函数，只传入一个参数，对 this 没有影响 7 | 5. 箭头函数没有原型 8 | 9 | https://github.com/webVueBlog/Leetcode 10 | -------------------------------------------------------------------------------- /阶段一/隐式类型转换.md: -------------------------------------------------------------------------------- 1 | 2 | 1.所有对象除了null和undefined之外都有toString方法， 3 | 4 | 通常情况下，他和使用String方法返回的结果一致， 5 | toString方法的作用在于返回一个反映这个对象的字符串，然而这才是情况复杂的开始 6 | 7 | Object.prototype.toString会根据这个对象的`[[class]]`内部属性，返回由"[object"和class 和"]"三个部分组成的字符串。 8 | 9 | -------------------------------------------------------------------------------- /阶段七/WeChata275aefede4d88662ff210f15ff9ca48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/阶段七/WeChata275aefede4d88662ff210f15ff9ca48.png -------------------------------------------------------------------------------- /阶段七/apply.js: -------------------------------------------------------------------------------- 1 | const obj = { name: 'xx' }; 2 | function getName(a, b) { 3 | console.log(this.name, a, b); 4 | } 5 | 6 | Function.prototype.newApply = function (context, arg) { 7 | //必须是函数才能调用 8 | if (typeof this !== 'function') { 9 | throw this + 'is not a function'; 10 | } 11 | // 不排除context为null 12 | context = context || window; 13 | // 不排除参数为空 14 | arg = arg || []; 15 | //给新对象添加一个函数 让函数指向this 16 | context.myFn = this; 17 | // 执行这个函数 18 | const result = context.myFn(...arg); 19 | delete context.myFn; //再删除,否则就有副作用了 20 | return result; 21 | }; 22 | var a = getName.newApply(obj, [1, 2]); //xx 23 | console.log(a) 24 | -------------------------------------------------------------------------------- /阶段七/class方法继承原理.js: -------------------------------------------------------------------------------- 1 | /** 2 | 原生的继承主要是操作原型链，实现起来比较麻烦，使用 class 就要简单的多了。 3 | 继承时'必须'在子类构造函数中调用 super() '执行父类构造函数' 4 | super.show() 执行父类方法 5 | 下面是子类继承了父类的方法show 6 | */ 7 | 8 | class Person { 9 | constructor(name) { 10 | console.log(name); 11 | this.name = name; 12 | } 13 | show() { 14 | return `xxx: ${this.name}`; 15 | } 16 | } 17 | class User extends Person { 18 | constructor(name) { 19 | console.log(name); 20 | super(name); 21 | } 22 | run() { 23 | return super.show(); 24 | } 25 | } 26 | const da = new Person("da"); 27 | const a = new User("一辈子"); 28 | console.dir(a.run()); //xxx: 一辈子 -------------------------------------------------------------------------------- /阶段七/原型工厂封装.js: -------------------------------------------------------------------------------- 1 | function Extend(sub, sup) { 2 | sub.prototype = Object.create(sup.prototype); 3 | Object.defineProperty(sub.prototype, 'constructor', { 4 | value: Admin, 5 | enumerable: false, 6 | }); 7 | } 8 | 9 | function User(name, age) { 10 | this.name = name; 11 | this.age = age; 12 | } 13 | User.prototype.show = function () { 14 | console.log(this.name, this.age); 15 | }; 16 | 17 | function Admin(...args) { 18 | User.apply(this, args); 19 | } 20 | Extend(Admin, User); 21 | 22 | let admin = new Admin('da', 18); 23 | admin.show(); 24 | -------------------------------------------------------------------------------- /阶段七/原型继承.js: -------------------------------------------------------------------------------- 1 | //原型的继承 而不是改变构造函数的原型 2 | function User(param) { 3 | // this.name = function () { 4 | // console.log('user name method'); 5 | // }; 6 | } 7 | User.prototype.name = function () { 8 | console.log('user name method'); 9 | }; 10 | let hd = new User(); 11 | hd.name(); // user name method 12 | console.log(hd); //User {name: ƒ} 13 | 14 | function Admin() { } 15 | // Admin.prototype = User.prototype; //直接改变构造函数的原型是不对的 16 | Admin.prototype.__proto__ = User.prototype 17 | let admin = new Admin(); 18 | 19 | admin.name(); // user name method 20 | -------------------------------------------------------------------------------- /阶段七/原型链实例.js: -------------------------------------------------------------------------------- 1 | Function.prototype.a = () => console.log(1) 2 | 3 | Object.prototype.b = () => console.log(2) 4 | 5 | function A() { } 6 | 7 | var a = new A(); 8 | 9 | console.log(A.__proto__ === Function.prototype) // true 10 | 11 | console.log(Function.prototype.__proto__ === Object.prototype) // true 12 | 13 | -------------------------------------------------------------------------------- /阶段七/寄生式继承.js: -------------------------------------------------------------------------------- 1 | /** 思路：创建一个仅用于封装继承过程的函数 2 | * 该函数在内部以某种方式来增强对象 3 | * 最后再像真的是它做了所有工作一样返回对象 4 | * 考虑'对象'而不是自定义和构造函数的情况下，可以考虑寄生式继承 5 | */ 6 | 7 | function CreateAnother(o) { 8 | // o 是要作为新对象的基础对象 9 | let clone = Object.create(o); //通过调用函数创建一个新对象 10 | clone.show = function () { //以某种方式来增强这个对象 11 | console.log(this.name); 12 | }; 13 | return clone //返回这个对象 14 | } 15 | 16 | 17 | var Father = { 18 | name: 'da', 19 | friends: ['pq'], 20 | }; 21 | 22 | var children = CreateAnother(Father); 23 | children.show() //da 继承了Father 和 创造show方法 24 | 25 | /** 与原型式继承非常相似，也是基于某个对象或者某些信息创建一个对象，然后增强对象，最后返回对象 26 | * 为了解决组合继承里面多次调用超类型构造函数而导致的低效率问题，可以将这个模式和组合模式一起使用 27 | */ -------------------------------------------------------------------------------- /阶段三/1.OSI七层网络模型.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/阶段三/1.OSI七层网络模型.jpg -------------------------------------------------------------------------------- /阶段三/5.三次挥手.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/阶段三/5.三次挥手.jpg -------------------------------------------------------------------------------- /阶段三/6.四次挥手.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/阶段三/6.四次挥手.jpg -------------------------------------------------------------------------------- /阶段三/9.缓存.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webVueBlog/Leetcode/149727c64f4bdc71b2d2330cf0236ba2f08c19eb/阶段三/9.缓存.jpg -------------------------------------------------------------------------------- /阶段三/HTTPS工作流程.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 客户端： 验证密钥， 验证， 是， 生成随机key， 复制密钥， 使用key解密内容 3 | * 4 | * 服务器： 公钥，私钥 使用 私钥解密 获取key，使用key隐藏内容 5 | * 6 | * 1. 请求网站 7 | * 2. 生成公钥和私钥 8 | * 3. 响应公钥 9 | * 4. 验证是否https，生成随机key，复制密钥 10 | * 5. 隐藏传输随机key 11 | * 6. 使用私钥，获取key，使用key隐藏内容 12 | * 7. 使用客户端key响应加密内容 13 | * 8. 使用key解密内容 14 | */ 15 | -------------------------------------------------------------------------------- /阶段三/assign.js: -------------------------------------------------------------------------------- 1 | const target = { a: 1 }; 2 | const source1 = { b: 2, a: 3 }; 3 | const source2 = { c: 3 }; 4 | 5 | Object.assign(target, source1, source2); 6 | 7 | console.log(target); // { a: 3, b: 2, c: 3 } 8 | //如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。 9 | //Object.assign()方法实行的是浅拷贝，而不是深拷贝。 10 | 11 | //也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。 -------------------------------------------------------------------------------- /阶段三/delete.js: -------------------------------------------------------------------------------- 1 | /** 2 | * delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 3 | * 4 | * Vue.delete 直接删除了数组 改变了数组的键值。 5 | */ 6 | 7 | -------------------------------------------------------------------------------- /阶段三/keep-alive.js: -------------------------------------------------------------------------------- 1 | /** 2 | * activated 和 deactivated 3 | * 4 | * 1. activated 页面第一次进入的时候，钩子触发的顺序是 created -> mounted -> activated 5 | * 6 | * 2. deactivated 页面退出的时候触发 7 | */ -------------------------------------------------------------------------------- /阶段三/mustache.js: -------------------------------------------------------------------------------- 1 | //1.将数据变为试图（1.纯dom法，2.数组join法，ES6反引号法，模板引擎） -------------------------------------------------------------------------------- /阶段三/nodeEvent.js: -------------------------------------------------------------------------------- 1 | /** 2 | * close callbacks 3 | * 4 | * check 5 | * 6 | * poll 7 | * 8 | * idle, prepare 9 | * 10 | * pending callbacks 11 | * 12 | * timers 13 | */ -------------------------------------------------------------------------------- /阶段三/public属性.js: -------------------------------------------------------------------------------- 1 | // public 指不受保护的属性，在类的内部和外部都可以访问到 2 | 3 | class User { 4 | url = 'xxx.com'; 5 | constructor(name) { 6 | this.name = name 7 | } 8 | } 9 | 10 | let p = new User('da'); 11 | 12 | console.log(p.name, p.url) // da xxx.com -------------------------------------------------------------------------------- /阶段三/scoped.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 1. 在vue组件中，在style 标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，非常好的机制 3 | */ -------------------------------------------------------------------------------- /阶段三/set语法.js: -------------------------------------------------------------------------------- 1 | let arr = [1, 2, 2, 32, 23, 122, 45]; 2 | console.log(arr); 3 | // [ 4 | // 1, 2, 2, 32, 5 | // 23, 122, 45 6 | // ] 7 | console.log(new Set(arr)); 8 | // Set(6) { 1, 2, 32, 23, 122, 45 } 9 | 10 | 11 | let set = new Set(); 12 | set.add(1); 13 | set.add(2); 14 | set.add(3); 15 | set.add(3); 16 | console.log(set); // Set(3) { 1, 2, 3 } 17 | 18 | let sets1 = new Set('da'); 19 | console.log(sets1); // Set(2) { 'd', 'a' } 字符串 转成数组 20 | console.log(sets1.has('d')); // 判断一个元素是否在数组里面true // true 21 | console.log(sets1.has('b')); // false 22 | console.log(sets1.size); // 2 23 | -------------------------------------------------------------------------------- /阶段三/vue-loader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue文件的一个加载器，将 template / js / style 转换 js 模块 3 | * 4 | * 用途: js可以写 es6,style样式可以 scss 或 less，template 可以加jade等 5 | */ -------------------------------------------------------------------------------- /阶段三/vue-router.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 使用 watch 监听 3 | * 4 | * watch: { 5 | * $route(to, from) { 6 | * if(to != from) { 7 | * console.log("监听到路由变化，做出响应的处理"); 8 | * } 9 | * } 10 | * } 11 | */ 12 | 13 | // 向 router-view 组件中添加key 14 | 15 | // 16 | -------------------------------------------------------------------------------- /阶段三/webpack实践.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 1. stylelint 校验规则 3 | * HtmlWebpackPlugin简化了HTML 文件的创建 4 | */ -------------------------------------------------------------------------------- /阶段三/websocket.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ajax 轮询 3 | * 4 | * Websockets 5 | */ -------------------------------------------------------------------------------- /阶段三/三次挥手.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 验证密钥 验证 是 生成随机key 否 提示https警告 复制密钥 3 | * 使用key解密内容 4 | * 5 | * 公钥，私钥 使用私钥解密，获取key，使用key隐藏内容 6 | * 7 | * 1. 请求网站 8 | * 2. 生成公钥和私钥 9 | * 3. 响应公钥 10 | * 4. 验证密钥 验证 是 生成随机key 复制密钥 11 | * 5. 隐藏传输随机key 12 | * 6. 使用私钥解密，获取key，使用key隐藏内容 13 | * 7. 使用客户端key响应加密内容 14 | * 8. 使用key解密内容 15 | */ -------------------------------------------------------------------------------- /阶段三/代理函数.js: -------------------------------------------------------------------------------- 1 | function fun(num) { 2 | return num === 1 ? 1 : num * 2; 3 | } 4 | 5 | let proxy = new Proxy(fun, { 6 | apply(func, obj, args) { 7 | console.log(func); 8 | console.log(obj); 9 | console.log(args); 10 | } 11 | }); 12 | 13 | proxy(3); 14 | // [Function: fun] 15 | // undefined 16 | // [3] 17 | 18 | function fun1(num) { 19 | return num === 1 ? 1 : num * 2; 20 | } 21 | 22 | let proxy1 = new Proxy(fun1, { 23 | apply(fun1, obj, args) { 24 | console.log(fun1); 25 | console.log(obj); 26 | console.log(args); 27 | } 28 | }); 29 | 30 | console.log(proxy1(3)) -------------------------------------------------------------------------------- /阶段三/代理对象.js: -------------------------------------------------------------------------------- 1 | // Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。 const p = new Proxy(target, handler) 2 | 3 | const obj = { name: 'da' }; 4 | const proxy = new Proxy(obj, { 5 | get(obj, property) { 6 | return obj[property]; 7 | }, 8 | set(obj, property, value) { 9 | obj[property] = value; 10 | // 在严格模式下设置要返回 true 11 | return true 12 | } 13 | }); 14 | 15 | console.log(proxy); // { name: 'da' } 16 | proxy.name = 'hh'; // 修改 17 | console.log(proxy); // { name: 'hh' } -------------------------------------------------------------------------------- /阶段三/修饰符.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 1. .stop 等同于 JavaScript 中的event.stopPropagation()，防止事件冒泡； 3 | * 2. .prevent 等同于 JavaScript 中的 event.preventDefault(), 防止执行预设的行为 4 | * 3. .capture 与事件冒泡的方向相反，事件捕获有外到内 5 | * 4. .self 只会触发自己范围内的事件，不含子元素 6 | * 5. .once 只会触发一次 7 | */ -------------------------------------------------------------------------------- /阶段三/加解密.js: -------------------------------------------------------------------------------- 1 | /** 1.webASSembly 在浏览器层面 写汇编语言 2 | * webworker 3 | * 非对称加密的 4 | */ -------------------------------------------------------------------------------- /阶段三/原型链.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Function构造函数 实例化 Person 构造函数 实例化 p 对象 3 | * 4 | * Function构造函数 实例化 Object构造函数 5 | * 6 | * Function构造函数 .prototype 指向 Function.prototype （对象) .__proto__ 指向 Object.prototype 7 | * 8 | * Function.prototype .constructor 指向 Function构造函数 9 | * 10 | * Object构造函数 .__proto__ 指向 Function.prototype 指向 .__proto__ 指向 Object.prototype 11 | * 12 | * p对象 的 .__proto__ 指向 Person.prototype 原型对象 .__proto__ 指向 Object.prototype 13 | * 14 | * Person构造函数 的.prototype 原型对象 Person.prototype 15 | * 16 | * 原型对象Person.prototype 的 .constructor 指向 Person构造函数 17 | * 18 | * Person构造函数的 .__proto__ 指向 Function.prototype 19 | */ -------------------------------------------------------------------------------- /阶段三/发送消息.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 当我（Y） 发送消息给A，B 3 | * y给A发送两条消息 发送消息时候携带req_id 收到消息发送成功回执增加msg_id属性，删除req_id 4 | * 如果Y给A发送两条消息的时候 Y切换聊天到B 5 | * 网络延迟造成 发给A的两条消息 在切换到B的时候才收到 发送的第一条消息的成功回执 6 | * 做的处理：寻找最后一个req_id替换，然后把之前的req_id都删除 7 | * 问题：可能消息没发送成功，msg_id 为undefined 8 | */ -------------------------------------------------------------------------------- /阶段三/四次挥手.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * 客户： ESTABLISHED 建立状态， FIN-WAIT-1 终止等待1 FIN-WAIT-2 终止等待2 TIME-WAIT时间等待 CLOSED 4 | * 5 | * 服务器 ESTABLISHED CLOSE-WAIT关闭等待 LAST-ACK最后确认 CLOSED 6 | * 7 | * 客户 主动关闭 等待2MSL 8 | * 9 | * 服务器： 通知应用程序 被动关闭 10 | * 11 | * 客户 - 数据传送 - 服务器 12 | * 13 | * 1. 客户 发送 FIN=1，seq=u 到 服务器 14 | * 2. 服务器 发送 ACK=1， seq= v ack = u+1 15 | * 3. 服务器 发送 FIN= 1 ACK=1 seq = w, ack = u+1 16 | * 4. 客户： 发送 ACK = 1， seq=u+1, ack = w+1 17 | */ 18 | 19 | -------------------------------------------------------------------------------- /阶段三/在类里面使用访问器.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 使用访问器可以管控属性，有效的防止属性随意修改 3 | * 4 | * 访问器就是在 函数前加上 get/set 修饰，操作属性时 不需要加函数的扩号， 直接用函数名 5 | */ 6 | 7 | class User { 8 | constructor(name) { 9 | this.data = { name }; 10 | } 11 | get name() { 12 | return this.data.name 13 | } 14 | set name(value) { 15 | if (value.trim() == '') throw new Error('invalid params') 16 | this.data.name = value 17 | } 18 | } 19 | 20 | let p = new User('da'); 21 | console.log(p) // User { data: { name: 'da' } } 22 | p.name = 'jj'; 23 | console.log(p.name) // jj 24 | -------------------------------------------------------------------------------- /阶段三/声明类的语法.js: -------------------------------------------------------------------------------- 1 | class User { 2 | // constructor 会在 new 时自动执行，我们可以用它来做参数的初始化 3 | constructor(name) { 4 | this.name = name; 5 | } 6 | show() { 7 | return this.name 8 | } 9 | get() { 10 | console.log('constructor自动初始化') 11 | } 12 | } 13 | 14 | console.log(typeof User); // function 15 | 16 | let p1 = new User('da'); 17 | p1.get(); // constructor自动初始化 18 | console.log(p1.show()); // da 19 | 20 | console.log(User.prototype === p1.__proto__); // true 21 | console.log(User.prototype.constructor === User) // true 22 | 23 | let p = class { }; 24 | console.log(typeof p); // function 25 | 26 | 27 | -------------------------------------------------------------------------------- /阶段三/对象的含义.js: -------------------------------------------------------------------------------- 1 | let da = 1 2 | 3 | var jd = 'jjd'; 4 | 5 | let user = { 6 | da: 'xx', 7 | age: 12, 8 | show: function () { 9 | console.log(this.da); // xx 10 | function render() { 11 | console.log(da); // 1 12 | } 13 | render(); 14 | } 15 | } 16 | 17 | user.show() -------------------------------------------------------------------------------- /阶段三/延伸函数生命周期.js: -------------------------------------------------------------------------------- 1 | function Da() { 2 | let n = 1; 3 | return function sum() { 4 | console.log(n++); 5 | }; 6 | } 7 | //反复调用产生新的数据 永远不会再被用到 8 | //调一次函数就产生一次新的内存地址 9 | //把里面的数据返回给外部 保证内存地址一直在 10 | Da()(); //1 11 | Da()(); //1 12 | 13 | //return 了sum 这块数据被使用了！ 14 | //不会被清除 15 | let a = Da(); 16 | a(); //1 17 | a(); //2 18 | let b = Da(); 19 | b(); //1 20 | b(); //2 21 | b(); //3 22 | let c = Da(); 23 | c(); //1 24 | c(); //2 25 | c(); //3 26 | c(); //4 27 | c(); //5 28 | c(); //6 29 | c(); //7 30 | -------------------------------------------------------------------------------- /阶段三/数组使用代理拦截操作.js: -------------------------------------------------------------------------------- 1 | const lessons = [ 2 | { 3 | name: 'a', 4 | age: 1 5 | }, 6 | { 7 | name: 'b', 8 | age: 2 9 | } 10 | ]; 11 | 12 | let proxy = new Proxy(lessons, { 13 | get(array, key) { 14 | console.log(array[key]); 15 | // const title = array[key].name; 16 | // console.log(title); 17 | }, 18 | set(array, key, value) { 19 | 20 | } 21 | }) 22 | 23 | proxy[2]; 24 | proxy.name = 'dada' 25 | 26 | function Da() { return 1 } 27 | console.log(Da()); 28 | 29 | // undefined 30 | // 1 -------------------------------------------------------------------------------- /阶段三/构造函数.js: -------------------------------------------------------------------------------- 1 | function Person(name, friends) { 2 | this.name = name; 3 | this.friends = ['a', 'b']; 4 | let name1 = 1 5 | show = function () { 6 | 7 | } 8 | } 9 | 10 | let p1 = new Person('da'); 11 | let p2 = new Person('li'); 12 | 13 | console.log(Person.prototype); // {} 14 | 15 | p1.friends.push('c'); 16 | 17 | console.log(p1); // Person { name: 'da', friends: [ 'a', 'b', 'c' ] } 18 | 19 | console.log(p1.friends) // [ 'a', 'b', 'c' ] 20 | console.log(p2.friends) // [ 'a', 'b' ] -------------------------------------------------------------------------------- /阶段三/构造函数的作用和使用形态.js: -------------------------------------------------------------------------------- 1 | function Da() { 2 | let n = 1; 3 | this.sum = function () { 4 | console.log(++n); 5 | }; 6 | } 7 | 8 | // 每次new 都会产生一个新空间 9 | let a = new Da(); 10 | // 构造函数中的变量也会被保存的 为每个对象保存一份 11 | a.sum(); // 2; 12 | a.sum(); // 3; 13 | a.sum(); // 4; 14 | 15 | let b = new Da(); 16 | b.sum(); // 2 17 | b.sum(); // 3 18 | b.sum(); // 4 19 | b.sum(); // 5 20 | 21 | function Daa(param) { 22 | let n = 1 23 | return n 24 | } 25 | 26 | let c = new Daa('jeskson'); 27 | console.log(c) -------------------------------------------------------------------------------- /阶段三/模板字符串.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 模板标签 3 | * 4 | * 模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串 5 | * 6 | */ 7 | 8 | function message(literals, value1, value2) { 9 | console.log(literals); // [ '', ' I am ', '' ] 10 | console.log(value1); // a 11 | console.log(value2); // b 12 | 13 | return value1 + literals + value2; 14 | } 15 | 16 | let x = 'a', y = 'b'; 17 | 18 | var res = message`${x} I am ${y}`; 19 | console.log(res) // a, I am ,b -------------------------------------------------------------------------------- /阶段三/浏览器输入URL后回车.js: -------------------------------------------------------------------------------- 1 | /** 2 | 1.什么是url？ 3 | 资源统一定位符，可以说明如何从一个精确、固定的位置获取资源 4 | 说明了 协议，服务器，本地资源 5 | 而浏览器都是基于HTTP协议 6 | */ 7 | -------------------------------------------------------------------------------- /阶段三/箭头函数.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 1. 箭头函数没有自己的 this 对象 3 | * 2. 不可以当作构造函数，也就是说，不可以对箭头函数使用 new 命令，否则会抛出一个错误 4 | * 3. 不可以使用 arguments 对象，该对象在函数体内不存在，如果要用，可以用 rest 参数代替 5 | * 4. 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数 6 | */ 7 | 8 | var a = () => { 9 | console.log('a') 10 | } 11 | 12 | var b = new a(); 13 | console.log('b', b) // TypeError: a is not a constructor -------------------------------------------------------------------------------- /阶段三/缓存.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 浏览器请求 3 | * 有缓存 4 | * 是否过期 5 | * 6 | * 是 Etag? 是 向web服务器请求带 If-None-Match 7 | * Last-Modified？ 是 向web服务器请求带 If-Modified-Since 8 | * 服务器决策 - 》 200 0r 304? 9 | * 304 -> 从缓存读取 10 | * Etag? - 否 -> Last-Modified? 否 -》 向 web 服务器请求 -》 请求响应，缓存协商 -》 呈现 11 | * 是否过期？ 否 从缓存读取 12 | */ -------------------------------------------------------------------------------- /阶段三/解构赋值.js: -------------------------------------------------------------------------------- 1 | /** 解构：按照一定模式，从数组和对象中提取值，对变量进行赋值 2 | * 只要等号两边的模式相同，左边的变量就会被赋予对应的值。 3 | */ 4 | let [a, b, c] = [1, 2, 3]; //数组中提取值，按照对应位置，对变量赋值。 5 | 6 | // 函数的参数也可以使用解构赋值。 7 | function add([x, y]) { 8 | return x + y; 9 | } 10 | 11 | add([1, 2]); // 3 -------------------------------------------------------------------------------- /阶段三/计算机的组成.js: -------------------------------------------------------------------------------- 1 | // 计算机两大重点 cpu 和 内存 2 | 3 | // cpu 包含 ALU Registers PC 4 | 5 | // ALU 是用来左计算 Registers 用来存储 PC 用来做指令 -------------------------------------------------------------------------------- /阶段三/进程和线程.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 一个程序，读入内存，全是0和1构成 3 | * 从内存读入到 CPU 计算， 这个时候要通过总栈 4 | * 怎么区分一段 010101 的数据到底是数据 还是 指令 5 | * 总栈类分为三种： 6 | * 控制线 7 | * 地址线 8 | * 数据线 9 | * （主要看从哪里来地 寻址线 10 | * 11 | * 一个程序的执行 首先把可执行的文件放到内存 首先是起始文件main 的地址，逐步读出指令和数据，进行计算写回到内存 12 | * 13 | * 什么是进程？ 什么是线程？ 14 | * 15 | * 只要有一个程序进入 内存，称之为进程。一个程序可以🏃🏻‍♀️跑多个进程 16 | * 17 | * 如果同一个进程内部有多个任务并发执行的需求（比如一边计算，一边接收网络数据，一边刷新界面）必须设立一种机制 让他并发 18 | * 19 | * 多进程？可以实现但是毛病多 最严重的是 可以轻易的搞死别的进程 因为进程之间可以共享数据 20 | * 线程概念横空出世： 21 | * 22 | * 进程是静态的概念：程序进入内存，分配对应资源（存储资源，网络资源），内存空间，进程进入内存，同时产生一个主线程 23 | * 线程是动态的概念：是可执行的计算单元，共享进程资源 24 | */ -------------------------------------------------------------------------------- /阶段三十一/Object.defineProperty.js: -------------------------------------------------------------------------------- 1 | // 实现双向数据绑定 2 | 3 | let obj = {} 4 | let input = document.getElementById('input') 5 | let span = document.getElementById('span') 6 | 7 | // 数据劫持 8 | Object.defineProperty(obj, 'text', { 9 | configurable: true, 10 | enumerable: true, 11 | get() { 12 | console.log('获取数据了') 13 | }, 14 | set(newVal) { 15 | console.log('数据更新了') 16 | input.value = newVal 17 | span.innerHTML = newVal 18 | } 19 | }) 20 | 21 | // 输入监听 22 | input.addEventListener('keyup', function(e){ 23 | obj.text = e.target.value 24 | }) -------------------------------------------------------------------------------- /阶段三十一/Route.js: -------------------------------------------------------------------------------- 1 | // 实现简单路由 2 | 3 | class Route{ 4 | // hash路由 5 | constructor() { 6 | // 路由存储对象 7 | this.routes = {} 8 | // 当前hash 9 | this.currentHash = '' 10 | // 绑定this, 避免监听时this指向改变 11 | this.freshRoute = this.freshRoute.bind(this) 12 | // 监听 13 | window.addEventListener('load', this.freshRoute, false) 14 | window.addEventListener('hashchange', this.freshRoute, false) 15 | } 16 | // 存储 17 | storeRoute(path, cb) { 18 | this.routes[path] = cb || function () {} 19 | } 20 | // 更新 21 | freshRoute() { 22 | this.currentHash = location.hash.slice(1) || '/' 23 | this.routes[this.currentHash]() 24 | } 25 | } -------------------------------------------------------------------------------- /阶段三十一/code1.js: -------------------------------------------------------------------------------- 1 | const promise = new Promise((resolve, reject) => { 2 | console.log(1); 3 | console.log(2); 4 | }); 5 | promise.then(() => { 6 | console.log(3); 7 | }); 8 | console.log(4); 9 | 10 | // 1 11 | // 2 12 | // 4 13 | 14 | -------------------------------------------------------------------------------- /阶段三十一/code10.js: -------------------------------------------------------------------------------- 1 | const promise = Promise.resolve().then(() => { 2 | return promise; 3 | }) 4 | promise.catch(console.err) 5 | 6 | 7 | // Uncaught (in promise) TypeError: Chaining cycle detected for promise # 8 | -------------------------------------------------------------------------------- /阶段三十一/code2.js: -------------------------------------------------------------------------------- 1 | const promise1 = new Promise((resolve, reject) => { 2 | console.log('promise1') 3 | resolve('resolve1') 4 | }) 5 | const promise2 = promise1.then(res => { 6 | console.log(res) 7 | }) 8 | console.log('1', promise1); 9 | console.log('2', promise2); 10 | 11 | // promise1 12 | // 1 Promise{: resolve1} 13 | // 2 Promise{} 14 | // resolve1 15 | -------------------------------------------------------------------------------- /阶段三十一/code3.js: -------------------------------------------------------------------------------- 1 | const promise = new Promise((resolve, reject) => { 2 | console.log(1); 3 | setTimeout(() => { 4 | console.log("timerStart"); 5 | resolve("success"); 6 | console.log("timerEnd"); 7 | }, 0); 8 | console.log(2); 9 | }); 10 | promise.then((res) => { 11 | console.log(res); 12 | }); 13 | console.log(4); 14 | 15 | 16 | // 1 17 | // 2 18 | // 4 19 | // timerStart 20 | // timerEnd 21 | // success 22 | -------------------------------------------------------------------------------- /阶段三十一/code4.js: -------------------------------------------------------------------------------- 1 | Promise.resolve().then(() => { 2 | console.log('promise1'); 3 | const timer2 = setTimeout(() => { 4 | console.log('timer2') 5 | }, 0) 6 | }); 7 | const timer1 = setTimeout(() => { 8 | console.log('timer1') 9 | Promise.resolve().then(() => { 10 | console.log('promise2') 11 | }) 12 | }, 0) 13 | console.log('start'); 14 | 15 | 16 | // start 17 | // promise1 18 | // timer1 19 | // promise2 20 | // timer2 21 | -------------------------------------------------------------------------------- /阶段三十一/code5.js: -------------------------------------------------------------------------------- 1 | const promise = new Promise((resolve, reject) => { 2 | resolve('success1'); 3 | reject('error'); 4 | resolve('success2'); 5 | }); 6 | promise.then((res) => { 7 | console.log('then:', res); 8 | }).catch((err) => { 9 | console.log('catch:', err); 10 | }) 11 | 12 | 13 | // then：success1 14 | -------------------------------------------------------------------------------- /阶段三十一/code6.js: -------------------------------------------------------------------------------- 1 | Promise.resolve(1) 2 | .then(2) 3 | .then(Promise.resolve(3)) 4 | .then(console.log) 5 | 6 | 7 | // 1 8 | // Promise {: undefined} 9 | -------------------------------------------------------------------------------- /阶段三十一/code7.js: -------------------------------------------------------------------------------- 1 | const promise1 = new Promise((resolve, reject) => { 2 | setTimeout(() => { 3 | resolve('success') 4 | }, 1000) 5 | }) 6 | const promise2 = promise1.then(() => { 7 | throw new Error('error!!!') 8 | }) 9 | console.log('promise1', promise1) 10 | console.log('promise2', promise2) 11 | setTimeout(() => { 12 | console.log('promise1', promise1) 13 | console.log('promise2', promise2) 14 | }, 2000) 15 | 16 | 17 | // promise1 Promise {} 18 | // promise2 Promise {} 19 | 20 | // Uncaught (in promise) Error: error!!! 21 | // promise1 Promise {: "success"} 22 | // promise2 Promise {: Error: error!!} 23 | -------------------------------------------------------------------------------- /阶段三十一/code8.js: -------------------------------------------------------------------------------- 1 | Promise.resolve(1) 2 | .then(res => { 3 | console.log(res); 4 | return 2; 5 | }) 6 | .catch(err => { 7 | return 3; 8 | }) 9 | .then(res => { 10 | console.log(res); 11 | }); 12 | 13 | 14 | // 1 15 | // 2 16 | -------------------------------------------------------------------------------- /阶段三十一/code9.js: -------------------------------------------------------------------------------- 1 | Promise.resolve().then(() => { 2 | return new Error('error!!!') 3 | }).then(res => { 4 | console.log("then: ", res) 5 | }).catch(err => { 6 | console.log("catch: ", err) 7 | }) 8 | 9 | 10 | // "then: " "Error: error!!!" 11 | -------------------------------------------------------------------------------- /阶段三十一/creat_react_app.md: -------------------------------------------------------------------------------- 1 | react脚手架 2 | 3 | create-react-app 4 | 5 | react + webpack + es6 + eslint 6 | 7 | 模块化，组件化，工程化 8 | 9 | npm install -g create-react-app 10 | 11 | ## public 12 | 13 | 1. 代表public 文件夹的路径 14 | 2. 开启理想视口，用于做移动端网页的适配 15 | 3. 用于配置浏览器页签+地址栏的颜色 16 | 4. 指定网页添加到手机主屏幕后的图标 17 | 5. 应用加壳的配置文件 18 | 6. 不支持js 19 | 20 | ## src 21 | 22 | -------------------------------------------------------------------------------- /阶段三十一/jsonp.js: -------------------------------------------------------------------------------- 1 | // 实现jsonp 2 | 3 | function addScript(src) { 4 | const script = document.createElement('script'); 5 | script.src = src; 6 | script.type = 'text/javascript'; 7 | document.body.appendChild(script) 8 | } 9 | 10 | addScript('jsurlxxxx') -------------------------------------------------------------------------------- /阶段三十一/react.md: -------------------------------------------------------------------------------- 1 | import React, {Component} from react; 2 | 3 | Component 不是结构赋值，是暴露export -------------------------------------------------------------------------------- /阶段三十一/react_eventhandler.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | // 通过onXxx属性指定事件处理函数（注意大小写） 4 | // 1.React使用的是自定义（合成）事件，而不是使用的原生DOM事件 - 为了更好的兼容性 5 | // 2.React中的事件是通过 事件委托 方式处理 委托给组件最外层的元素 - 为了高效 6 | 7 | // 通过event.target得到发生事件的DOM元素对象 - 不要过渡使用ref 8 | 9 | // 为了更好的兼容性，- React使用的是自定义（合成）事件，而不是使用的原生DOM事件，大小写 10 | 11 | // React在工作的时候，把事件都加给了reactdiv上，最外侧的div， 12 | // 事件委托的原理是事件冒泡 13 | 14 | // 为什么做事件委托，为了高效 15 | 16 | // react文档说ref不能过渡使用，ref是可以避免的 17 | // 如发生事件的 元素，正好是你要操作的元素，你就可以省略ref 18 | ``` -------------------------------------------------------------------------------- /阶段三十一/setTimeoutTosetInterval.js: -------------------------------------------------------------------------------- 1 | function mySetInterval(fn, timeout) { 2 | // 控制器，控制定时器是否继续执行 3 | var timer = { 4 | flag: true 5 | }; 6 | // 设置递归函数，模拟定时器执行 7 | function interval() { 8 | if(timer.flag) { 9 | fn(); 10 | setTimeout(interval, timeout); 11 | } 12 | } 13 | // 启动定时器 14 | setTimeout(interval, timeout); 15 | // 返回控制器 16 | return timer; 17 | } -------------------------------------------------------------------------------- /阶段三十三/code22.js: -------------------------------------------------------------------------------- 1 | const p1 = new Promise((resolve) => { 2 | setTimeout(() => { 3 | resolve('resolve3'); 4 | console.log('timer1') 5 | }, 0) 6 | 7 | resolve('resovle1'); 8 | resolve('resolve2'); 9 | }).then(res => { 10 | console.log(res) // resolve1 11 | setTimeout(() => { 12 | console.log(p1) 13 | }, 1000) 14 | }).finally(res => { 15 | console.log('finally', res) 16 | }) 17 | 18 | 19 | // resovle1 20 | // finally undefined 21 | // timer1 22 | 23 | // Promise { undefined } -------------------------------------------------------------------------------- /阶段三十三/code24.js: -------------------------------------------------------------------------------- 1 | console.log(1) 2 | 3 | setTimeout(() => { 4 | console.log(2) 5 | }) 6 | 7 | new Promise(resolve => { 8 | console.log(3) 9 | resolve(4) 10 | }).then(d => console.log(d)) 11 | 12 | setTimeout(() => { 13 | console.log(5) 14 | new Promise(resolve => { 15 | resolve(6) 16 | }).then(d => console.log(d)) 17 | }) 18 | 19 | setTimeout(() => { 20 | console.log(7) 21 | }) 22 | 23 | console.log(8) 24 | 25 | // 1 26 | // 3 27 | // 8 28 | // 4 29 | // 2 30 | // 5 31 | // 6 32 | // 7 -------------------------------------------------------------------------------- /阶段三十三/code25.js: -------------------------------------------------------------------------------- 1 | console.log(1); 2 | 3 | setTimeout(() => { 4 | console.log(2); 5 | Promise.resolve().then(() => { 6 | console.log(3) 7 | }); 8 | }); 9 | 10 | new Promise((resolve, reject) => { 11 | console.log(4) 12 | resolve(5) 13 | }).then((data) => { 14 | console.log(data); 15 | }) 16 | 17 | setTimeout(() => { 18 | console.log(6); 19 | }) 20 | 21 | console.log(7); 22 | 23 | // 1 24 | // 4 25 | // 7 26 | // 5 27 | // 2 28 | // 3 29 | // 6 -------------------------------------------------------------------------------- /阶段三十三/code26.js: -------------------------------------------------------------------------------- 1 | Promise.resolve().then(() => { 2 | console.log('1'); 3 | throw 'Error'; 4 | }).then(() => { 5 | console.log('2'); 6 | }).catch(() => { 7 | console.log('3'); 8 | throw 'Error'; 9 | }).then(() => { 10 | console.log('4'); 11 | }).catch(() => { 12 | console.log('5'); 13 | }).then(() => { 14 | console.log('6'); 15 | }); 16 | 17 | 18 | // 1 19 | // 3 20 | // 5 21 | // 6 -------------------------------------------------------------------------------- /阶段三十三/code27.js: -------------------------------------------------------------------------------- 1 | setTimeout(function () { 2 | console.log(1); 3 | }, 100); 4 | 5 | new Promise(function (resolve) { 6 | console.log(2); 7 | resolve(); 8 | console.log(3); 9 | }).then(function () { 10 | console.log(4); 11 | new Promise((resove, reject) => { 12 | console.log(5); 13 | setTimeout(() => { 14 | console.log(6); 15 | }, 10); 16 | }) 17 | }); 18 | console.log(7); 19 | console.log(8); 20 | 21 | 22 | // 2 23 | // 3 24 | // 7 25 | // 8 26 | // 4 27 | // 5 28 | // 6 29 | // 1 -------------------------------------------------------------------------------- /阶段三十三/this1.js: -------------------------------------------------------------------------------- 1 | function foo() { 2 | console.log( this.a ); 3 | } 4 | 5 | function doFoo() { 6 | foo(); 7 | } 8 | 9 | var obj = { 10 | a: 1, 11 | doFoo: doFoo 12 | }; 13 | 14 | var a = 2; 15 | obj.doFoo() 16 | 17 | // 2 -------------------------------------------------------------------------------- /阶段三十三/this10.js: -------------------------------------------------------------------------------- 1 | var a = 1; 2 | 3 | function printA(){ 4 | console.log(this.a); 5 | } 6 | 7 | var obj={ 8 | a:2, 9 | foo:printA, 10 | bar:function(){ 11 | printA(); 12 | } 13 | } 14 | 15 | obj.foo(); // 2 16 | obj.bar(); // 1 17 | var foo = obj.foo; 18 | foo(); // 1 19 | 20 | -------------------------------------------------------------------------------- /阶段三十三/this11.js: -------------------------------------------------------------------------------- 1 | var x = 3; 2 | var y = 4; 3 | var obj = { 4 | x: 1, 5 | y: 6, 6 | getX: function() { 7 | var x = 5; 8 | return function() { 9 | return this.x; 10 | }(); 11 | }, 12 | getY: function() { 13 | var y = 7; 14 | return this.y; 15 | } 16 | } 17 | console.log(obj.getX()) // 3 18 | console.log(obj.getY()) // 6 19 | -------------------------------------------------------------------------------- /阶段三十三/this12.js: -------------------------------------------------------------------------------- 1 | var a = 10; 2 | var obt = { 3 | a: 20, 4 | fn: function(){ 5 | var a = 30; 6 | console.log(this.a) 7 | } 8 | } 9 | obt.fn(); // 20 10 | obt.fn.call(); // 10 11 | (obt.fn)(); // 20 12 | 13 | 14 | // 20 10 20 -------------------------------------------------------------------------------- /阶段三十三/this13.js: -------------------------------------------------------------------------------- 1 | function a(xx){ 2 | this.x = xx; 3 | return this 4 | }; 5 | var x = a(5); 6 | var y = a(6); 7 | 8 | console.log(x.x) // undefined 9 | console.log(y.x) // 6 10 | -------------------------------------------------------------------------------- /阶段三十三/this14.js: -------------------------------------------------------------------------------- 1 | function foo(something){ 2 | this.a = something 3 | } 4 | 5 | var obj1 = { 6 | foo: foo 7 | } 8 | 9 | var obj2 = {} 10 | 11 | obj1.foo(2); 12 | console.log(obj1.a); // 2 13 | 14 | obj1.foo.call(obj2, 3); 15 | console.log(obj2.a); // 3 16 | 17 | var bar = new obj1.foo(4) 18 | console.log(obj1.a); // 2 19 | console.log(bar.a); // 4 20 | -------------------------------------------------------------------------------- /阶段三十三/this15.js: -------------------------------------------------------------------------------- 1 | function foo(something){ 2 | this.a = something 3 | } 4 | 5 | var obj1 = {} 6 | 7 | var bar = foo.bind(obj1); 8 | bar(2); 9 | console.log(obj1.a); // 2 10 | 11 | var baz = new bar(3); 12 | console.log(obj1.a); // 2 13 | console.log(baz.a); // 3 14 | -------------------------------------------------------------------------------- /阶段三十三/this2.js: -------------------------------------------------------------------------------- 1 | var a = 10 2 | var obj = { 3 | a: 20, 4 | say: () => { 5 | console.log(this.a) 6 | } 7 | } 8 | obj.say() 9 | 10 | var anotherObj = { a: 30 } 11 | obj.say.apply(anotherObj) 12 | 13 | // 10 10 -------------------------------------------------------------------------------- /阶段三十三/this3.js: -------------------------------------------------------------------------------- 1 | var a = 10 2 | var obj = { 3 | a: 20, 4 | say(){ 5 | console.log(this.a) 6 | } 7 | } 8 | obj.say() 9 | var anotherObj={a:30} 10 | obj.say.apply(anotherObj) 11 | 12 | // 20 30 -------------------------------------------------------------------------------- /阶段三十三/this4.js: -------------------------------------------------------------------------------- 1 | function a() { 2 | console.log(this); 3 | } 4 | a.call(null); 5 | 6 | // window 7 | 8 | // 'use strict'; 9 | 10 | // function a() { 11 | // console.log(this); 12 | // } 13 | // a.call(null); // null 14 | // a.call(undefined); // undefined 15 | -------------------------------------------------------------------------------- /阶段三十三/this5.js: -------------------------------------------------------------------------------- 1 | var obj = { 2 | name : 'xxx', 3 | fun : function(){ 4 | console.log(this.name); 5 | } 6 | } 7 | obj.fun() // xxx 8 | new obj.fun() // undefined 9 | // 使用new构造函数时，其this指向的是全局环境window -------------------------------------------------------------------------------- /阶段三十三/this6.js: -------------------------------------------------------------------------------- 1 | var obj = { 2 | say: function() { 3 | var f1 = () => { 4 | console.log("1111", this); 5 | } 6 | f1(); 7 | }, 8 | pro: { 9 | getPro:() => { 10 | console.log(this); 11 | } 12 | } 13 | } 14 | 15 | var o = obj.say; 16 | 17 | o(); 18 | obj.say(); 19 | obj.pro.getPro(); 20 | 21 | 22 | // 1111 window 23 | // 1111 obj 24 | // window -------------------------------------------------------------------------------- /阶段三十三/this7.js: -------------------------------------------------------------------------------- 1 | var myObject = { 2 | foo: "bar", 3 | func: function() { 4 | var self = this; 5 | console.log(this.foo); 6 | console.log(self.foo); 7 | (function() { 8 | console.log(this.foo); 9 | console.log(self.foo); 10 | }()); 11 | } 12 | }; 13 | myObject.func(); 14 | 15 | // bar bar undefined bar 16 | 17 | // 立即执行 匿名函数表达式 -------------------------------------------------------------------------------- /阶段三十三/this8.js: -------------------------------------------------------------------------------- 1 | window.number = 2; 2 | var obj = { 3 |  number: 3, 4 |  db1: (function(){ 5 |   console.log(this); 6 |   this.number *= 4; 7 |   return function(){ 8 |    console.log(this); 9 |    this.number *= 5; 10 |   } 11 |  })() 12 | } 13 | var db1 = obj.db1; 14 | 15 | db1(); 16 | obj.db1(); 17 | console.log(obj.number); // 15 18 | console.log(window.number); // 40 19 | -------------------------------------------------------------------------------- /阶段三十三/this9.js: -------------------------------------------------------------------------------- 1 | var length = 10; 2 | function fn() { 3 | console.log(this.length); 4 | } 5 | 6 | var obj = { 7 | length: 5, 8 | method: function(fn) { 9 | fn(); 10 | arguments[0](); 11 | } 12 | }; 13 | 14 | obj.method(fn, 1); 15 | 16 | // 10 2 -------------------------------------------------------------------------------- /阶段三十二/code10.js: -------------------------------------------------------------------------------- 1 | function runAsync (x) { 2 | const p = new Promise(r => 3 | setTimeout(() => 4 | r(x, console.log(x) 5 | ), 1000) 6 | ) 7 | return p 8 | } 9 | function runReject (x) { 10 | const p = new Promise((res, rej) => 11 | setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x) 12 | ) 13 | return p 14 | } 15 | Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)]) 16 | .then(res => console.log(res)) 17 | .catch(err => console.log(err)) 18 | 19 | // // 1s后输出 20 | // 1 21 | // 3 22 | // // 2s后输出 23 | // 2 24 | // Error: 2 25 | // // 4s后输出 26 | // 4 27 | -------------------------------------------------------------------------------- /阶段三十二/code11.js: -------------------------------------------------------------------------------- 1 | function runAsync (x) { 2 | const p = new Promise(r => 3 | setTimeout(() => r(x, console.log(x)), 1000) 4 | ) 5 | return p 6 | } 7 | Promise.race([runAsync(1), runAsync(2), runAsync(3)]) 8 | .then(res => console.log('result: ', res)) 9 | .catch(err => console.log(err)) 10 | 11 | 12 | // 1 13 | // result: 1 14 | // 2 15 | // 3 -------------------------------------------------------------------------------- /阶段三十二/code12.js: -------------------------------------------------------------------------------- 1 | function runAsync(x) { 2 | const p = new Promise(r => 3 | setTimeout(() => r(x, console.log(x)), 1000) 4 | ); 5 | return p; 6 | } 7 | function runReject(x) { 8 | const p = new Promise((res, rej) => 9 | setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x) 10 | ); 11 | return p; 12 | } 13 | Promise.race([runReject(0), runAsync(1), runAsync(2), runAsync(3)]) 14 | .then(res => console.log("result: ", res)) 15 | .catch(err => console.log(err)); 16 | 17 | // 0 18 | // Error: 0 19 | // 1 20 | // 2 21 | // 3 -------------------------------------------------------------------------------- /阶段三十二/code13.js: -------------------------------------------------------------------------------- 1 | async function async1() { 2 | console.log("async1 start"); 3 | await async2(); 4 | console.log("async1 end"); 5 | } 6 | async function async2() { 7 | console.log("async2"); 8 | } 9 | async1(); 10 | console.log('start') 11 | 12 | 13 | // async1 start 14 | // async2 15 | // start 16 | // async1 end -------------------------------------------------------------------------------- /阶段三十二/code14.js: -------------------------------------------------------------------------------- 1 | async function async1() { 2 | console.log("async1 start"); 3 | await async2(); 4 | console.log("async1 end"); 5 | setTimeout(() => { 6 | console.log('timer1') 7 | }, 0) 8 | } 9 | async function async2() { 10 | setTimeout(() => { 11 | console.log('timer2') 12 | }, 0) 13 | console.log("async2"); 14 | } 15 | async1(); 16 | setTimeout(() => { 17 | console.log('timer3') 18 | }, 0) 19 | console.log("start") 20 | 21 | // async1 start 22 | // async2 23 | // start 24 | // async1 end 25 | // timer2 26 | // timer3 27 | // timer1 -------------------------------------------------------------------------------- /阶段三十二/code15.js: -------------------------------------------------------------------------------- 1 | async function async1 () { 2 | console.log('async1 start'); 3 | await new Promise(resolve => { 4 | console.log('promise1') 5 | }) 6 | console.log('async1 success'); 7 | return 'async1 end' 8 | } 9 | console.log('srcipt start') 10 | async1().then(res => console.log(res)) 11 | console.log('srcipt end') 12 | 13 | 14 | // srcipt start 15 | // async1 start 16 | // promise1 17 | // srcipt end -------------------------------------------------------------------------------- /阶段三十二/code16.js: -------------------------------------------------------------------------------- 1 | async function async1 () { 2 | console.log('async1 start'); 3 | await new Promise(resolve => { 4 | console.log('promise1') 5 | resolve('promise1 resolve') 6 | }).then(res => console.log(res)) 7 | console.log('async1 success'); 8 | return 'async1 end' 9 | } 10 | console.log('srcipt start') 11 | async1().then(res => console.log(res)) 12 | console.log('srcipt end') 13 | 14 | 15 | // srcipt start 16 | // async1 start 17 | // promise1 18 | // srcipt end 19 | // promise1 resolve 20 | // async1 success 21 | // async1 end -------------------------------------------------------------------------------- /阶段三十二/code18.js: -------------------------------------------------------------------------------- 1 | async function async1 () { 2 | await async2(); 3 | console.log('async1'); 4 | return 'async1 success' 5 | } 6 | async function async2 () { 7 | return new Promise((resolve, reject) => { 8 | console.log('async2') 9 | reject('error') 10 | }) 11 | } 12 | async1().then(res => console.log(res)) 13 | 14 | // async2 15 | // (node:3572) UnhandledPromiseRejectionWarning: error -------------------------------------------------------------------------------- /阶段三十二/code19.js: -------------------------------------------------------------------------------- 1 | async function async1 () { 2 | await Promise.reject('error!!!').catch(e => console.log(e)) 3 | console.log('async1'); 4 | return Promise.resolve('async1 success') 5 | } 6 | async1().then(res => console.log(res)) 7 | console.log('script start') 8 | 9 | 10 | // script start 11 | // error!!! 12 | // async1 13 | // async1 success -------------------------------------------------------------------------------- /阶段三十二/code2.js: -------------------------------------------------------------------------------- 1 | Promise.resolve(1) 2 | .then(res => { 3 | console.log(res); 4 | return 2; 5 | }) 6 | .catch(err => { 7 | return 3; 8 | }) 9 | .then(res => { 10 | console.log(res); 11 | }); 12 | 13 | /** 14 | 1 15 | 2 16 | */ -------------------------------------------------------------------------------- /阶段三十二/code20.js: -------------------------------------------------------------------------------- 1 | const first = () => (new Promise((resolve, reject) => { 2 | console.log(3); 3 | let p = new Promise((resolve, reject) => { 4 | console.log(7); 5 | setTimeout(() => { 6 | console.log(5); 7 | resolve(6); 8 | console.log(p) 9 | }, 0) 10 | resolve(1); 11 | }); 12 | resolve(2); 13 | p.then((arg) => { 14 | console.log(arg); 15 | }); 16 | })); 17 | first().then((arg) => { 18 | console.log(arg); 19 | }); 20 | console.log(4); 21 | 22 | 23 | // 3 24 | // 7 25 | // 4 26 | // 1 27 | // 2 28 | // 5 29 | // Promise { 1 } -------------------------------------------------------------------------------- /阶段三十二/code3.js: -------------------------------------------------------------------------------- 1 | Promise.resolve().then(() => { 2 | return new Error('error!!!') 3 | }).then(res => { 4 | console.log("then: ", res) 5 | }).catch(err => { 6 | console.log("catch: ", err) 7 | }) 8 | 9 | // "then: " "Error: error!!!" 10 | -------------------------------------------------------------------------------- /阶段三十二/code4.js: -------------------------------------------------------------------------------- 1 | Promise.resolve(1) 2 | .then(2) 3 | .then(Promise.resolve(3)) 4 | .then(console.log) 5 | 6 | 7 | // 1 -------------------------------------------------------------------------------- /阶段三十二/code5.js: -------------------------------------------------------------------------------- 1 | Promise.reject('err!!!') 2 | .then((res) => { 3 | console.log('success', res) 4 | }, (err) => { 5 | console.log('error', err) 6 | }).catch(err => { 7 | console.log('catch', err) 8 | }) 9 | 10 | // error err!!! 11 | -------------------------------------------------------------------------------- /阶段三十二/code6.js: -------------------------------------------------------------------------------- 1 | Promise.resolve() 2 | .then(function success (res) { 3 | throw new Error('error!!!') 4 | }, function fail1 (err) { 5 | console.log('fail1', err) 6 | }).catch(function fail2 (err) { 7 | console.log('fail2', err) 8 | }) 9 | // fail2 Error: error!!! -------------------------------------------------------------------------------- /阶段三十二/code7.js: -------------------------------------------------------------------------------- 1 | Promise.resolve('1') 2 | .then(res => { 3 | console.log(res) 4 | }) 5 | .finally(() => { 6 | console.log('finally') 7 | }) 8 | Promise.resolve('2') 9 | .finally(() => { 10 | console.log('finally2') 11 | return '我是finally2返回的值' 12 | }) 13 | .then(res => { 14 | console.log('finally2后面的then函数', res) 15 | }) 16 | 17 | // 1 18 | // finally2 19 | // finally 20 | // finally2后面的then函数 2 -------------------------------------------------------------------------------- /阶段三十二/code8.js: -------------------------------------------------------------------------------- 1 | Promise.resolve('1') 2 | .finally(() => { 3 | console.log('finally1') 4 | throw new Error('我是finally中抛出的异常') 5 | }) 6 | .then(res => { 7 | console.log('finally后面的then函数', res) 8 | }) 9 | .catch(err => { 10 | console.log('捕获错误', err) 11 | }) 12 | 13 | 14 | // 'finally1' 15 | // '捕获错误' Error: 我是finally中抛出的异常 16 | -------------------------------------------------------------------------------- /阶段三十二/code9.js: -------------------------------------------------------------------------------- 1 | function runAsync (x) { 2 | const p = new Promise(r => 3 | setTimeout(() => r(x, console.log(x)), 1000) 4 | ) 5 | return p 6 | } 7 | 8 | Promise.all([runAsync(1), runAsync(2), runAsync(3)]) 9 | .then(res => console.log(res)) 10 | 11 | 12 | // 1 13 | // 2 14 | // 3 15 | // [ 1, 2, 3 ] -------------------------------------------------------------------------------- /阶段三十四/code1.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var x = y = 1; 3 | })(); 4 | var z; 5 | 6 | console.log(y); // 1 7 | console.log(z); // undefined 8 | console.log(x); // Uncaught ReferenceError: x is not defined 9 | // x是一个局部变量，y是一个全局变量，所以打印x是报错。 -------------------------------------------------------------------------------- /阶段三十四/code2.js: -------------------------------------------------------------------------------- 1 | var a, b 2 | (function () { 3 | console.log(a); 4 | console.log(b); 5 | var a = (b = 3); 6 | console.log(a); 7 | console.log(b); 8 | })() 9 | console.log(a); 10 | console.log(b); 11 | 12 | 13 | // undefined 14 | // undefined 15 | // 3 16 | // 3 17 | // undefined 18 | // 3 19 | -------------------------------------------------------------------------------- /阶段三十四/code3.js: -------------------------------------------------------------------------------- 1 | var friendName = 'World'; 2 | (function() { 3 | if (typeof friendName === 'undefined') { 4 | var friendName = 'Jack'; 5 | console.log('Goodbye ' + friendName); 6 | } else { 7 | console.log('Hello ' + friendName); 8 | } 9 | })(); 10 | 11 | // Goodbye Jack 12 | 13 | 14 | // var name = 'World!'; 15 | // (function () { 16 | // var name; 17 | // if (typeof name === 'undefined') { 18 | // name = 'Jack'; 19 | // console.log('Goodbye ' + name); 20 | // } else { 21 | // console.log('Hello ' + name); 22 | // } 23 | // })(); 24 | -------------------------------------------------------------------------------- /阶段三十四/code4.js: -------------------------------------------------------------------------------- 1 | function fn1(){ 2 |   console.log('fn1') 3 | } 4 | var fn2 5 | 6 | fn1() 7 | fn2() 8 | 9 | fn2 = function() { 10 |   console.log('fn2') 11 | } 12 | 13 | fn2() 14 | 15 | 16 | // fn1 17 | // Uncaught TypeError: fn2 is not a function 18 | // fn2 19 | -------------------------------------------------------------------------------- /阶段三十四/code5.js: -------------------------------------------------------------------------------- 1 | function a() { 2 | var temp = 10; 3 | function b() { 4 | console.log(temp); // 10 5 | } 6 | b(); 7 | } 8 | 9 | a(); 10 | 11 | 12 | 13 | 14 | 15 | function a() { 16 | var temp = 10; 17 | b(); 18 | } 19 | function b() { 20 | console.log(temp); // 报错 Uncaught ReferenceError: temp is not defined 21 | } 22 | a(); 23 | -------------------------------------------------------------------------------- /阶段三十四/code6.js: -------------------------------------------------------------------------------- 1 | var a=3; 2 | function c(){ 3 | console.log(a); 4 | } 5 | 6 | (function(){ 7 | var a=4; 8 | c(); 9 | })(); 10 | 11 | // js中变量的作用域链与定义时的环境有关，与执行时无关。执行环境只会改变this、传递的参数、全局变量等 -------------------------------------------------------------------------------- /阶段三十四/code8.js: -------------------------------------------------------------------------------- 1 | f = function() {return true;}; 2 | g = function() {return false;}; 3 | (function() { 4 | if (g() && [] == ![]) { 5 | f = function f() {return false;}; 6 | function g() {return true;} 7 | } 8 | })(); 9 | console.log(f()); 10 | // false -------------------------------------------------------------------------------- /阶段三十四/react_BrowserRouter_HashRouter.md: -------------------------------------------------------------------------------- 1 | react_BrowserRouter_HashRouter 2 | 3 | BrowserRouter 和 HashRouter 的区别 4 | 5 | 1. 底层原理不一样 6 | 7 | BrowserRouter使用的是H5的history API，不兼容IE9以及以下版本。 8 | 9 | HashRouter使用的是URL的哈希值。 10 | 11 | 2. path表现形式不一样 12 | 13 | BrowserRouter的路径中没有 `#`，例如 `localhost:3000/demo/test` 14 | 15 | HashRouter的路径包含`#`,例如： `localhost:3000/#/demo/test` 16 | 17 | 3. 刷新后对路由state参数的影响 18 | 19 | `.BrowserRouter` 没有任何影响，因为state保存在history对象中。 20 | 21 | `.HashRouter`刷新后会导致路由state参数的丢失！！！ 22 | 23 | 4. HashRouter可以用于解决一些路径错误相关的问题 -------------------------------------------------------------------------------- /阶段三十四/react_Switch.md: -------------------------------------------------------------------------------- 1 | 2 | NavLink和封装NavLink 3 | 4 | 1. NavLink可以实现路由链接的高亮，通过activeClassName指定样式名 5 | 2. 标签体内容是一个特殊的标签属性 6 | 3. 通过this.props.children可以获取标签体内容 7 | 8 | ```js 9 | 10 | 11 | 12 | ``` 13 | 14 | 1. 通常情况下，path和component是一一对应的关系。 15 | 2. Switch可以提高路由匹配效率 16 | 17 | ```js 18 | 使用hash 19 | 20 | 解决样式丢失 21 | ``` 22 | 23 | 解决多级路径刷新页面样式丢失的问题 24 | 25 | 1. public/index.html 中 引入样式时不写 `./` 写 `/` 26 | 2. public/index.html 中 引入样式时不写 `./` 写 `%PUBLIC_URL%` 27 | 3. 使用HashRouter -------------------------------------------------------------------------------- /阶段三十四/react_redirect.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | Redirect的使用 7 | 8 | 1. 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由 9 | 2. 具体编码 10 | 11 | ```js 12 | 13 | 14 | 15 | 16 | 17 | ``` -------------------------------------------------------------------------------- /阶段三十四/react_redux.md: -------------------------------------------------------------------------------- 1 | 2 | redux是什么？ 3 | 4 | 1. redux是一个专门用于做状态管理的JS库 5 | 2. 它可以用在 react，angular, vue等项目中，但基本与react配合使用 6 | 3. 作用：集中式管理react应用中多个组件共享的状态 7 | 8 | 什么情况下需要使用redux? 9 | 10 | 1. 某个组件的状态，需要让其他组件可以随时拿到（共享） 11 | 2. 一个组件需要改变另一个组件的状态（通信） 12 | 3. 总体原则：能不用就不用，如果不用比较吃力才考虑使用 13 | -------------------------------------------------------------------------------- /阶段三十四/react_工作流程.md: -------------------------------------------------------------------------------- 1 | ## react_工作流程 2 | 3 | action creators -> react components -> store 4 | 5 | action： 6 | 7 | 1. 动作的对象 8 | 2. 包含2个属性 9 | 10 | type:标识属性，值为字符串，唯一，必要属性 11 | 12 | data:数据属性，值类型任意，可选属性 13 | 14 | `{type:'ADD_STUDENT', data:{name:'d',age:18}}` 15 | 16 | reducer: 17 | 18 | 用于初始化状态，加工状态。 19 | 20 | 加工时，根据旧的state和action，产生新的state的纯函数 21 | 22 | store： 23 | 24 | 1. 将state，action，reducer联系在一起的对象 25 | 2. 如何得到此对象? 26 | 27 | -------------------------------------------------------------------------------- /阶段三十四/react_路由匹配.md: -------------------------------------------------------------------------------- 1 | 路由的严格匹配 与 模糊匹配 2 | 3 | 1. 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致） 4 | 2. 开启严格匹配：`` 5 | 3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由 -------------------------------------------------------------------------------- /阶段三十四/react_路由组件与一般组件.md: -------------------------------------------------------------------------------- 1 | 2 | hash `#` 后面的是前端的，不会带给服务器 3 | 4 | 区别： 5 | 6 | ```js 7 | 写法不同： 8 | 9 | 一般组件： 10 | 路由组件： 11 | 12 | 存放位置不同： 13 | 14 | 一般组件：components 15 | 16 | 路由组件：pages 17 | 18 | 接收到的props不同： 19 | 20 | 一般组件：写组件标签时传递了什么，就能收到什么 21 | 路由组件：接收到三个固定的属性 22 | 23 | history: 24 | go 25 | goBack 26 | goForward 27 | push 28 | replace 29 | 30 | location: 31 | pathname 32 | search 33 | state 34 | 35 | match: 36 | params 37 | path 38 | url 39 | 40 | ``` -------------------------------------------------------------------------------- /阶段九/call.js: -------------------------------------------------------------------------------- 1 | let obj = { 2 | name: 'da', 3 | }; 4 | 5 | function showName(age) { 6 | console.log(this.name); 7 | console.log(age); 8 | } 9 | 10 | Function.prototype.CallDemo = function(obj, ...arg) { 11 | if (typeof this !== 'function') { 12 | throw error; 13 | } 14 | obj.fn = this; 15 | const result = obj.fn(...arg); 16 | delete obj.fn; 17 | return result;; 18 | } 19 | showName.CallDemo(obj, 10); -------------------------------------------------------------------------------- /阶段九/class和await的结合.js: -------------------------------------------------------------------------------- 1 | //如果一个类中包含then方法 2 | //他会被包装成一个promise 3 | class User { 4 | constructor(name) { 5 | this.name = name; 6 | } 7 | then(resolve, reject) { 8 | setTimeout(() => { 9 | console.log(124); 10 | resolve(); 11 | }, 1000); 12 | } 13 | } 14 | async function get() { 15 | await new User(); 16 | console.log('dada'); 17 | } 18 | get(); -------------------------------------------------------------------------------- /阶段九/cookie和token.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 两者的共同点就是判断客户是否登录 3 | * 4 | * 1.cookie验证是服务器在登录时生成，是用户的唯一标识，即sessionId并保存到服务器上 一般以映射表的方式。 5 | * 接着该sessionId通过set-cookie头部传给客户端浏览器保存到cookie。下次同源请求浏览器会自动带上sessionId给服务器，服务器再去查对应id 6 | * 7 | * 2.Token验证是服务器在登录时使用密钥，对用户信息进行签名并将用户信息和签名组合。 8 | * 9 | * token和cookie区别： 10 | * 1.token能防止csrf攻击 11 | * 2.token可以多端进行验证 12 | * 3.跨域资源共享，只有约定好签名规则 13 | * 4.携带丰富的用户信息 14 | */ -------------------------------------------------------------------------------- /阶段九/cookie是如何工作的.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 当浏览器发送一个请求的时候，浏览器会检查是否有相应的cookie，如果有就直接添加到Request Headers的cookie字段中 3 | * 当服务器需要cookie时，在http响应头添加set-cookie，浏览器接收到会自动识别 4 | */ -------------------------------------------------------------------------------- /阶段九/inline-block.js: -------------------------------------------------------------------------------- 1 | //相邻的两个inline-block节点为什么会出现间隔，该如何解决 2 | 3 | /**是换行符引起的间隔问题，间隙为 4px。 4 | * 消除间隙的方法： 5 | * 1）去掉换行符； 6 | * 2）对父元素添加 font-size:0，将字体大小设置为 0，换行符也会为 0px，从而消除间隙，再为 inline-block 元素设置我们需要的字体大小； 7 | * 3）将 inline-block 的 margin-right/left 设置为 -4px； 8 | * 4）将父元素的 letter-spacing 或 word-spacing 设置为 -4px，这两个属性会增加或减少字符间隔。word-spacing 对中文无效 9 | * inline-block 还有两个问题：即不同高度的两个 inline-block 顶部不对齐，以及 inline-block 底部多出几像素（多出空白）。 10 | * 解决方法是为 inline-block 元素设置 vertical-align:top。设置元素的垂直对齐方式 */ -------------------------------------------------------------------------------- /阶段九/new.js: -------------------------------------------------------------------------------- 1 | function Da(name, age) { 2 | this.name = name; 3 | this.age = age; 4 | return null; 5 | } 6 | 7 | Da.prototype.strange = 20; 8 | Da.prototype.show = function() { 9 | console.log(this.name); 10 | } 11 | 12 | function NewDemo() { 13 | let obj = {}; 14 | let constructor = [].shift.call(arguments); 15 | obj.__proto__ = constructor.prototype; 16 | // 改变构造函数指向 obj可以访问到构造函数中的属性 17 | const result = constructor.apply(obj, arguments); 18 | return typeof result === 'object' ? result || obj : obj; 19 | } 20 | 21 | let newChild = NewDemo(Da, 'da', 11); -------------------------------------------------------------------------------- /阶段九/position.js: -------------------------------------------------------------------------------- 1 | /** 2 | * static:无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 3 | * relative:对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。 而其层叠通过z-index属性定义。 4 | * absolute:对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 5 | * fixed:对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现 滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 6 | * sticky:具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后 应用 fixed 布局，由 top 决定。 */ -------------------------------------------------------------------------------- /阶段九/promise封装ajax.js: -------------------------------------------------------------------------------- 1 | function ajax(url) { 2 | return new Promise((resolve, reject) => { 3 | let xhr = new XMLHttpRequest(); 4 | xhr.open('GET', url); 5 | xhr.send(); 6 | xhr.onload = function() { 7 | if ((this.status = 200)) { 8 | callback(JSON.parse(this.response)); 9 | } else { 10 | throw new error('失败'); 11 | } 12 | }; 13 | xhr.onload = function() { 14 | reject(); 15 | }; 16 | }); 17 | } -------------------------------------------------------------------------------- /阶段九/promise队列原理.js: -------------------------------------------------------------------------------- 1 | //下个promise得等上一个promise完成再走 按顺序执行promise任务 2 | let promise = Promise.resolve('dada'); 3 | promise 4 | .then((v) => { 5 | console.log(v); 6 | return { 7 | then(resolve, reject) { 8 | setTimeout(() => { 9 | resolve('我也返回一个成功的状态'); 10 | }, 2000); 11 | }, 12 | }; 13 | }) 14 | .then((v) => { 15 | console.log(v); 16 | }); -------------------------------------------------------------------------------- /阶段九/visibility.js: -------------------------------------------------------------------------------- 1 | /** 2 | visibility:设置 hidden 会隐藏元素，但是其位置还存在与页面文档流中，不会被删除，所以会触发 浏览器渲染引擎 的 重绘 3 | display:设置了 none 属性会隐藏元素，且其位置也不会被保留下来，所以会触发 浏览器渲染引擎的回流 和 重绘。 4 | opacity:会将元素设置为透明，但是其位置也在页面文档流中，不会被删除，所以会触发 浏览器渲染引擎 的 重绘 */ -------------------------------------------------------------------------------- /阶段九/三角形.js: -------------------------------------------------------------------------------- 1 | /**三角形实现原理：宽度width为0；height为0； 2 | * （1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。 3 | * （2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。 4 | * 5 | * #triangle-up { 6 | width: 0; 7 | height: 0; 8 | border-left: 50px solid transparent; 9 | border-right: 50px solid transparent; 10 | border-bottom: 100px solid red; 11 | } 12 | */ -------------------------------------------------------------------------------- /阶段九/什么是语义化与新特性.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 1.用正确的标签做正确的事情 3 | * 2.HTML语义化让页面的内容结构化，结构更加清晰 4 | * 3.容易阅读，在没有css样式的情况下，也以一种文档的格式显示 5 | * 4.可以用HTML标记上下文和各个关键字的权重，利于SEO 6 | * 5.更容易将网页分块，便于维护和理解 */ 7 | 8 | /** HTML5新特性以及语义化标签 9 | * 1.
头