火星基地

在模块内部定义的变量，无法在其他模块中所读取。根据CommonJS模块化规范，一个单独的JS文件就是一个模块，每个模块是一个单独的。再次导入相同模块时，并不会再执行了，会直接从内存中取这个。实际上，在第一次导入中，会执行要导入的文件，并在内存中缓存一个对象，其中。，形成循环引用，是否会报错呢？若不报错，运行的结果是怎么样的？导入模块，实际上就是执行一遍要导入的模块，然后将其输出的。，说明若多次引用，实际上导入的模块是同一个对象。模块，并判断两个导入的变量是否为相等。属性，分别是文件中定义的常量。...

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

最近把之前写的 TodoList 小项目重构了一遍。比起之前的版本，重构后的项目改用 Hook，使用 Scss 作为 CSS 预处理器，react-router-dom升级到 V6 版本，同时使用了rem的移动端适配方案。本文就这次重构，总结这次的rem移动端适配实践。1. 几个概念1. 物理像素物理像素又叫设备像素，指的是屏幕上的显示单元，设备实际的像素点，由设备本身的屏幕决定。一个物理像素就是屏幕上一个最小的显示单元，每个显示单元都有自己的颜色和亮度。例如，某屏幕设备在宽度方向有 750 个像素点

JavaScript 中的基本数据类型包括：String、Number、Boolean、null、undefined、BigInt，其中null和undefined都表示“无”这层含义，一般情况下，两者几乎没有区别。1. 相似之处在全局定义两个变量，一个是null，另一个是undefined，最终他们都被挂载到全局对象上了，且值都为undefined：var a = null;var b = undefined;console.log(global.a, global.b); // undefi

1. 箭头函数的使用ES6 中新增了使用箭头=>来定义函数表达式的方法。很多情况下，箭头函数和函数表达式创建的函数并无区别，只有写法上的不同。本文第二块内容将介绍箭头函数和普通函数功能上的区别。1. 普通函数到箭头函数如下所示，定义一个函数，可以使用function关键字，函数接收两个参数a和b，返回a和b的和。function getSum(a, b) { return a + b;}若使用箭头函数来定义这个函数，可以写成如下形式，省略function关键字，用箭头=>

