Leslie Waong

浅拷贝和深拷贝？重要: 什么是拷贝？首先来直观的感受一下什么是拷贝。 12345let arr = [1, 2, 3];let newArr = arr;newArr[0] = 100;console.log(arr);//[100, 2, 3] 这是直接赋值的情况，不涉及任何拷贝。当改变newArr的时候，由于是同一个引用，arr指向的值也跟着改变。 现在进行浅拷贝: 12345let arr = [1, 2, 3];let newArr = arr.slice();newArr[0] = 100;console.log(arr);//[1, 2, 3] 当修改newArr的时候，arr的值并不改变。什么原因?因为这里newArr是arr浅拷贝后的结果，newArr和arr现在引用的已经不是同一块空间啦！ 这就是浅拷贝！ 但是这又会带来一个潜在的问题: 12345let arr = [1, 2, {val: 4}];let newArr = arr.slice();newArr[2].val = 1000;console.log(arr);//[ 1, 2, ...

数据类型JavaScript 是一种弱类型或者说动态语言。 这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。 这也意味着你可以使用同一个变量保存不同类型的数据。 最新的 ECMAScript 标准定义了 8 种数据类型: 7+1 7 种原始类型，Undefined、Boolean、Number、String、BigInt、Symbol、Null Object： 任何 constructed 对象实例的特殊非数据结构类型； 也用做数据结构：new Object，new Array，new Map，new Set，new WeakMap，new WeakSet，new Date，和几乎所有通过 new 创建的东西。 除对象外的所有类型都定义了**不可变的值(即不能更改的值)**。例如字符串也是不可变的。我们将这些类型的值称为“原始类型”。 基本/原始类型，保存到了栈上。 Object/引用类型，会被分配到了另一块区域，我们称之为堆（heap），其地址存到栈上。 其实类型指的是值的类型，不是变量的类型，这是动态语言和静态语言的差异。 对于静态语言来说，我们可以 ...

基于Android的电子词典设计单词数据的爬取 借助Python的Requests库和lxml库 RequestsRequests是一个功能强大、简单易用的HTTP请求库，主要用来发起请求和获取响应内容，对应的方法为get方法。 首先，使用HTTP库向词典网站发起请求，即发送一个Request，其中包含请求方式、请求URL、请求头和请求体，其中构建HTTP的请求头的目的在于伪装成浏览器与词典网站进行通信，如果服务器能正常响应，则会得到一个Response，包含响应状态、响应头和响应体，最后通过Text方法即可得到网页的源代码。 XPathXPath，全称 XML Path Language，即XML路径语言，它是一门在XML文档中查找信息的语言。 最初是用来搜寻XML文档的，但同样适用于HTML文档的搜索。 所以在做爬虫时完全可以使用XPath做相应的信息抽取。 Python为此提供了lxml第三方库。 XPath以XML树结构为基础，能够在数据的结构树中查找各类节点，比如属性节点、文本节点和元素节点等等。 在检查元素中右键即可复制它的XPath路径，分析规律并且结合XPath的表达 ...

Hook 一系列以 “use” 作为开头的方法，它们提供了让你可以完全避开 class式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。 好处: 跨组件复用: 其实render props / HOC 也是为了复用，相比于它们，Hooks 作为官方的底层 API，最为轻量，而且改造成本小，不会影响原来的组件层次结构和传说中的嵌套地狱； 相比而言，类组件的实现更为复杂 不同的生命周期会使逻辑变得分散且混乱，不易维护和管理； 时刻需要关注this的指向问题； 代码复用代价高，高阶组件的使用经常会使整个组件树变得臃肿； 状态与 UI 隔离: 正是由于 Hooks 的特性，状态逻辑会变成更小的粒度，并且极容易被抽象成一个自定义 Hooks，组件中的状态和 UI 变得更为清晰和隔离。 Hook 规则只在最顶层使用 Hook不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。 遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。 这让 React 能够在多次的 ...

单个组件的生命周期挂载当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentDidMount() 注意: 下述生命周期方法即将过时，在新代码中应该避免使用它们： UNSAFE_componentWillMount() 更新当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下： static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() 注意: 下述方法即将过时，在新代码中应该避免使用它们： UNSAFE_componentWillUpdate() UNSAFE_componentWillReceiveProps() 卸载当组件从 DOM 中移除时会调用如下方法： componentWillUnmount() 错误处理 ...

React实战全栈后台项目预览：http://lesliewaong.top/react-admin-client/ 准备项目描述 此项目为一个前后台分离的后台管理的 SPA（单页面应用）, 包括前端 PC 应用和后端应用 包括用户管理 / 商品分类管理 / 商品管理 / 权限管理等功能模块 前端: 使用 React 全家桶（函数式组件、react-router V6） + Antd（v4） + Axios + ES6 + Webpack 等技术 后端: 使用 Node + Express + Mongodb 等技术 采用模块化、组件化、工程化的模式开发 技术选型 项目结构12345678910111213141516171819public ---- 静态资源文件夹 css ------ 和风天气图标字体 favicon.icon ------ 网站页签图标 index.html -------- 主页面 logo192.png ------- logo图 logo512.png ------- logo图 manifest.json ----- 应用加壳的配置文件 robots. ...

