火星基地

ProxyProxy 是什么通过调用new Proxy()，可以创建一个代理用来代替另一个对象，实现基本操作的拦截和自定义。这个代理与目标对象表面上可以被当作同一个对象来看待。关于Proxy有几个术语：traps：捕获器，提供访问属性的方法。handler：处理器，一个定义了一个或多个捕获器的对象。target：被Proxy代理虚拟化的对象。通过如下方式，即可创建一个Proxy：const p = new Proxy(target, handler);两个参数即对应上述的相应术语。

最近使用 React + Hook + TS 写了一个练手的demo，练习了 React + Hook 的 TypeScript 写法。本文主要记录自己在写demo过程中，遇到关于 TypeScript 写法上的坑。demo地址：「ts-todo」1. 创建 TS 项目使用create-react-app创建React项目，应该没有什么坑，记得在创建React项目的时候，添加typescript配置即可：npx create-react-app app-name --template typescr

1. 定义Promise对象用于表示一个异步操作的最终完成（或者失败）及其结果值，是异步变成的一种解决方案，比传统的解决方案（回调函数和事件）更合理、更强大。ES6 将其写进了语言标准，统一用法，提供了原生的Promise对象。一个Promise对象代表一个在这个Promise被创建出来时不一定已知的值，它可以把异步操作最终的成功返回值或失败原因和相应的处理程序关联起来。这样，异步方法并不会立即返回最终的值，而是会返回一个Promise。一个Promise必然处于以下几种状态之一：pending：

在 JavaScript 中，ES6 开始引入class的概念。实际上，JavaScript 中class的本质也是基于原型prototype的实现方式作了进一步的封装，其本质还是函数function。虽说如此，class和function还是有不同之处。1. 相同点：都可作为构造函数1. 函数作为构造函数class和function都可以作为构造函数，通过new操作符来实例化。如下代码，函数作为构造函数的写法。函数作为构造函数，通常首字母要大写。构造函数中的this指向构造函数创建出来的实例对象u

1. 创建在 JavaScript 中，可以通过两种方式创建一个正则表达式。（1）通过调用 RegExp 对象的构造函数创建const regexp = new RegExp(正则表达式, 标志);（2）利用字面量创建正则表达式const rg = /正则表达式/[可选的标志];2. 标志标志描述g全局搜索i不区分大小写搜索m多行搜索s允许 . 匹配换行符u使用unicode码的模式进行匹配y执行**粘性(sticky)**搜索

CookieSession存取值类型字符串大多数类型存取位置客户端服务端，sessionId非主动传参时，依赖Cookie存取方式文件文件、内存、关系或非关系型数据库等大小受客户端限制自行配置过期时间写入时设置。若不设置，随客户端关闭被清除自行配置，服务端自动清除过期Session兼容性需浏览器开启，用户同意不依赖Cookie时，通过Get或自定请求字段传入作用范围可设置跨子域，不可跨主域用户身份唯一标识符不变时，可跨域，...

1. 原型链继承// 定义父类function Parent() { this.name = 'Jack';}// 父类原型添加方法Parent.prototype.getName = function () { return this.name;};// 子类function Child() {}// 子类的原型设置为父类Parent的实例Child.prototype = new Parent();// 实例化子类const child = new Child

1. 什么是迭代循环是迭代机制的基础，因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的。迭代会在一个有序集合上进行。数组是 JavaScript 中有序集合的最典型例子。const arr = ['foo', 'bar', 'baz'];for (let i = 0; i < arr.length; i++) { console.log(arr[i]);}但由于如下原因，通过这种循环来执行例程并不理想：

