99

如何合并两个对象

在JavaScript中，合并两个对象可以通过几种方法实现，下面是常用的几种方法：

1. 使用 Object.assign()

Object.assign() 方法可以将源对象的所有可枚举自有属性复制到目标对象，后面对象的属性会覆盖前面对象的同名属性。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = Object.assign({}, obj1, obj2);
// mergedObj 结果为: { a: 1, b: 3, c: 4 }

2. 使用展开运算符（Spread Operator）

ES6 引入的展开运算符（...）也可以用来合并对象，同样后面的属性会覆盖前面的同名属性。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };
// mergedObj 结果为: { a: 1, b: 3, c: 4 }

详细解释下前端低代码

前端低代码（Frontend Low-Code）是一种让前端开发更加高效、快速的开发模式，它通过可视化工具和预构建的组件，减少了编写传统代码的需求，使开发者能够以更少的编码工作量快速搭建和部署前端应用。以下是前端低代码的几个关键特点和优势：

1. 可视化开发界面

低代码平台通常提供一个图形用户界面(GUI)，在这个界面上，开发者可以通过拖拽组件（如按钮、输入框、表格等）来构建页面布局，而不是手动编写HTML、CSS和JavaScript代码。这样的界面让用户可以直观地看到应用的外观和交互效果，降低了设计和实现界面的难度。

2. 预构建组件和模板

低代码平台集成了大量预先构建的UI组件和功能模块，如导航栏、表单、图表、数据表格等，这些都是可以直接拖拽使用的，无需从零开始编写代码。这些组件往往设计良好、响应式且兼容多种设备，节省了前端开发中大量重复性工作。

3. 自动代码生成

当用户通过界面操作完成组件配置和布局后，低代码平台会在后台自动生成相应的前端代码（通常是HTML、CSS和JavaScript）。这意味着开发者无需关心底层实现细节，如事件绑定、数据绑定、样式调整等，这些都会由平台自动处理。

4. 数据绑定和逻辑处理

低代码平台还提供了简便的数据管理和逻辑处理工具，允许开发者通过配置而非编码来定义数据模型、设置数据源、设计业务逻辑和工作流。这包括与后端API的集成、数据验证规则的设定、条件判断和循环等逻辑处理。

5. 跨平台和响应式设计

前端低代码平台通常支持生成跨平台的应用，能够适应不同设备和屏幕尺寸，无需为每个平台单独开发。这得益于内置的响应式设计框架和自动适配机制。

6. 快速迭代和部署

由于减少了手动编码，低代码开发可以显著加快开发速度，使得应用的原型设计、测试和部署变得更为迅速，便于快速迭代和调整。

7. 降低技术门槛

前端低代码使得非专业开发者或业务人员也能参与到应用的开发过程中，通过简单的培训就能上手，促进了IT与业务部门的协作，降低了对外部开发资源的依赖。

总之，前端低代码的核心在于通过高度抽象的工具和界面，大幅度简化前端开发流程，提高开发效率，同时也降低了开发的复杂度，使得更多人能够参与到数字化建设中来。

---

---

详细解释下CSS预处理器（如Sass, LESS）

CSS预处理器是一种在编译时转换为标准CSS的层叠样式表语言。它们允许开发者使用编程特性，如变量、嵌套规则、运算符、函数、混入（Mixins）、继承等，这些特性在原生CSS中并不可用。预处理器增强了CSS的表达能力，使得管理大型项目中的样式更加容易。

• 减少重复代码：通过变量和混入，可以避免重复定义相同的值或规则，提高代码的重用性。

• 增强可维护性：嵌套、变量和函数等特性使得代码结构更加清晰，易于理解和维护。

• 提高开发效率：预处理器的高级功能减少了编写和修改样式所需的时间。

• 易于扩展：通过自定义函数和混入，可以轻松添加新的功能或处理复杂的样式逻辑。

• 兼容性处理：预处理器可以帮助开发者处理浏览器间的兼容性问题，比如自动添加前缀。

怎么展示一个渐变色的文字 基础线性渐变

要创建最基本的渐变类型，你只需指定两种颜色即可。这些被称为色标（color stop）。至少指定两个色标，也可以指定任意数量。

.simple-linear {
  background: 
    linear-gradient(blue, pink);
}

改变渐变方向

默认情况下，线性渐变的方向是从上到下，你可以指定一个值来改变渐变的方向。

从左到右

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

对角线渐变

你甚至可以设置渐变方向为从一个对角到另一个对角。

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

图片的object-fit属性 主要用于设置图片（、 或者 CSS 中作为背景图片的 background-image）在其容器内的填充方式。这个属性允许你控制图片内容如何适应其所在容器的尺寸，从而避免图片变形或意外裁剪。

