一、js 去重
去重是指在数组或其他数据结构中，剔除重复的元素，只保留一个。以下是几种常见的JavaScript去重方法：
使用 Set 数据结构（ES6）：
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]
使用 indexOf：
function uniqueArray(array) {
const uniqueArr = [];
for (let i = 0; i < array.length; i++) {
if (uniqueArr.indexOf(array[i]) === -1) {
uniqueArr.push(array[i]);
}
}
return uniqueArr;
}
使用 includes：
function uniqueArray(array) {
const uniqueArr = [];
for (let i = 0; i < array.length; i++) {
if (!uniqueArr.includes(array[i])) {
uniqueArr.push(array[i]);
}
}
return uniqueArr;
}
使用 filter：
function uniqueArray(array) {
return array.filter((value, index, self) => {
return self.indexOf(value) === index;
});
}
使用 reduce：
function uniqueArray(array) {
return array.reduce((uniqueArr, current) => {
if (!uniqueArr.includes(current)) {
uniqueArr.push(current);
}
return uniqueArr;
}, []);
}
使用对象属性：
function uniqueArray(array) {
const obj = {};
return array.filter(item => {
if (!obj[item]) {
obj[item] = true;
return true;
}
return false;
});
}
- 这些方法中，使用 Set 数据结构是最简洁且性能最优的方式。其他方法虽然实现上稍微繁琐一些，但在某些情况下也是有效的去重方案。选择适合你情况的方法，根据实际需求来优化性能和代码可读性。
二、js 递归求 1-100 的和
使用递归来求解1到100的和，可以通过以下方式实现：
function sumFromOneToN(n) {
if (n === 1) {
return 1;
}
return n + sumFromOneToN(n - 1);
}
const result = sumFromOneToN(100);
console.log(result); // 输出5050
- 在这个递归函数中，每次递归调用都会将当前的数值 n 与小于 n 的数值的和相加，直到 n 递减到1为止。最终返回的结果就是1到100的和。这是一个典型的递归求和问题，但在实际中要注意递归深度的限制以及性能问题。
三、css 问题，有写三角形
通过 CSS 可以使用伪元素来创建简单的三角形，下面是一个示例：
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* 左边的边框，控制三角形的左侧 */
border-right: 50px solid transparent; /* 右边的边框，控制三角形的右侧 */
border-bottom: 100px solid red; /* 底边的边框，控制三角形的高度和颜色 */
}
- 在上面的例子中，我们使用 border 属性来绘制三角形的边界。通过设置 border-left 和 border-right 为透明，以及 border-bottom 来设置三角形的高度和颜色，从而创建一个红色的三角形。你可以根据需要调整宽度、高度和颜色来创建不同的效果。
如果需要创建其他方向的三角形，只需调整对应的 border 属性即可。
四、清除浮动及原因
清除浮动是一种解决在父元素内部，因为子元素浮动而导致父元素高度塌陷的问题。浮动元素会脱离正常的文档流，导致父元素无法正确计算其高度，从而影响布局。
以下是常见的清除浮动方法及其原因：
- 使用空元素清除浮动（Clearfix）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
这种方法通过在浮动元素的父元素末尾插入一个空的块级元素（伪元素 ::after），并设置其 clear 属性为 both，从而清除浮动。这样父元素会包裹住浮动的子元素，正常计算高度。
- 使用额外的块级元素清除浮动：
.clear {
clear: both;
}
这种方法是在浮动元素后面添加一个额外的空块级元素，并设置其 clear 属性来清除浮动。
- 使用 overflow 属性清除浮动：
.parent {
overflow: hidden;
}
通过设置父元素的 overflow 属性为 hidden，父元素会自动包裹浮动元素，从而解决高度塌陷问题。
- 使用 BFC（块级格式化上下文）：
.parent {
overflow: hidden;
display: inline-block; /* 触发 BFC */
}
通过将父元素设置为 display: inline-block;，会触发 BFC，从而自动包裹浮动元素。
使用 CSS Flexbox 或 Grid 布局：
使用 Flexbox 或 Grid 布局是一种现代的方法，它们可以自动处理浮动问题，不需要额外的清除浮动操作。
- 不同的清除浮动方法适用于不同的场景，你可以根据实际情况选择合适的方法来避免因浮动元素而导致的布局问题。
五、盒子居中
在前端开发中，将盒子（元素）居中是一个常见的布局需求。以下是几种常见的居中盒子的方法：
1. 水平居中：
使用 margin: auto;：适用于块级元素，设置左右 margin 为 auto 可以使元素水平居中。
.center-horizontal {
margin: 0 auto;
}
使用 flexbox：通过设置父容器的 display 为 flex，使用 justify-content 属性来实现水平居中。
.parent {
display: flex;
justify-content: center;
}
使用 text-align：适用于内联元素，将父元素的 text-align 设置为 center 可以使内联元素水平居中。
.parent {
text-align: center;
}
.child {
display: inline-block; /* 内联元素设置为块级元素 */
}
2. 垂直居中：
使用 line-height：适用于单行文本或行内元素，设置行高等于容器高度可以使元素垂直居中。
.center-vertical {
height: 100px; /* 设置容器高度 */
line-height: 100px; /* 设置行高等于容器高度 */
}
使用 flexbox：通过设置父容器的 display 为 flex，使用 align-items 属性来实现垂直居中。
.parent {
display: flex;
align-items: center;
}
使用绝对定位和 transform：将子元素设置为绝对定位，通过 transform 属性进行偏移，实现垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3. 水平垂直居中：
使用 flexbox：通过设置父容器的 display 为 flex，同时使用 justify-content 和 align-items 属性实现水平垂直居中。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
使用绝对定位和 transform：将子元素设置为绝对定位，通过 transform 属性进行偏移，实现水平垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 无论选择哪种居中方式，都需要根据具体的情况和布局要求来选取合适的方法。
六、媒体查询
媒体查询是一种在 CSS 中使用的技术，用于根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式。这可以用于响应式设计，使网页能够在不同的设备上以不同的布局和样式展现。
媒体查询的语法如下：
@media media_type and (media_feature) {
/* 在满足媒体查询条件时应用的样式 */
}
其中，media_type 表示媒体类型，例如 screen 表示屏幕，print 表示打印，all 表示所有媒体类型等。media_feature 表示媒体特性，例如 width 表示屏幕宽度，height 表示屏幕高度，orientation 表示屏幕方向等。
以下是一些常见的媒体查询示例：
根据屏幕宽度调整样式：
@media screen and (max-width: 768px) {
/* 在屏幕宽度小于等于768px时应用的样式 */
}
根据屏幕方向调整样式：
@media screen and (orientation: landscape) {
/* 在屏幕为横向方向时应用的样式 */
}
组合多个媒体特性：
@media screen and (max-width: 768px) and (orientation: portrait) {
/* 在屏幕宽度小于等于768px且为纵向方向时应用的样式 */
}
- 媒体查询可以帮助开发者根据设备的特性为不同的屏幕大小和设备类型提供最佳的用户体验。这对于移动优先的开发策略非常重要，因为它可以让网站在不同设备上呈现出适应性强的布局和样式。
七、px、rwm 、em、vh
在前端开发中，有多种用于指定长度、尺寸和位置的单位。以下是关于常见单位的解释：
px（像素）：
px 是最常见的长度单位，表示屏幕上的一个像素点。它是一个固定的单位，不会随着屏幕尺寸的变化而改变。
例如：width: 100px;rem（根元素字体大小单位）：
rem 是相对单位，它相对于根元素的字体大小。根元素通常指的是 <html> 元素。
例如，如果根元素的字体大小为16px，1rem 就等于16px。如果根元素的字体大小为20px，1rem 就等于20px。
适用于相对于整个页面的尺寸定义，具有可伸缩性。
例如：font-size: 1.5rem;em（相对于父元素字体大小单位）：
em 是相对单位，它相对于父元素的字体大小。如果当前元素的字体大小为16px，1em 就等于16px。如果父元素的字体大小为20px，子元素的 1em 就等于20px。
适用于相对于父元素的尺寸定义，但可能会受到多层级嵌套的影响。
例如：margin: 0.5em;vw（视窗宽度的百分比单位）：
vw 表示视窗宽度的百分比。1vw 等于视窗宽度的1%。
适用于创建响应式布局，可以根据屏幕宽度进行自适应调整。
例如：width: 50vw;
- 这些单位在前端开发中被广泛使用，每个单位都有其适用的场景和优势。选择合适的单位可以帮助实现灵活的布局和样式效果。
八、闭包
闭包是一种在编程中常见的概念，它涉及函数和其词法环境的关系。以下是有关闭包的解释：
闭包是指一个函数可以访问并操作其词法作用域之外的数据，即使在其父函数执行完毕之后仍然能够访问这些数据。这是因为在JavaScript中，函数在被定义的时候就创建了一个词法作用域，这个作用域会捕获函数内部的变量和参数。当函数内部有嵌套函数，并且内部函数引用了外部函数的变量时，就形成了闭包。
闭包的特点包括：
内部函数引用外部函数的变量：内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。
外部函数的词法作用域被保留：因为内部函数引用了外部函数的变量，外部函数的词法作用域会被保留在内存中，不会被回收。
闭包的应用场景：
封装数据：通过闭包可以创建私有变量，将一些数据封装在函数作用域内，只暴露必要的接口给外部。
实现模块化：闭包可以模拟模块化的行为，将功能划分为独立的模块。
解决异步问题：在异步操作中，闭包可以保留当前作用域的上下文，使回调函数能够访问正确的数据。
注意闭包可能导致内存泄漏问题，因为闭包会保留外部函数的作用域，如果不恰当地使用闭包，可能会导致一些不再需要的变量一直存在于内存中。
一个简单的闭包示例：
function outer() {
let outerVar = 'I am from outer';
function inner() {
console.log(outerVar); // 内部函数引用了外部函数的变量
}
return inner;
}
const innerFunc = outer(); // 这时 outer 函数已经执行完毕，但 outerVar 仍然被保留在内存中
innerFunc(); // 执行 inner 函数，输出 'I am from outer'
- 这个示例中，inner 函数形成了一个闭包，可以访问 outer 函数内部的 outerVar 变量，即使 outer 函数执行完毕。
九、常见状态码及含义
HTTP状态码是服务器向客户端返回的响应中的一部分，用于表示服务器对请求的处理结果。以下是常见的HTTP状态码及其含义：
1xx - Informational（信息性状态码）：
100 Continue：服务器已收到请求头，客户端可以发送请求体。
101 Switching Protocols：服务器要求切换协议，如升级到 WebSocket。2xx - Successful（成功状态码）：
200 OK：请求成功，返回请求的数据。
201 Created：请求已成功并在服务器上创建了新资源。
204 No Content：请求成功，但响应没有包含数据，通常用于更新操作。3xx - Redirection（重定向状态码）：
301 Moved Permanently：请求的资源已永久移动到新位置。
302 Found / 303 See Other：请求的资源临时移动到新位置。
304 Not Modified：客户端缓存的资源未过期，可以直接使用。4xx - Client Error（客户端错误状态码）：
400 Bad Request：请求格式错误，服务器无法理解。
401 Unauthorized：请求未经授权，需要提供认证信息。
403 Forbidden：服务器拒绝请求，权限不足。
404 Not Found：请求的资源不存在。5xx - Server Error（服务器错误状态码）：
500 Internal Server Error：服务器内部错误。
502 Bad Gateway：服务器作为网关或代理时，从上游服务器收到无效响应。
503 Service Unavailable：服务器暂时无法处理请求，通常是因为过载或维护。
- 这些状态码用于在HTTP通信过程中准确地表示请求和响应的状态。在开发中，了解这些状态码的含义能够帮助你更好地诊断和处理请求问题。
十、cookie会话
Cookie是一种在客户端（浏览器）存储数据的机制，常用于跟踪用户会话、存储用户偏好设置以及实现一些状态管理等。以下是关于Cookie会话的解释：
Cookie会话是指在用户访问网站时，服务器通过设置Cookie来跟踪用户的状态和信息。它通常用于维护用户在网站上的登录状态、购物车内容、个性化设置等。
基本概念和流程：
Cookie生成：服务器在响应中的HTTP头部设置一个名为"Set-Cookie"的字段，该字段包含一个键值对，如Set-Cookie: username=johndoe。浏览器会将这个Cookie存储在本地。
Cookie发送：当用户再次访问同一网站时，浏览器会在请求头中将存储的Cookie信息发送给服务器。
服务器处理：服务器接收到Cookie信息，可以根据其中的数据判断用户的状态，如用户是否已登录，是否有购物车内容等。
会话管理：通常，浏览器会话结束时，存储在Cookie中的数据会被删除，称为会话Cookie。但也可以通过设置Cookie的过期时间来实现长期存储，这种情况下被称为持久化Cookie。
会话Cookie：
会话Cookie存储在浏览器的内存中，不会在浏览器关闭后保留。
它们通常用于存储短期的用户信息，如会话标识、临时状态等。
持久化Cookie：
持久化Cookie设置了过期时间，在指定时间内会一直保留在浏览器中。
通常用于存储较长时间的用户信息，如登录状态、用户偏好设置等。
需要注意的是，由于Cookie存储在客户端，因此它们可以被用户随意删除或禁用。为了增加安全性，敏感信息（如密码等）应该避免直接存储在Cookie中，而是采用安全的方式进行存储和传输，如使用加密技术。在现代的Web开发中，也出现了替代方案，如使用Token或Session存储来管理用户会话。