for-infor...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。for (variable in object){ ...}variable：在每次迭代时，variable会被赋值为不同的key，即属性名。object：非Symbol类型的可枚举属性被迭代的对象。for ... in更适合遍历对象，不建议与数组一起使用，因为遍历顺序有可能不是按照实际数组的索引顺序。for ... in会遍历所有的可枚举属性，包括原型：const obj = { a: 1, b

1. 内置类型JavaScript中有7中内置类型，分为基本类型和引用类型。（1）基本类型nullundefinedbooleannumberstringsymbol其中NaN属于number，但是NaN !== NaN。基本类型的变量和值都保存在栈内存中。（2）引用类型object函数、对象、数组，都属于object。引用类型，变量保存在栈内存中，值保存在堆内存中，通过指针来指向堆内存中对应的值。2. 类型判断 typeof（1）基本类型除了null显示objec

以下为本人学习所记，若有不对，望指出。1. 变量的作用域根据作用域的不同，JavaScript 中的变量可分为两种：全局变量和局部变量。其中，函数内部可以直接读取全局变量：var a = 1;function fn1() { console.log(a);}fn1(); // 1但是，函数外部不能读取函数内的局部变量：function fn2() { var b = 2;}console.log(b); // ReferenceError: b is not de.

1. Hook 简介Hook 是 React 16.8.0 版本增加的新特性，可以在函数组件中使用 state 以及其他的 React 特性。✌️Hook 使用规则：Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。只能在 React 的函数组件中调用 Hook，不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 自定义 Hook）下面介绍几个常用的 Hook。

Flex是Flexible Box的缩写，表示弹性布局，用来为盒子模型提供最大的灵活性。任何一个容器都可以设定为flex布局：.box { display: flex;}设定为flex布局之后，子元素的float、clear和vertical-align属性将失效！采用flex布局的容器叫作flex容器，简称容器。容器里的所有子元素成为flex项目，简称项目。采用了flex布局以后，容器和项目分别有各自的属性。为了更好地理解采用了flex布局后，容器不同属性的作用，我写了一个实时演示

JavaScript 是使用垃圾回收的语言，也就是说执行环境负责在代码执行时管理内存。通过自动内存管理实现内存分配和闲置资源回收。基本思路很简单：确定哪个变量不会再使用，然后释放它占用的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间就会自动运行。垃圾回收程序必须跟踪记录哪个变量还会使用，以及哪个变量不会再使用，以便回收内存。如何标记未使用的变量也许有不同的实现方式。常见两种主要的标记策略：标记清理和引用计数。1. 标记清理JavaScript 最常用的垃圾回收策略是标记清理（mark-and-

1. JSON对象 → JSON字符串JSON.stringify()const obj = { id: '0', name: 'Jack', age: '18',};const str = JSON.stringify(obj);console.log(str); // {"id":"0","name":"Jack","age":"18"}2. JSON字符串 → JSON对象JSON.parse()const str = '{"id":"0","name":

1. 实现效果上面是Count组件，下面是Flag组件。Count组件中，点击点击+1按钮，数值加一，点击清零按钮，数值清零，同时数值传递给Flag组件同步显示。Flag组件中，点击login可以切换为true，点击logout切换为false，同时将状态传递给Count组件同步显示。2. 安装依赖包npm install react-redux redux redux-thunk redux-devtools-extension3. 文件结构使用了redux，需要在UI组件外套一层容器

1. 为何使用 react_router_config在 React 中使用路由，一般使用react-router-dom中的NavLink和Route，使用NavLink编写路由链接，使用Route注册路由：import { NavLink, Route } from 'react-router-dom';...{/* 路由链接 */}<NavLink to="/home">Home</NavLink><NavLink to="/about">About&

在JavaScript中操作数组，可以使用for、while循环，也可以使用数组数组迭代方法，更方便地完成。1. forEachforEach()方法没有返回值，运行时为每个数组元素调用一次回调函数。arr.forEach(callback, [thisArg]);该方法需要传入一个回调函数callback，函数参数：项目值`value项目索引index数组本身arraythisArg为可选参数，表示执行callback时的 this 的值。如果给forEach传递了第二个参数，回调函

文章目录1. `setState`1. 对象式2. 函数式2. 路由组件的`lazyLoad`3. `Hooks`1. State Hook2. Effect Hook3. Ref Hook4. `Fragment`5. `Context`1. setState使用setState更新状态有2种写法。对象式是函数式的简写方式（语法糖）。使用原则（非必须）：新状态不依赖于原状态 ===> 使用对象式新状态依赖于原状态 ===> 使用函数式如果需要在setState()执行后获取最新

1. params路由链接（携带参数）：<Link to="/demo/test/tom/18">详情</Link><Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>注册路由（声明接收）：<Route path="/demo/test/:name/:age" component={Test} /><Route

1. 合并数组let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];let arr3 = [...arr1, ...arr2];console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]2. 数组解构赋值let [arr1, ...arr2] = [1, 2, 3, 4, 5];console.log(arr1); // 1console.log(arr2); // [ 2, 3, 4, 5 ]3. 将类数组或可遍历对象转换为真正

实现效果方框中初始为白色输入框中输入颜色代码，点击查看颜色，在上方即可出现对应颜色点击复原，复原到初始的白色，同时清空输入框的内容实现代码<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>颜色查看器</title> <style>

与旧版生命周期相比，React生命周期即将废弃componentWillMount()、componentWillReceiveProps()、componentWillUpdate()三个钩子，现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。新版增加了两个钩子：getDerivedStateFromProps()和getSnapshotBeforeUpdate()。1. 初始化阶段由ReactDOM.render()触发—初次渲染const

1. 初始化阶段由ReactDOM.render()触发constructor()componentWillMount()组件即将挂载时、挂载之前触发render()componentDidMount()组件挂载后触发一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息2. 更新阶段由组件内部this.setSate()或父组件render()触发componentWillReceiveProps()组件即将接收到参数时触发shou

1. 非受控组件class Login extends React.Component { handleSubmit = event => { event.preventDefault(); //阻止表单提交 const { username, password } = this; alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`); }; render() { return ( <form o

1. state<div id="test"></div><script type="text/babel"> //1.创建组件 class Weather extends React.Component { //构造器调用几次？ ———— 1次 constructor(props) { console.log('constructor'); super(props); //初始化状态 this.state = { isHot: f

1. 函数式组件<div id="test"></div><script type="text/babel"> //1.创建函数式组件 function MyComponent() { console.log(this); // 此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件</h2>; } //2.渲染组件到页面 ReactDOM.render(<My

1. 使用js创建虚拟DOM<div id="test"></div><script type="text/javascript"> //1.创建虚拟DOM const VDOM = React.createElement( 'h1', { id: 'title' }, React.createElement('span', {}, 'Hello,React') ); //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM, do

<a></a>标签的target属性规定在何处打开链接文档，具体见下表：值作用_blank在新窗口中打开被链接文档_self默认，在相同的框架中打开被链接文档_parent在父框架集中打开被链接文档_top在整个窗口中打开被链接文档framename在指定的框架中打开被链接文档具体点击效果如下：_blank_self_parent_top...

文章目录1. `Vue`单文件组件的基本用法2. `webpack`中配置`vue`组件的加载器3. 在`webpack`项目中使用`vue`4. `webpack`打包发布1. Vue单文件组件的基本用法单文件组件的组成结构：template：组件的模板区域script：业务逻辑区域style：样式区域<template> <!-- 这里用于定义Vue组件的模板内容 --></template><script> // 这

1. webpack概述webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。2. webpack基本使用2.1 创建列表隔行变色案例新建项目空白目录，并运行npm init –y命令，初始化包管理配置文件package.json新建src源代码目录新建src -> inde

1. ES6模块化（大一统的模块化规范）在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：AMD和CMD适用于浏览器端的Javascript模块化CommonJS适用于服务器端的Javascript模块化因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。ES6模块化

文章目录1. 路由的基本概念与原理1.1 后端路由1.2 `SPA`（`Single Page Application`）1.3 前端路由1.4 `Vue Router`2. `vue-router`的基本使用2.1 基本使用步骤（1）引入相关的库文件（2）添加路由链接（3）添加路由填充位（4）定义路由组件（5）配置路由规则并创建路由实例（6）把路由挂载到`Vue`根实例中2.2 路由重定向3. `vue-router`嵌套路由3.1 嵌套路由功能3.2 具体实现4. `vue-router`动态路由匹

async作为一个关键字放到函数前面任何一个async函数都会隐式返回一个promiseawait关键字只能在使用async定义的函数中使用​await后面可以直接跟一个Promise实例对象​await函数不能单独使用async/await让异步代码看起来、表现起来更像同步代码// 1. async 基础用法// 1.1 async作为一个关键字放到函数前面async function queryData() { // 1.2 await关键字只能在使用async定义的函.

文章目录1. `axios`基本使用2. `axios`全局配置3. `axios`拦截器1. axios基本使用get和delete请求传递参数传统形式：url以?的形式传递参数restful形式：通过params形式传递参数post和put请求传递参数通过选项传递参数通过URLSearchParams传递参数 # 1. 发送get 请求 axios.get('http://localhost:3000/adata').then(function(ret){

文章目录1. `fetch`基本使用2. `fetch API`中的`HTTP`请求3. `fetchAPI`中响应格式1. fetch基本使用fetch API是新的ajax解决方案，Fetch会返回Promisefetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象fetch(url, options).then() <script type="text/javascript"> /* Fetch API 基本用法

1. Promise基本使用主要解决异步深层嵌套的问题 <script type="text/javascript"> /* 1. Promise基本使用 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 */ var p = new Promise(functio

1. 组件注册1.2 全局注册Vue.component('组件名称', { })全局组件注册后，任何vue实例都可以用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component></my-component></div><script> // 注册组件 // 1、 my-component 就是组件中自定义

1. 数组变异方法变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展push()往数组最后面添加一个元素，成功返回当前数组的长度pop()删除数组的最后一个元素，成功返回删除元素的值shift()删除数组的第一个元素，成功返回删除元素的值unshift()往数组最前面添加一个元素，成功返回当前数组的长度splice()有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值s

1. Vue基本使用1.1 Hello World基本步骤<body> <div id="app"> <div>{{msg}}</div> <div>{{1 + 2}}</div> <div>{{msg + '----' + 123}}</div> </div> <script type="text/javascript