一、js 去重

去重是指在數(shù)組或其他數(shù)據(jù)結(jié)構(gòu)中，剔除重復(fù)的元素，只保留一個(gè)。以下是幾種常見(jiàn)的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í)際需求來(lái)優(yōu)化性能和代碼可讀性。

二、js 遞歸求 1-100 的和

使用遞歸來(lái)求解1到100的和，可以通過(guò)以下方式實(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è)典型的遞歸求和問(wèn)題，但在實(shí)際中要注意遞歸深度的限制以及性能問(wèn)題。

三、css 問(wèn)題，有寫(xiě)三角形

通過(guò) CSS 可以使用偽元素來(lái)創(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 屬性來(lái)繪制三角形的邊界。通過(guò)設(shè)置 border-left 和 border-right 為透明，以及 border-bottom 來(lái)設(shè)置三角形的高度和顏色，從而創(chuàng)建一個(gè)紅色的三角形。你可以根據(jù)需要調(diào)整寬度、高度和顏色來(lái)創(chuàng)建不同的效果。

如果需要?jiǎng)?chuàng)建其他方向的三角形，只需調(diào)整對(duì)應(yīng)的 border 屬性即可。

四、清除浮動(dòng)及原因

清除浮動(dòng)是一種解決在父元素內(nèi)部，因?yàn)樽釉馗?dòng)而導(dǎo)致父元素高度塌陷的問(wèn)題。浮動(dòng)元素會(huì)脫離正常的文檔流，導(dǎo)致父元素?zé)o法正確計(jì)算其高度，從而影響布局。

以下是常見(jiàn)的清除浮動(dòng)方法及其原因：

1. 使用空元素清除浮動(dòng)（Clearfix）：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

這種方法通過(guò)在浮動(dòng)元素的父元素末尾插入一個(gè)空的塊級(jí)元素（偽元素 ::after），并設(shè)置其 clear 屬性為 both，從而清除浮動(dòng)。這樣父元素會(huì)包裹住浮動(dòng)的子元素，正常計(jì)算高度。

2. 使用額外的塊級(jí)元素清除浮動(dòng)：

.clear {
  clear: both;
}

這種方法是在浮動(dòng)元素后面添加一個(gè)額外的空塊級(jí)元素，并設(shè)置其 clear 屬性來(lái)清除浮動(dòng)。

3. 使用 overflow 屬性清除浮動(dòng)：

.parent {
  overflow: hidden;
}

通過(guò)設(shè)置父元素的 overflow 屬性為 hidden，父元素會(huì)自動(dòng)包裹浮動(dòng)元素，從而解決高度塌陷問(wèn)題。

4. 使用 BFC（塊級(jí)格式化上下文）：

.parent {
  overflow: hidden;
  display: inline-block; /* 觸發(fā) BFC */
}

5. 通過(guò)將父元素設(shè)置為 display: inline-block;，會(huì)觸發(fā) BFC，從而自動(dòng)包裹浮動(dòng)元素。

6. 使用 CSS Flexbox 或 Grid 布局：
   使用 Flexbox 或 Grid 布局是一種現(xiàn)代的方法，它們可以自動(dòng)處理浮動(dòng)問(wèn)題，不需要額外的清除浮動(dòng)操作。

• 不同的清除浮動(dòng)方法適用于不同的場(chǎng)景，你可以根據(jù)實(shí)際情況選擇合適的方法來(lái)避免因浮動(dòng)元素而導(dǎo)致的布局問(wèn)題。

五、盒子居中

在前端開(kāi)發(fā)中，將盒子（元素）居中是一個(gè)常見(jiàn)的布局需求。以下是幾種常見(jiàn)的居中盒子的方法：

1. 水平居中：

使用 margin: auto;：適用于塊級(jí)元素，設(shè)置左右 margin 為 auto 可以使元素水平居中。

.center-horizontal {
  margin: 0 auto;
}

使用 flexbox：通過(guò)設(shè)置父容器的 display 為 flex，使用 justify-content 屬性來(lái)實(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：通過(guò)設(shè)置父容器的 display 為 flex，使用 align-items 屬性來(lái)實(shí)現(xiàn)垂直居中。

.parent {
  display: flex;
  align-items: center;
}

使用絕對(duì)定位和 transform：將子元素設(shè)置為絕對(duì)定位，通過(guò) transform 屬性進(jìn)行偏移，實(shí)現(xiàn)垂直居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3. 水平垂直居中：

使用 flexbox：通過(guò)設(shè)置父容器的 display 為 flex，同時(shí)使用 justify-content 和 align-items 屬性實(shí)現(xiàn)水平垂直居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用絕對(duì)定位和 transform：將子元素設(shè)置為絕對(duì)定位，通過(guò) transform 屬性進(jìn)行偏移，實(shí)現(xiàn)水平垂直居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• 無(wú)論選擇哪種居中方式，都需要根據(jù)具體的情況和布局要求來(lái)選取合適的方法。

六、媒體查詢

媒體查詢是一種在 CSS 中使用的技術(shù)，用于根據(jù)設(shè)備的特性（如屏幕寬度、高度、方向等）來(lái)應(yīng)用不同的樣式。這可以用于響應(yīng)式設(shè)計(jì)，使網(wǎng)頁(yè)能夠在不同的設(shè)備上以不同的布局和樣式展現(xiàn)。

媒體查詢的語(yǔ)法如下：

@media media_type and (media_feature) {
  /* 在滿足媒體查詢條件時(shí)應(yīng)用的樣式 */
}

其中，media_type 表示媒體類(lèi)型，例如 screen 表示屏幕，print 表示打印，all 表示所有媒體類(lèi)型等。media_feature 表示媒體特性，例如 width 表示屏幕寬度，height 表示屏幕高度，orientation 表示屏幕方向等。

以下是一些常見(jiàn)的媒體查詢示例：

根據(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)用的樣式 */
}