JavaScript 中的变量是松散类型的，可以保存任何类型数据，变量只不过是一个名称。JavaScript 中，可以声明变量的关键字有var、let和const。1. var使用var定义变量，可以保存任何类型的值。若不初始化变量，变量会保存undefined。1. 函数级作用域使用var定义的变量会成为包含它的函数的局部变量。function func() { var a = 'hi'; // 局部变量}func();console.log(a); // ReferenceErr

1. 功能Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。2. 语法Object.defineProperty(obj, prop, descriptor)1. 参数obj：要定义属性的对象。prop：要定义或修改的属性的名称或Symbol。descriptor：配置项，需传一个对象，该对象有如下属性：value：该属性对应的值，可以是任何有效值（数值，对象，函数等），默认是undefinedwritabl

1. 作用域作用域表示当前的执行上下文，值和表达式在其中可见或可被访问到的上下文。作用域决定了代码区块中变量和其他资源的可见性。在JavaScript中，作用域可分为全局作用域、局部作用域、块级作用域。1. 全局作用域在代码中任何地方都能访问到的对象，拥有全局作用域。JavaScript中，一般有三种情况拥有全局作用域：（1）window对象的属性、方法如图所示，所有window对象的属性都拥有全局作用域。之所以可以在JavaScript的任何地方使用alert函数，是因为它被定义在了win

以下为本人学习所记，若有不对，望指出。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.

以下为本人学习所记，若有不对，望指出。手写防抖函数（debounce）防抖函数功能：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。比如一个搜索框，应用防抖函数后，当用户不断输入内容时，不会发送请求。只有当用户一段时间T内不输入内容了，才会发送一次请求。如果小于这段时间T继续输入内容的话，就会重新计算时间T，也不会发送请求。这样降低了发送请求的次数，提高性能的同时也提升了用户体验。实现防抖函数：// func是用户传入需要防抖的函数// wait是等待时间，若不传参，.

在textarea标签的onkeydown事件中，阻止回车的默认行为即可。<textarea onkeydown="if (event.keyCode === 13) event.preventDefault();" />

默认情况下，设置父盒子有滚动条，若父盒子中的内容超出容器的高度时，滚动条默认在顶部，如图所示：想要出现滚动条时，滚动条默认在底部，显示最新的内容，效果如下：只需在按钮的单击事件里，添加一行代码即可：div.scrollTop = div.scrollHeight。完整代码：<div id="textBox"></div><button id="btn">插入文字</button><script> const btn = do

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

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

HTTP cookie通常也叫作cookie，最初用于在客户端存储会话信息。这个规范要求服务器在响应HTTP请求时，通过发送Set-Cookie HTTP头部包含会话信息。这些发送回服务器的额外信息可用于唯一标识发送请求的客户端。1. 限制cookie是与特定域绑定的。设置cookie后，它会与请求一起发送到创建它的域。这个限制能保证cookie中存储的信息只对被认可的接收者开放，不被其他域访问。因为cookie存储在客户端机器上，所以为保证它不会被恶意利用，浏览器会施加限制。同时，cookie也不

1. 原理其实很简单，利用给div加边框来实现。下面这个正常的盒子，以示区分，四条边框颜色不同，宽度加粗。减小div的宽度、高度，并增加边框的宽度：继续减小div的宽度、高度，并增加边框的宽度：当div的宽度、高度减小到 0 时，三角形的形状就出来啦！只显示一个三角形，将另外三条边框隐藏（颜色改为transparent即可）：这样，一个简单的三角形就画出来了！2. 总结上述最后一个三角形的代码：<div class="triangle"></div>.

1. Web Storage 简介Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。Web Storage 的第 2 版定义了两个对象：localStorage和sessionStorage。localStorage是永久存储机制，sessionStorage是跨会话的存储机制。这两者的主要区别是：sessionStorage对象只存储会话数据，这意味着数据只会存储到浏览器关闭。存储在sessionStorage中的数据不受页面刷新影响，可以在

1. 什么是绝对底部最近在做一个小项目时，对底部Footer组件有如下需求：当页面内容少于浏览器窗口时，Footer固定在浏览器窗口底部不动；随着页面内容增多，超出浏览器窗口时，Footer紧跟在内容的最下方。后来了解到，这是一种名叫Sticky Footer（绝对底部）的方法。内容在浏览器窗口之内，页脚固定在窗口底部：内容超出浏览器窗口，页脚紧跟在内容最下方：2. 实现绝对底部话不多说，先上代码：布局：<div class="main"> <div class=

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":

JavaScript中的this代表的是当前行为执行的主体，在JavaScript中主要研究的都是函数中的this，但并不是说只有在函数里才有this，this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。1. 函数调用函数执行时首先看函数名前面是否有.，若有，.前面是谁，this就是谁。没有的话this就是window。function fn() { console.log(this);}let obj = { fn: fn };fn(); // this

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. 将类数组或可遍历对象转换为真正

pop()方法将删除数组的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。例如，删除数组尾部的元素：push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。例如，数组尾部添加元素：unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。例如，数组头部添加元素：shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。例如，删除数组头部的元素：注意：以上方法都会修改原数组。const arr = [1, 2, 3..

ES6 语法中，可以对对象进行解构赋值。例如从对象obj上拿到c的值，一般地，我们习惯于这样写：const obj = { a: { b: { c: 1 } } };const { c } = obj.a.b;还可以这样写，连续解构：const obj = { a: { b: { c: 1 } } };const { a: { b: { c }, },} = obj;另外，如果想给解构出的c重命名，可以直接在后面写：const obj = { a: {

1. asyncasync属性一旦脚本可用，则会异步执行。async属性仅适用于外部脚本（只有在使用src属性时）。2. deferdefer属性规定当页面已完成加载后，才会执行脚本。defer属性仅适用于外部脚本（只有在使用src属性时）。3. 区别对于HTML标签<script src="script.js"></script>简单地说，如果：既没有defer也没有async属性，则浏览器遇到该script标签时，会立即加载并执行指定的脚本。执行完毕后，才继

在JavaScript中，如果判断0.1 + 0.2 === 0.3，结果是false，就像这样：console.log(0.1 + 0.2 === 0.3); // falseconsole.log(0.1 + 0.2); // 0.30000000000000004这是怎么回事呢？0.1 + 0.2竟然不等于0.3？是程序出问题了吗？原来JavaScript采用的是IEEE754的64位双精度版本，由三部分组成：1位数符：标记正负，0为正，1为负11位阶码：数字的整数部分52位尾数：数

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

当执行 JS 代码时，会生成执行环境。如果代码写在函数中，会产生函数执行环境，否则就是在全局执行环境中。只有这两种执行环境。看下面一段代码：b(); // call bconsole.log(a); // undefinedvar a = 'Hello world';function b() { console.log('call b');}这是因为函数和变量提升的原因，通常提升的解释是说将声明的代码移动到了顶部。但更准确的解释是，在生成执行环境时，会有两个阶段：第一个阶段

实现效果实现一个sleep()延迟函数，例如，sleep(2000)表示等待2000毫秒，再执行后面的操作。实现过程利用Promise：const sleep = (time) => { return new Promise(resolve => setTimeout(resolve, time));}验证console.log(1);sleep(2000).then(() => { console.log(2);});console.log(3)

实现效果// 4+2-1=5console.log((4).add(2).minus(1)); // 5实现过程使用Number对象的prototype属性，为对象添加方法即可。Number.prototype.add = function(n) { // this为 Number {4} 实例对象 // this.valueOf()为Number {4}的基本数字值4 return this.valueOf() + n;};Number.prototype.minu

实现效果：实现原生 JavaScript 中的Array.isArray()方法，使用如下：console.log(Array.isArray([])); // trueconsole.log(Array.isArray({})); // falseconsole.log(Array.isArray(123)); // falseconsole.log(Array.isArray('123')); // false实现过程：通过Object.prototype.toString.call()

实现效果：console.log(getType(123)); // numberconsole.log(getType('string')); // stringconsole.log(getType(true)); // booleanconsole.log(getType(undefined)); // undefinedconsole.log(getType(null)); // nullconsole.log(getType({})); // objectconsole.log(ge

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

思路：利用charAt()遍历这个字符串把每个字符都存储给对象，如果对象没有该属性，就先幅值为1，如果存在了就+1遍历对象，得到最大值和该字符在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象中，对应的属性值是该字符出现的次数代码实现：var str = 'abdgdbcaethbganmugthaesqszaphfdvwd';// 1.统计次数// 创建了一个空的对象，存储字符串中的每个字符。属性：每个字符，属性值：该字符出现的次数var obj = {};for (

原始数组：[1, 1, 1, 2, 2, 3, 3]去重后数组：[ 1, 2, 3 ]1. 双重for循环function distinct(arr) { for (let i = 0, len = arr.length; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1);

代码：const json = { a: { b: { c: 1 } }, d: { e: { f: { h: 2 }, g: { i: 3 } } }}// 遍历json对象的路径const path1 = ['a',

实现效果：[→点击此处预览效果←]点击Calculator按钮，打开计算器。打开计算器后，左边一栏是对于键盘操作的提示信息。按住计算器顶部并移动，可以实现拖拽计算器功能。实现了计算器的基本计算功能。计算器显示数字的区域，当数字过多时，自动缩小字体以显示全部的数字。点击计算器右上角的×，关闭计算器。存在的BUG：因本人水平、时间有限，计算器存在一些BUG显示0.1+0.2=0.30000000000000004，精度问题未解决。没有键盘按下的显示效果。键盘按下的显示效果应与鼠标

srcsrc是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源，下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。hrefhref是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。...

1. 常用的FormData对象方法获取表单对象中属性的值formData.get('key');设置表单对象中属性的值formData.set('key', 'value');删除表单对象中属性的值formData.delete('key');向表单对象中追加属性值formData.append('key', 'value');注意：set()方法与append()方法的区别是，在属性名已存在的情况下，set()会覆盖已有键名的值，append()会保留两个值。2. 其他Form

CSS选择器的优先级是：内联样式 > ID选择器 > 类选择器 > 标签选择器到具体的计算层⾯，优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：（有些并不是选择器，但为了更好地说明问题，暂且将其列入）选择器权重计算公式 {A,B,C,D}继承 或 *{}{0,0,0,0}每一个标签选择器 或 每一个伪元素选择器{0,0,0,1}每一个类选择器 或 每一个属性选择器 或 每一个伪类选择器{0,0,1,0}每一个ID选择器{0

实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box