框架好处 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。 天然分层: JQuery 时代的代码大部分情况下是面条代码,耦合严重,现代框架不管是 MVC、MVP还是MVVM 模式都能帮助我们进行分层，代码解耦更易于读写。 生态: 现在主流前端框架都自带生态,不管是数据流管理架构还是 UI 库都有成熟的解决方案。 开发效率: 现代前端框架都默认自动更新DOM,而非我们手动操作,解放了开发者的手动DOM成本,提高开发效率,从根本上解决了UI 与状态同步问题。 常见框架：Angular React Vue Svelte React vs VueReact 与 Vue 存在很多共同点，例如他们都是 JavaScript 的 UI 框架，专注于创造前端的富应用。 不同于早期的 JavaScript 框架“功能齐全”，Reat 与 Vue 只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。 React组件倾向于使用jsx语法，all in js，将html与css全都融入javaScript，jsx语 ...

React基础知识与概念React相对于vue来说学习成本更高，或者说需要的基础知识更多，需要有一些预备知识点支撑 webpack相关知识 axios相关知识 js基础与es6相关知识 React简介官网链接:中文官网 用于动态构建用户界面的JavaScript(只关注视图) 由Facebook开发，且开源 为什么学React 原生JS操作DOM繁琐，效率低 使用JS直接操作DOM,浏览器会进行大量的重绘重排 原生JS没有组件化编码方案，代码复用低 React的特点 声明式编程 组件化编程 React Native编写原生应用 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物 高效 (使用虚拟DOM+优秀的Diffing算法) React高效的原因 使用虚拟(virtual)DOM,不总是直接操作页面真实DON DOM Diffing算法,最小化页面重绘 注意：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效减 ...

前言什么是数据结构？数据结构的定义 官方定义 无 民间定义 “数据结构是数据对象，以及存在于该对象的实例和组成实例的数据元素之间的各种联系。这些联系可以通过定义相关的函数来给出。” — 《数据结构、算法与应用》 “数据结构是ADT（抽象数据类型 Abstract Data Type）的物理实现。” — 《数据结构与算法分析》 “数据结构（data structure）是计算机中存储、组织数据的方式。通常情况下，精心选择的数据结构可以带来最优效率的算法。” —中文维基百科 从自己角度认识 在计算机中，存储和组织数据的方式。 数据结构在生活中应用我们知道，计算机中数据量非常庞大，如何以高效的方式组织和存储呢? 例如：一个庞大的图书馆中存放了大量的书籍，我们不仅仅要把书放进入，还应该在合适的时候能够取出来。 图书摆放要使得两个相关操作方便实现： 操作 1：新书怎么插入？ 操作 2：怎么找到某本指定的书？ 图书各种摆放方式： 方法 1：随便放 操作 1：哪里有空位放哪里。 操作 2：找某本书，累死。 方法 2：按照书名的拼音字母顺序排放 操作 1：新进一本《阿 Q 正 ...

Vue基础简介 动态构建用户界面的渐进式JavaScript框架 作者: 尤雨溪 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ Vue的特点 采用组件化模式，提高代码复用率，且让代码更好维护 声明式编码，让编码人员无需直接操作DOM，提高开发效率 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点 搭建Vue开发环境直接用script引入 本地文件引入 1<script type="text/javascript" src="../js/vue.js"></script> CDN 1<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 安装Vue Devtools Chrome商店获取 初识Vue 概念 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； root容器里的 ...

Promise的理解与使用 概念 Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 通俗讲，Promise是一个许诺、承诺，是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。 Pending 正在做。。。 Resolved 完成这个承诺 Rejected 这个承诺没有完成，失败了 Promise 用来预定一个不一定能完成的任务，要么成功，要么失败 在具体的程序中具体的体现，通常用来封装一个异步任务，提供承诺结果 Promise 是异步编程的一种解决方案，主要用来解决回调地狱的问题，可以有效的减少回调嵌套。真正解决需要配合async/await 特点 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 ...

ES6 的环境配置前言ECMAScript 简介ES 的全称是 ECMAScript，它是由 ECMA 国际标准化组织 制定的一套脚本语言的标准化规范。 详细来说，ES 是由 ECMA 的第 39 号技术专家委员会（Technical Committee 39，简称 TC39）负责制订 ECMAScript 标准，成员包括 Microsoft、Mozilla、Google 等公司。 PS：简单来说，ECMAScript 是 JS 的语言标准。当然，ECMAScript 还包括其他脚本语言的语言标准。 ECMAScript 版本发布记录 1995 年：ECMAScript 诞生。 1997 年：ECMAScript 标准确立。ECMA 发布 ECMA-262 标准，推出浏览器标准语言 ECMAScript 1.0。 1999 年：发布 ES3；与此同时，IE5 风靡一时。 2009 年：发布 ECMAScript 5.0（简称 ES5）。例如 foreach、Object.keys、Object.create 和 json 标准。 2011 年：发布 ECMA ...