一顷链、js 去重
去重是指在數(shù)組或其他數(shù)據(jù)結(jié)構(gòu)中目代，剔除重復(fù)的元素，只保留一個(gè)。以下是幾種常見的JavaScript去重方法：
使用 Set 數(shù)據(jù)結(jié)構(gòu)（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;
}, []);
}
使用對(duì)象屬性：
function uniqueArray(array) {
const obj = {};
return array.filter(item => {
if (!obj[item]) {
obj[item] = true;
return true;
}
return false;
});
}
- 這些方法中像啼，使用 Set 數(shù)據(jù)結(jié)構(gòu)是最簡(jiǎn)潔且性能最優(yōu)的方式俘闯。其他方法雖然實(shí)現(xiàn)上稍微繁瑣一些，但在某些情況下也是有效的去重方案忽冻。選擇適合你情況的方法真朗，根據(jù)實(shí)際需求來優(yōu)化性能和代碼可讀性。
二僧诚、js 遞歸求 1-100 的和
使用遞歸來求解1到100的和遮婶，可以通過以下方式實(shí)現(xiàn)：
function sumFromOneToN(n) {
if (n === 1) {
return 1;
}
return n + sumFromOneToN(n - 1);
}
const result = sumFromOneToN(100);
console.log(result); // 輸出5050
- 在這個(gè)遞歸函數(shù)中，每次遞歸調(diào)用都會(huì)將當(dāng)前的數(shù)值 n 與小于 n 的數(shù)值的和相加湖笨，直到 n 遞減到1為止旗扑。最終返回的結(jié)果就是1到100的和。這是一個(gè)典型的遞歸求和問題慈省，但在實(shí)際中要注意遞歸深度的限制以及性能問題臀防。
三、css 問題边败，有寫三角形
通過 CSS 可以使用偽元素來創(chuàng)建簡(jiǎn)單的三角形袱衷，下面是一個(gè)示例：
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* 左邊的邊框，控制三角形的左側(cè) */
border-right: 50px solid transparent; /* 右邊的邊框笑窜，控制三角形的右側(cè) */
border-bottom: 100px solid red; /* 底邊的邊框致燥，控制三角形的高度和顏色 */
}
- 在上面的例子中，我們使用 border 屬性來繪制三角形的邊界排截。通過設(shè)置 border-left 和 border-right 為透明嫌蚤，以及 border-bottom 來設(shè)置三角形的高度和顏色，從而創(chuàng)建一個(gè)紅色的三角形断傲。你可以根據(jù)需要調(diào)整寬度脱吱、高度和顏色來創(chuàng)建不同的效果。
如果需要?jiǎng)?chuàng)建其他方向的三角形艳悔，只需調(diào)整對(duì)應(yīng)的 border 屬性即可急凰。
四、清除浮動(dòng)及原因
清除浮動(dòng)是一種解決在父元素內(nèi)部猜年，因?yàn)樽釉馗?dòng)而導(dǎo)致父元素高度塌陷的問題。浮動(dòng)元素會(huì)脫離正常的文檔流疾忍，導(dǎo)致父元素?zé)o法正確計(jì)算其高度乔外，從而影響布局。
以下是常見的清除浮動(dòng)方法及其原因：
- 使用空元素清除浮動(dòng)（Clearfix）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
這種方法通過在浮動(dòng)元素的父元素末尾插入一個(gè)空的塊級(jí)元素（偽元素 ::after）一罩，并設(shè)置其 clear 屬性為 both杨幼，從而清除浮動(dòng)。這樣父元素會(huì)包裹住浮動(dòng)的子元素，正常計(jì)算高度差购。
- 使用額外的塊級(jí)元素清除浮動(dòng)：
.clear {
clear: both;
}
這種方法是在浮動(dòng)元素后面添加一個(gè)額外的空塊級(jí)元素四瘫，并設(shè)置其 clear 屬性來清除浮動(dòng)。
- 使用 overflow 屬性清除浮動(dòng)：
.parent {
overflow: hidden;
}
通過設(shè)置父元素的 overflow 屬性為 hidden欲逃，父元素會(huì)自動(dòng)包裹浮動(dòng)元素找蜜，從而解決高度塌陷問題。
- 使用 BFC（塊級(jí)格式化上下文）：
.parent {
overflow: hidden;
display: inline-block; /* 觸發(fā) BFC */
}
通過將父元素設(shè)置為 display: inline-block;稳析，會(huì)觸發(fā) BFC洗做，從而自動(dòng)包裹浮動(dòng)元素。
使用 CSS Flexbox 或 Grid 布局：
使用 Flexbox 或 Grid 布局是一種現(xiàn)代的方法彰居，它們可以自動(dòng)處理浮動(dòng)問題诚纸，不需要額外的清除浮動(dòng)操作。
- 不同的清除浮動(dòng)方法適用于不同的場(chǎng)景陈惰，你可以根據(jù)實(shí)際情況選擇合適的方法來避免因浮動(dòng)元素而導(dǎo)致的布局問題畦徘。
五、盒子居中
在前端開發(fā)中抬闯，將盒子（元素）居中是一個(gè)常見的布局需求井辆。以下是幾種常見的居中盒子的方法：
1. 水平居中：
使用 margin: auto;：適用于塊級(jí)元素，設(shè)置左右 margin 為 auto 可以使元素水平居中画髓。
.center-horizontal {
margin: 0 auto;
}
使用 flexbox：通過設(shè)置父容器的 display 為 flex掘剪，使用 justify-content 屬性來實(shí)現(xiàn)水平居中。
.parent {
display: flex;
justify-content: center;
}
使用 text-align：適用于內(nèi)聯(lián)元素奈虾，將父元素的 text-align 設(shè)置為 center 可以使內(nèi)聯(lián)元素水平居中夺谁。
.parent {
text-align: center;
}
.child {
display: inline-block; /* 內(nèi)聯(lián)元素設(shè)置為塊級(jí)元素 */
}
2. 垂直居中：
使用 line-height：適用于單行文本或行內(nèi)元素，設(shè)置行高等于容器高度可以使元素垂直居中肉微。
.center-vertical {
height: 100px; /* 設(shè)置容器高度 */
line-height: 100px; /* 設(shè)置行高等于容器高度 */
}
使用 flexbox：通過設(shè)置父容器的 display 為 flex匾鸥，使用 align-items 屬性來實(shí)現(xiàn)垂直居中。
.parent {
display: flex;
align-items: center;
}
使用絕對(duì)定位和 transform：將子元素設(shè)置為絕對(duì)定位碉纳，通過 transform 屬性進(jìn)行偏移勿负，實(shí)現(xiàn)垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3. 水平垂直居中：
使用 flexbox：通過設(shè)置父容器的 display 為 flex劳曹，同時(shí)使用 justify-content 和 align-items 屬性實(shí)現(xiàn)水平垂直居中奴愉。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
使用絕對(duì)定位和 transform：將子元素設(shè)置為絕對(duì)定位，通過 transform 屬性進(jìn)行偏移铁孵，實(shí)現(xiàn)水平垂直居中锭硼。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 無論選擇哪種居中方式，都需要根據(jù)具體的情況和布局要求來選取合適的方法蜕劝。
六檀头、媒體查詢
媒體查詢是一種在 CSS 中使用的技術(shù)轰异，用于根據(jù)設(shè)備的特性（如屏幕寬度、高度暑始、方向等）來應(yīng)用不同的樣式搭独。這可以用于響應(yīng)式設(shè)計(jì)，使網(wǎng)頁(yè)能夠在不同的設(shè)備上以不同的布局和樣式展現(xiàn)廊镜。
媒體查詢的語法如下：
@media media_type and (media_feature) {
/* 在滿足媒體查詢條件時(shí)應(yīng)用的樣式 */
}
其中牙肝，media_type 表示媒體類型，例如 screen 表示屏幕期升，print 表示打印惊奇，all 表示所有媒體類型等。media_feature 表示媒體特性播赁，例如 width 表示屏幕寬度颂郎，height 表示屏幕高度，orientation 表示屏幕方向等容为。
以下是一些常見的媒體查詢示例：
根據(jù)屏幕寬度調(diào)整樣式：
@media screen and (max-width: 768px) {
/* 在屏幕寬度小于等于768px時(shí)應(yīng)用的樣式 */
}
根據(jù)屏幕方向調(diào)整樣式：
@media screen and (orientation: landscape) {
/* 在屏幕為橫向方向時(shí)應(yīng)用的樣式 */
}
組合多個(gè)媒體特性：
@media screen and (max-width: 768px) and (orientation: portrait) {
/* 在屏幕寬度小于等于768px且為縱向方向時(shí)應(yīng)用的樣式 */
}
- 媒體查詢可以幫助開發(fā)者根據(jù)設(shè)備的特性為不同的屏幕大小和設(shè)備類型提供最佳的用戶體驗(yàn)乓序。這對(duì)于移動(dòng)優(yōu)先的開發(fā)策略非常重要，因?yàn)樗梢宰尵W(wǎng)站在不同設(shè)備上呈現(xiàn)出適應(yīng)性強(qiáng)的布局和樣式坎背。
七替劈、px、rwm 得滤、em陨献、vh
在前端開發(fā)中，有多種用于指定長(zhǎng)度懂更、尺寸和位置的單位眨业。以下是關(guān)于常見單位的解釋：
px（像素）：
px 是最常見的長(zhǎng)度單位，表示屏幕上的一個(gè)像素點(diǎn)沮协。它是一個(gè)固定的單位龄捡，不會(huì)隨著屏幕尺寸的變化而改變。
例如：width: 100px;rem（根元素字體大小單位）：
rem 是相對(duì)單位慷暂，它相對(duì)于根元素的字體大小聘殖。根元素通常指的是 <html> 元素。
例如行瑞，如果根元素的字體大小為16px奸腺，1rem 就等于16px。如果根元素的字體大小為20px血久，1rem 就等于20px洋机。
適用于相對(duì)于整個(gè)頁(yè)面的尺寸定義，具有可伸縮性洋魂。
例如：font-size: 1.5rem;em（相對(duì)于父元素字體大小單位）：
em 是相對(duì)單位，它相對(duì)于父元素的字體大小。如果當(dāng)前元素的字體大小為16px副砍，1em 就等于16px衔肢。如果父元素的字體大小為20px，子元素的 1em 就等于20px豁翎。
適用于相對(duì)于父元素的尺寸定義角骤，但可能會(huì)受到多層級(jí)嵌套的影響。
例如：margin: 0.5em;vw（視窗寬度的百分比單位）：
vw 表示視窗寬度的百分比心剥。1vw 等于視窗寬度的1%邦尊。
適用于創(chuàng)建響應(yīng)式布局，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)調(diào)整优烧。
例如：width: 50vw;
- 這些單位在前端開發(fā)中被廣泛使用蝉揍，每個(gè)單位都有其適用的場(chǎng)景和優(yōu)勢(shì)。選擇合適的單位可以幫助實(shí)現(xiàn)靈活的布局和樣式效果畦娄。
八又沾、閉包
閉包是一種在編程中常見的概念，它涉及函數(shù)和其詞法環(huán)境的關(guān)系熙卡。以下是有關(guān)閉包的解釋：
閉包是指一個(gè)函數(shù)可以訪問并操作其詞法作用域之外的數(shù)據(jù)杖刷，即使在其父函數(shù)執(zhí)行完畢之后仍然能夠訪問這些數(shù)據(jù)。這是因?yàn)樵贘avaScript中驳癌，函數(shù)在被定義的時(shí)候就創(chuàng)建了一個(gè)詞法作用域滑燃，這個(gè)作用域會(huì)捕獲函數(shù)內(nèi)部的變量和參數(shù)。當(dāng)函數(shù)內(nèi)部有嵌套函數(shù)颓鲜，并且內(nèi)部函數(shù)引用了外部函數(shù)的變量時(shí)表窘，就形成了閉包。
閉包的特點(diǎn)包括：
內(nèi)部函數(shù)引用外部函數(shù)的變量：內(nèi)部函數(shù)可以訪問外部函數(shù)的變量灾杰，即使外部函數(shù)已經(jīng)執(zhí)行完畢蚊丐。
外部函數(shù)的詞法作用域被保留：因?yàn)閮?nèi)部函數(shù)引用了外部函數(shù)的變量，外部函數(shù)的詞法作用域會(huì)被保留在內(nèi)存中艳吠，不會(huì)被回收麦备。
閉包的應(yīng)用場(chǎng)景：
封裝數(shù)據(jù)：通過閉包可以創(chuàng)建私有變量，將一些數(shù)據(jù)封裝在函數(shù)作用域內(nèi)昭娩，只暴露必要的接口給外部凛篙。
實(shí)現(xiàn)模塊化：閉包可以模擬模塊化的行為，將功能劃分為獨(dú)立的模塊栏渺。
解決異步問題：在異步操作中呛梆，閉包可以保留當(dāng)前作用域的上下文，使回調(diào)函數(shù)能夠訪問正確的數(shù)據(jù)磕诊。
注意閉包可能導(dǎo)致內(nèi)存泄漏問題填物，因?yàn)殚]包會(huì)保留外部函數(shù)的作用域纹腌，如果不恰當(dāng)?shù)厥褂瞄]包，可能會(huì)導(dǎo)致一些不再需要的變量一直存在于內(nèi)存中滞磺。
一個(gè)簡(jiǎn)單的閉包示例：
function outer() {
let outerVar = 'I am from outer';
function inner() {
console.log(outerVar); // 內(nèi)部函數(shù)引用了外部函數(shù)的變量
}
return inner;
}
const innerFunc = outer(); // 這時(shí) outer 函數(shù)已經(jīng)執(zhí)行完畢升薯，但 outerVar 仍然被保留在內(nèi)存中
innerFunc(); // 執(zhí)行 inner 函數(shù)，輸出 'I am from outer'
- 這個(gè)示例中击困，inner 函數(shù)形成了一個(gè)閉包涎劈，可以訪問 outer 函數(shù)內(nèi)部的 outerVar 變量，即使 outer 函數(shù)執(zhí)行完畢阅茶。
九蛛枚、常見狀態(tài)碼及含義
HTTP狀態(tài)碼是服務(wù)器向客戶端返回的響應(yīng)中的一部分，用于表示服務(wù)器對(duì)請(qǐng)求的處理結(jié)果脸哀。以下是常見的HTTP狀態(tài)碼及其含義：
1xx - Informational（信息性狀態(tài)碼）：
100 Continue：服務(wù)器已收到請(qǐng)求頭蹦浦，客戶端可以發(fā)送請(qǐng)求體。
101 Switching Protocols：服務(wù)器要求切換協(xié)議企蹭，如升級(jí)到 WebSocket白筹。2xx - Successful（成功狀態(tài)碼）：
200 OK：請(qǐng)求成功，返回請(qǐng)求的數(shù)據(jù)谅摄。
201 Created：請(qǐng)求已成功并在服務(wù)器上創(chuàng)建了新資源徒河。
204 No Content：請(qǐng)求成功，但響應(yīng)沒有包含數(shù)據(jù)送漠，通常用于更新操作顽照。3xx - Redirection（重定向狀態(tài)碼）：
301 Moved Permanently：請(qǐng)求的資源已永久移動(dòng)到新位置。
302 Found / 303 See Other：請(qǐng)求的資源臨時(shí)移動(dòng)到新位置闽寡。
304 Not Modified：客戶端緩存的資源未過期代兵，可以直接使用。4xx - Client Error（客戶端錯(cuò)誤狀態(tài)碼）：
400 Bad Request：請(qǐng)求格式錯(cuò)誤爷狈，服務(wù)器無法理解植影。
401 Unauthorized：請(qǐng)求未經(jīng)授權(quán)，需要提供認(rèn)證信息涎永。
403 Forbidden：服務(wù)器拒絕請(qǐng)求思币，權(quán)限不足。
404 Not Found：請(qǐng)求的資源不存在羡微。5xx - Server Error（服務(wù)器錯(cuò)誤狀態(tài)碼）：
500 Internal Server Error：服務(wù)器內(nèi)部錯(cuò)誤谷饿。
502 Bad Gateway：服務(wù)器作為網(wǎng)關(guān)或代理時(shí)，從上游服務(wù)器收到無效響應(yīng)妈倔。
503 Service Unavailable：服務(wù)器暫時(shí)無法處理請(qǐng)求博投，通常是因?yàn)檫^載或維護(hù)。
- 這些狀態(tài)碼用于在HTTP通信過程中準(zhǔn)確地表示請(qǐng)求和響應(yīng)的狀態(tài)盯蝴。在開發(fā)中毅哗，了解這些狀態(tài)碼的含義能夠幫助你更好地診斷和處理請(qǐng)求問題听怕。
十、cookie會(huì)話
Cookie是一種在客戶端（瀏覽器）存儲(chǔ)數(shù)據(jù)的機(jī)制黎做，常用于跟蹤用戶會(huì)話叉跛、存儲(chǔ)用戶偏好設(shè)置以及實(shí)現(xiàn)一些狀態(tài)管理等。以下是關(guān)于Cookie會(huì)話的解釋：
Cookie會(huì)話是指在用戶訪問網(wǎng)站時(shí)蒸殿，服務(wù)器通過設(shè)置Cookie來跟蹤用戶的狀態(tài)和信息。它通常用于維護(hù)用戶在網(wǎng)站上的登錄狀態(tài)鸣峭、購(gòu)物車內(nèi)容宏所、個(gè)性化設(shè)置等。
基本概念和流程：
Cookie生成：服務(wù)器在響應(yīng)中的HTTP頭部設(shè)置一個(gè)名為"Set-Cookie"的字段摊溶，該字段包含一個(gè)鍵值對(duì)爬骤，如Set-Cookie: username=johndoe。瀏覽器會(huì)將這個(gè)Cookie存儲(chǔ)在本地莫换。
Cookie發(fā)送：當(dāng)用戶再次訪問同一網(wǎng)站時(shí)霞玄，瀏覽器會(huì)在請(qǐng)求頭中將存儲(chǔ)的Cookie信息發(fā)送給服務(wù)器。
服務(wù)器處理：服務(wù)器接收到Cookie信息拉岁，可以根據(jù)其中的數(shù)據(jù)判斷用戶的狀態(tài)坷剧，如用戶是否已登錄，是否有購(gòu)物車內(nèi)容等喊暖。
會(huì)話管理：通常惫企，瀏覽器會(huì)話結(jié)束時(shí)，存儲(chǔ)在Cookie中的數(shù)據(jù)會(huì)被刪除陵叽，稱為會(huì)話Cookie狞尔。但也可以通過設(shè)置Cookie的過期時(shí)間來實(shí)現(xiàn)長(zhǎng)期存儲(chǔ)，這種情況下被稱為持久化Cookie巩掺。
會(huì)話Cookie：
會(huì)話Cookie存儲(chǔ)在瀏覽器的內(nèi)存中偏序，不會(huì)在瀏覽器關(guān)閉后保留。
它們通常用于存儲(chǔ)短期的用戶信息胖替，如會(huì)話標(biāo)識(shí)研儒、臨時(shí)狀態(tài)等。
持久化Cookie：
持久化Cookie設(shè)置了過期時(shí)間刊殉，在指定時(shí)間內(nèi)會(huì)一直保留在瀏覽器中殉摔。
通常用于存儲(chǔ)較長(zhǎng)時(shí)間的用戶信息，如登錄狀態(tài)记焊、用戶偏好設(shè)置等逸月。
需要注意的是，由于Cookie存儲(chǔ)在客戶端遍膜，因此它們可以被用戶隨意刪除或禁用碗硬。為了增加安全性瓤湘，敏感信息（如密碼等）應(yīng)該避免直接存儲(chǔ)在Cookie中，而是采用安全的方式進(jìn)行存儲(chǔ)和傳輸恩尾，如使用加密技術(shù)弛说。在現(xiàn)代的Web開發(fā)中，也出現(xiàn)了替代方案翰意，如使用Token或Session存儲(chǔ)來管理用戶會(huì)話木人。