• 媒體查詢可以幫助開(kāi)發(fā)者根據(jù)設(shè)備的特性為不同的屏幕大小和設(shè)備類(lèi)型提供最佳的用戶體驗(yàn)。這對(duì)于移動(dòng)優(yōu)先的開(kāi)發(fā)策略非常重要，因?yàn)樗梢宰尵W(wǎng)站在不同設(shè)備上呈現(xiàn)出適應(yīng)性強(qiáng)的布局和樣式。

七、px、rwm 、em、vh

在前端開(kāi)發(fā)中，有多種用于指定長(zhǎng)度、尺寸和位置的單位。以下是關(guān)于常見(jiàn)單位的解釋?zhuān)?/p>

1. px（像素）：
   px 是最常見(jiàn)的長(zhǎng)度單位，表示屏幕上的一個(gè)像素點(diǎn)。它是一個(gè)固定的單位，不會(huì)隨著屏幕尺寸的變化而改變。
   例如：width: 100px;

2. rem（根元素字體大小單位）：
   rem 是相對(duì)單位，它相對(duì)于根元素的字體大小。根元素通常指的是 <html> 元素。
   例如，如果根元素的字體大小為16px，1rem 就等于16px。如果根元素的字體大小為20px，1rem 就等于20px。
   適用于相對(duì)于整個(gè)頁(yè)面的尺寸定義，具有可伸縮性。
   例如：font-size: 1.5rem;

3. em（相對(duì)于父元素字體大小單位）：
   em 是相對(duì)單位，它相對(duì)于父元素的字體大小。如果當(dāng)前元素的字體大小為16px，1em 就等于16px。如果父元素的字體大小為20px，子元素的 1em 就等于20px。
   適用于相對(duì)于父元素的尺寸定義，但可能會(huì)受到多層級(jí)嵌套的影響。
   例如：margin: 0.5em;

4. vw（視窗寬度的百分比單位）：
   vw 表示視窗寬度的百分比。1vw 等于視窗寬度的1%。
   適用于創(chuàng)建響應(yīng)式布局，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)調(diào)整。
   例如：width: 50vw;

• 這些單位在前端開(kāi)發(fā)中被廣泛使用，每個(gè)單位都有其適用的場(chǎng)景和優(yōu)勢(shì)。選擇合適的單位可以幫助實(shí)現(xiàn)靈活的布局和樣式效果。

八、閉包

閉包是一種在編程中常見(jiàn)的概念，它涉及函數(shù)和其詞法環(huán)境的關(guān)系。以下是有關(guān)閉包的解釋?zhuān)?/p>

閉包是指一個(gè)函數(shù)可以訪問(wèn)并操作其詞法作用域之外的數(shù)據(jù)，即使在其父函數(shù)執(zhí)行完畢之后仍然能夠訪問(wèn)這些數(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)包括：

1. 內(nèi)部函數(shù)引用外部函數(shù)的變量：內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)的變量，即使外部函數(shù)已經(jīng)執(zhí)行完畢。

2. 外部函數(shù)的詞法作用域被保留：因?yàn)閮?nèi)部函數(shù)引用了外部函數(shù)的變量，外部函數(shù)的詞法作用域會(huì)被保留在內(nèi)存中，不會(huì)被回收。

閉包的應(yīng)用場(chǎng)景：

• 封裝數(shù)據(jù)：通過(guò)閉包可以創(chuàng)建私有變量，將一些數(shù)據(jù)封裝在函數(shù)作用域內(nèi)，只暴露必要的接口給外部。

• 實(shí)現(xiàn)模塊化：閉包可以模擬模塊化的行為，將功能劃分為獨(dú)立的模塊。

• 解決異步問(wèn)題：在異步操作中，閉包可以保留當(dāng)前作用域的上下文，使回調(diào)函數(shù)能夠訪問(wèn)正確的數(shù)據(jù)。

注意閉包可能導(dǎo)致內(nèi)存泄漏問(wèn)題，因?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è)閉包，可以訪問(wèn) outer 函數(shù)內(nèi)部的 outerVar 變量，即使 outer 函數(shù)執(zhí)行完畢。