object-fit 属性具有以下几种取值：

1. fill：

• • 默认值。图片将会拉伸填满整个容器，这可能导致图片宽高比改变，即图片可能会被挤压或拉伸以适应容器的尺寸。

2. contain：

• • 图片将会保持自身的宽高比，然后缩放到适合容器尺寸的最大程度，使图片的整个内容都在容器内，可能会在容器内留下空白。

3. cover：

• • 图片同样会保持自身的宽高比，但会缩放到足够大以便至少填满容器的一个维度（宽度或高度），因此图片的一部分可能会超出容器的边界而被裁剪。

4. none：

• • 图片保持其原始尺寸，不会进行任何形式的缩放，如果图片尺寸大于容器，则超出的部分将不会显示。

bigInt用自变量怎么写

// 给常量后面加一个n
const aa = 123n
log(typeof aa) // bigInt



// 将普通整数转换为BigInt，可以传递一个变量作为BigInt构造函数的参数
let bigIntValue = BigInt(1234567890123456789);

记住，BigInt必须通过显式构造函数创建，或者是通过带有后缀 n 的字面量来表示。

我想让一个函数不能直接执行，只能通过new来调用 new.target map创建多个键值对，会自动排序吗

Map对象本身并不会自动对键值对进行排序。Map的数据结构是基于哈希表实现的，这意味着它内部的键值对是无序的，插入顺序与迭代顺序无关。当你向Map中添加多个键值对时，它们在Map中的位置取决于内部哈希算法，而非插入顺序或其他排序规则。

在用户没登录的时候，我把他重定向到登录页面，用301还是302

在Web开发中，当用户未登录并且试图访问需要登录权限的页面时，应该使用HTTP响应码302（Found，临时重定向）将用户重定向到登录页面。

1. 302 Found（临时重定向） ：这个状态码表示资源暂时位于另一个URL，客户端应当继续使用原有URI请求新的URL。对于未登录用户重定向至登录页的场景来说，这是一个临时的状态，用户完成登录后仍然可以回到之前尝试访问的页面，所以302更适合这种情况。

background-clip

background-clip 是CSS中的一个属性，用于控制背景图像（或颜色）在元素边框区域内的填充范围。它可以有以下几种取值：

1. background-clip: border-box;（默认值）：背景延伸至边框边缘（包括内边距和边框）。
2. background-clip: padding-box;：背景只延伸至内边距边缘，不包括边框。
3. background-clip: content-box;：背景只限于内容区域，不包括内边距和边框。
4. background-clip: text;（CSS3新增）：背景仅限于文本内容区域，此属性适用于-webkit-text-fill-color 和 -webkit-background-clip 的组合应用，可以使文本的填充色透明，背景色透过文字轮廓显示。

比较 GET 与 POST

下面的表格比较了两种 HTTP 方法：GET 和 POST。

get请求用于查询数据，查询参数直接附加到URL后面，以?分隔实际路径和参数，多个参数之间用&连接，例如：example.com/api/data?ke… 的长度是受限制的（URL 的最大长度是 2048 个字符），导致查询参数的长度有限制。

而post请求主要用于提交数据并可能更改服务器状态。他的查询参数是放在请求体中，这样查询参数更加安全，同时没有长度的限制

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	- GET请求通常是可缓存的，浏览器会根据响应头中的Cache-Control等指示进行缓存。	- POST请求通常不可缓存，因为它可能涉及创建或更新服务器上的资源。
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded or multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
TCP数据包：	GET请求一般产生一个TCP数据包（当没有额外的HTTP头部时）	- - POST请求可能产生两个TCP数据包（先发送header再发送body），或者在某些情况下通过HTTP/2或HTTP/3协议优化合并为一个数据包。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

get无害

• 当用户点击后退按钮或刷新页面时，浏览器只是重新加载该URL对应的资源，并不会产生副作用（例如不会修改服务器上的数据）。
• 因为GET请求被认为是幂等（idempotent）的，即多次执行同样的请求应当具有相同的效果（除了可能消耗更多的服务器资源），所以浏览器默认这种操作是安全的，可以无害地重复执行。

post有害

• 如果用户在提交表单后立即按后退按钮或刷新页面，浏览器可能会提示用户是否重新提交数据，这是因为POST请求可能会改变服务器端的状态。
• 重新提交POST请求可能导致重复创建、更新数据，这可能不是用户期望的行为，甚至可能引发错误，如重复支付订单等。

tcp为什么是面向链接的