九、常見(jiàn)狀態(tài)碼及含義

HTTP狀態(tài)碼是服務(wù)器向客戶端返回的響應(yīng)中的一部分，用于表示服務(wù)器對(duì)請(qǐng)求的處理結(jié)果。以下是常見(jiàn)的HTTP狀態(tài)碼及其含義：

1. 1xx - Informational（信息性狀態(tài)碼）：
   100 Continue：服務(wù)器已收到請(qǐng)求頭，客戶端可以發(fā)送請(qǐng)求體。
   101 Switching Protocols：服務(wù)器要求切換協(xié)議，如升級(jí)到 WebSocket。

2. 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)沒(méi)有包含數(shù)據(jù)，通常用于更新操作。

3. 3xx - Redirection（重定向狀態(tài)碼）：
   301 Moved Permanently：請(qǐng)求的資源已永久移動(dòng)到新位置。
   302 Found / 303 See Other：請(qǐng)求的資源臨時(shí)移動(dòng)到新位置。
   304 Not Modified：客戶端緩存的資源未過(guò)期，可以直接使用。

4. 4xx - Client Error（客戶端錯(cuò)誤狀態(tài)碼）：
   400 Bad Request：請(qǐng)求格式錯(cuò)誤，服務(wù)器無(wú)法理解。
   401 Unauthorized：請(qǐng)求未經(jīng)授權(quán)，需要提供認(rèn)證信息。
   403 Forbidden：服務(wù)器拒絕請(qǐng)求，權(quán)限不足。
   404 Not Found：請(qǐng)求的資源不存在。

5. 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ù)器收到無(wú)效響應(yīng)。
   503 Service Unavailable：服務(wù)器暫時(shí)無(wú)法處理請(qǐng)求，通常是因?yàn)檫^(guò)載或維護(hù)。

• 這些狀態(tài)碼用于在HTTP通信過(guò)程中準(zhǔn)確地表示請(qǐng)求和響應(yīng)的狀態(tài)。在開(kāi)發(fā)中，了解這些狀態(tài)碼的含義能夠幫助你更好地診斷和處理請(qǐng)求問(wèn)題。

十、cookie會(huì)話

Cookie是一種在客戶端（瀏覽器）存儲(chǔ)數(shù)據(jù)的機(jī)制，常用于跟蹤用戶會(huì)話、存儲(chǔ)用戶偏好設(shè)置以及實(shí)現(xiàn)一些狀態(tài)管理等。以下是關(guān)于Cookie會(huì)話的解釋?zhuān)?/p>

Cookie會(huì)話是指在用戶訪問(wèn)網(wǎng)站時(shí)，服務(wù)器通過(guò)設(shè)置Cookie來(lái)跟蹤用戶的狀態(tài)和信息。它通常用于維護(hù)用戶在網(wǎng)站上的登錄狀態(tài)、購(gòu)物車(chē)內(nèi)容、個(gè)性化設(shè)置等。

基本概念和流程：

1. Cookie生成：服務(wù)器在響應(yīng)中的HTTP頭部設(shè)置一個(gè)名為"Set-Cookie"的字段，該字段包含一個(gè)鍵值對(duì)，如Set-Cookie: username=johndoe。瀏覽器會(huì)將這個(gè)Cookie存儲(chǔ)在本地。

2. Cookie發(fā)送：當(dāng)用戶再次訪問(wèn)同一網(wǎng)站時(shí)，瀏覽器會(huì)在請(qǐng)求頭中將存儲(chǔ)的Cookie信息發(fā)送給服務(wù)器。

3. 服務(wù)器處理：服務(wù)器接收到Cookie信息，可以根據(jù)其中的數(shù)據(jù)判斷用戶的狀態(tài)，如用戶是否已登錄，是否有購(gòu)物車(chē)內(nèi)容等。

4. 會(huì)話管理：通常，瀏覽器會(huì)話結(jié)束時(shí)，存儲(chǔ)在Cookie中的數(shù)據(jù)會(huì)被刪除，稱(chēng)為會(huì)話Cookie。但也可以通過(guò)設(shè)置Cookie的過(guò)期時(shí)間來(lái)實(shí)現(xiàn)長(zhǎng)期存儲(chǔ)，這種情況下被稱(chēng)為持久化Cookie。

會(huì)話Cookie：

會(huì)話Cookie存儲(chǔ)在瀏覽器的內(nèi)存中，不會(huì)在瀏覽器關(guān)閉后保留。
它們通常用于存儲(chǔ)短期的用戶信息，如會(huì)話標(biāo)識(shí)、臨時(shí)狀態(tài)等。

持久化Cookie：

持久化Cookie設(shè)置了過(guò)期時(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開(kāi)發(fā)中，也出現(xiàn)了替代方案，如使用Token或Session存儲(chǔ)來(lái)管理用戶會(huì)話。