TCP（Transmission Control Protocol）是面向连接的传输层协议，原因在于其设计目标和机制保证了数据传输过程中的可靠性、有序性和流量控制。以下是TCP作为面向连接协议的主要特征：

可靠性

TCP 就是通过 ACK 来实现可靠的数据传输

发送方在发出请求之后会等待目标主机的响应，如果没有收到响应，发送方在经过一段时间后就会重传请求。所以，即使在发送过程中产生丢包，TCP 仍然能够通过重传来实现可靠性。

上面描述的情况属于发送方请求丢失，还有一种情况属于响应丢失，也就是说请求发送到目标主机后，目标主机会回发 ACK 给请求方，这个 ACK 也有可能丢失，如果 ACK 在链路中丢失，一段时间后请求方没有收到目标主机的 ACK ，仍然会选择重传未收到 ACK 的这个请求。

除了消息丢失之外，还存在一种延迟到达的现象，延迟到达指的是发送方发送一个报文段之后，这个报文也许是由于网络抖动或者网络拥堵导致一个报文段迟迟没有到达目标主机，或者目标主机的响应 ACK 迟迟没有到达发送方的现象。这个一段时间判断的标准就是重传时间，一旦过了重传时间发送方会重传报文段，很可能存在重传报文段到达之后，第一次发送的报文段才刚到的情况，这就存在一个问题：目标主机收到了两个相同的报文段。必须选择一个报文段进行丢弃，但是应该选择哪个报文段呢？通过序列号实现。

有序性

序列号（seq）来实现，序列号是按照顺序给发送数据的每一个字节都标上号码的编号。接收端通过查询 TCP 首部中的序列号和数据的长度，将自己下一步应该接收的序列号作为确认应答返送回去。通过序列号和确认应答号，TCP 能够识别是否已经接收数据，又能够判断是否需要接收，从而实现可靠传输。

流控与拥塞控制：

TCP通过滑动窗口机制进行流量控制，确保发送方不会过快地发送数据而超过接收方处理能力，同时它还包含拥塞控制算法，能够根据网络状况动态调整发送速率，防止过多的数据涌入网络导致拥塞。

参考：juejin.cn/post/727554…

为什么不期望在深拷贝过程中克隆函数

函数是引用类型：JavaScript中的函数是引用类型，这意味着当我们将一个函数赋值给另一个变量时，实际上是复制了该函数的引用，而非函数本身。因此，在深拷贝场景下，即使我们尝试对函数进行深度复制，最终得到的也是原始函数的一个新引用。

函数状态独立性：函数内部的状态（如闭包捕获的变量）通常与包含它的对象状态紧密关联。如果进行深拷贝，除非我们同时复制所有相关的闭包环境，否则新的函数实例将无法正确访问原函数所依赖的状态。

函数逻辑唯一性：大多数情况下，一个对象中定义的函数方法是为了实现特定的行为或逻辑，这种行为和逻辑通常是独一无二的，并且不需要在不同的对象实例间复制。

性能和资源消耗：深拷贝函数会增加不必要的内存消耗和计算开销，特别是当函数内含有复杂的闭包环境时，复制过程可能变得复杂且难以控制。

实际应用场景少：在实际开发中，很少有需求需要在一个新的对象实例中创建原有函数方法的全新副本，通常我们会希望多个对象共享同一套方法逻辑。

Array.from and {...obj}

const a = {
  0: 1,
  1: 2,
  length: 2
}

console.log(Array.from(a)); //  [1,2]
console.log({
  ...a
}); 
// {
//     0: 1,
//     1: 2,
//     length: 2
// }





const a = {
  b: 1,
  c: 2
}

console.log(Array.from(a)); // []
console.log({
  ...a
});  // {b: 1, c: 2}

Array.from() 是一个 JavaScript 方法，它用于创建一个由给定对象可迭代属性的值组成的新数组。这个方法非常有用，特别是当你需要将类数组对象（如 NodeList）或集合（如 Map 或 Set）转换成数组时。

从类数组对象创建数组：

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

let arr = Array.from(arrayLike);
console.log(arr); // ["a", "b", "c"]

从 NodeList 创建数组：

let divs = Array.from(document.querySelectorAll('div'));
console.log(divs); // 包含页面上所有 div 元素的数组

从 Map 创建数组：

复制
let map = new Map([['key1', 'value1'], ['key2', 'value2']]);
let arr = Array.from(map);
console.log(arr); // [["key1", "value1"], ["key2", "value2"]]

// 或者从 Map 的键或值创建数组
let keys = Array.from(map.keys());
console.log(keys); // ["key1", "key2"]

let values = Array.from(map.values());
console.log(values); // ["value1", "value2"]