基本元件定義
<script setup lang="ts">
import message_info from './message_info.svg';
const props = defineProps({
visible: {
type: Boolean
},
confirmTitle: {
type: String,
default: '確定'
},
modalWidth: {
type: String,
default: '34rem'
}
});
const emit = defineEmits(['onClose', 'onConfirm']);
const handleClose = () => {
emit('onClose');
};
const handleConfirm = () => {
emit('onConfirm');
};
</script>
JavaScript面試題通常涵蓋基礎知識、程式設計技巧、資料結構、演算法、以及JavaScript的高階特性等方面。
以下是一些常見的面試題及其答案：
原型和原型鏈：解釋原型的概念，以及原型鏈是如何幫助實現繼承的。
原型是JavaScript中實現繼承的主要機制，
每個物件都會在其內部初始化時關聯另一個物件，這個物件被稱為原型。
透過原型，物件可以共享屬性和方法，形成原型鏈。
繼承：JavaScript中的繼承可以透過原型鏈、建構函式、ES6的類等方式實現。
解釋這些繼承方式的原理及其優缺點。
new運算子：解釋new運算子在JavaScript中做了什麼。
new運算子建立一個使用者定義的物件，並執行建構函式的程式碼，
同時設定物件內部的[[Prototype]]（即__proto__）指向建構函式的prototype物件。
改變this指向的方法：JavaScript中可以透過call、apply、bind等方法改變函式的this指向。
這些方法允許開發者在函式呼叫時動態地設定函式內部this的值。
閉包：閉包是JavaScript中的一個重要概念，它允許函式在其詞法環境外部被呼叫時，仍然能夠訪問其外部詞法環境中的變數。
閉包在JavaScript中有很多應用，如實現回撥函式、模組封裝等。
垃圾回收機制：解釋JavaScript中的垃圾回收機制，包括如何透過引用計數和標記清除演算法來管理記憶體。
非同步程式設計：討論JavaScript中的非同步程式設計模型，包括回撥函式、Promises、async/await等，並解釋它們如何幫助處理非同步操作。
資料型別和變數：討論JavaScript中的資料型別（基本型別和引用型別），以及它們在記憶體中的儲存方式。
深複製與淺複製：解釋深複製和淺複製的概念，以及它們在實際程式設計中的應用和區別。
事件迴圈和非同步操作：描述JavaScript的事件迴圈機制，以及它是如何處理非同步操作的。
es6的新特性有：
1、塊級作用域，可以在塊級作用域中宣告變數
2、箭頭函式，一種新的函式宣告方式
3、解構賦值，一種從陣列或物件中提取值並賦值給變數的語；
4、預設引數，允許在函式定義時為引數提供預設值；
5、擴充套件運算子，可以將陣列或物件展開，提取出其中的元素；
6、模板字串；
7、類和模組；
8、迭代器和生成器；
9、promise物件；
10、模組化匯入和匯出等等
1. 塊級作用域：ES6引入了let和const關鍵字，可以在塊級作用域中宣告變數。
使用let宣告的變數只在當前作用域內有效，避免了變數提升和全域性命名衝突的問題。
而使用const宣告的常量是一個只讀變數，一旦被賦值，就不能再改變。
2. 箭頭函式：箭頭函式是ES6中的一種新的函式宣告方式，使用箭頭（=>）取代了傳統的function關鍵字。
箭頭函式具有更簡潔的語法，並且自動繫結了上下文，解決了回撥函式中this指向問題。
3. 解構賦值：解構賦值是一種從陣列或物件中提取值並賦值給變數的語法。在ES6中
可以使用解構賦值語法快速獲取陣列或物件中的元素，簡化了程式碼編寫和資料交換。
4. 預設引數：ES6引入了函式的預設引數，允許在函式定義時為引數提供預設值。
如果呼叫時未傳遞引數，將使用預設值。這樣可以簡化函式的使用，並且可以傳遞部分引數，而不是全部引數。
5. 擴充套件運算子：擴充套件運算子可以將陣列或物件展開，提取出其中的元素。在函式呼叫或陣列和物件字面量中，
使用...語法可以將陣列或物件展開成獨立的元素，或將多個元素合併成陣列或物件。
6. 模板字串：模板字串是一種更方便的字串拼接方式，使用反引號（`）定義字串，並可以在其中插入變數和表示式，
提高了程式碼的可讀性和可維護性。
7. 類和模組：ES6引入了類（class）的語法糖，使得物件導向程式設計更加簡潔和易用。類可以透過extends關鍵字實現繼承，
使用super關鍵字呼叫父類的方法。此外，ES6還引入了模組化的概念，透過import和export關鍵字可以方便地匯入和匯出模組。
8. 迭代器和生成器：ES6中引入了迭代器和生成器的概念，可以簡化處理集合和非同步程式設計的複雜度。迭代器是一個包含next()方法的物件，
可以按照定義的順序逐個返回值。而生成器是一種特殊的函式，可以透過yield關鍵字將狀態儲存下來，並在需要的時候恢復執行。
9. Promise物件：Promise是非同步程式設計的一種解決方案，可以避免回撥地獄和提供更好的錯誤處理。
Promise物件可以表示一個非同步操作的最終完成或失敗，並能夠鏈式呼叫和處理多個非同步操作。
10. 模組化匯入和匯出：ES6中的模組化語法可以更好地組織和管理程式碼，提供了import和export關鍵字，
以及export default關鍵字來匯入和匯出模組。
1. 箭頭函式（Arrow Functions）：箭頭函式是一種更簡潔的函式宣告方式，它使用箭頭（=>）來定義函式，並且自動繫結了上下文（this）。
2. 模組化（Modules）：ES6引入了模組化系統，允許開發者將程式碼分割成多個獨立的模組，以便更好地組織和管理程式碼。
3. 解構賦值（Destructuring Assignment）：解構賦值允許你從陣列或物件中提取值，並將其分配給變數，這有助於簡化程式碼和提高可讀性。
4. 類和繼承（Classes and Inheritance）：ES6引入了類的概念，讓物件導向程式設計更容易，並支援類之間的繼承關係。
5. 模板字串（Template Strings）：模板字串允許你在字串中插入表示式，而不需要複雜的字串連線操作，
提高了字串的可讀性和可維護性。
6. Promise：Promise是一種處理非同步操作的方式，它提供了更好的控制流和錯誤處理機制，用於處理回撥地獄問題。
7. const 和 let：ES6引入了const和let關鍵字，用於宣告變數，const用於宣告常量，而let用於宣告塊級作用域變數，
改善了變數的作用域控制。
8. 預設引數（Default Parameters）：ES6允許你在函式宣告中為引數設定預設值，這樣在呼叫函式時可以省略某些引數，而不會導致錯誤。
9. 塊級作用域（Block Scope）：引入let和const關鍵字，允許在塊級作用域中宣告變數，使得變數的作用範圍更加清晰和可控。
順豐面試題：
JavaScript基礎：考察對JavaScript語言本身的掌握程度，包括變數作用域、閉包、原型鏈、事件處理等概念。
DOM操作：測試對DOM操作的理解，如如何修改頁面元素、事件監聽器的新增與移除、以及如何使用JavaScript來動態改變頁面內容。
Vue.js框架：
由於Vue.js在現代前端開發中的廣泛應用，順豐前端面試可能會涉及到Vue.js的生命週期、元件通訊、狀態管理等方面的知識。
前端效能最佳化：考察對前端效能最佳化的理解，如程式碼分割、懶載入、快取策略等。
資料結構和演算法：可能會涉及到一些基本的資料結構和演算法問題，如陣列、連結串列、棧、佇列等的使用，以及常見的排序和搜尋演算法。
面試題例項：
Call 和 Apply, bind 的區別？ 這些問題旨在測試對JavaScript中函式呼叫和this上下文的理解。
Vue 生命週期的理解？ 考察對Vue.js框架中元件生命週期的理解，包括各個生命週期鉤子的作用和執行時機。
程式設計題：可能會給定一個具體的程式設計問題，要求編寫程式碼實現特定的功能，以此來測試應聘者的程式設計能力和問題解決能力。
系統設計和架構：對於有經驗的應聘者，可能會被問及過去專案中前端系統的設計和架構經驗，
以及如何處理大規模或高併發的場景
HTML5有哪些更新
1. 語義化標籤
header：定義文件的頁首（頭部）
nav：定義導航連結的部分
footer：定義文件或節的頁尾（底部）
article：定義文章內容
section：定義文件中的節（section、區段）
aside：定義其所處內容之外的內容（側邊）
2. 媒體標籤
（1） audio：音訊
<audio src='' controls autoplay loop='true'></audio>
屬性：
controls 控制皮膚
autoplay 自動播放
loop=‘true’ 迴圈播放
（2）video影片
<video src='' poster='imgs/aa.jpg' controls></video>
屬性：
poster：指定影片還沒有完全下載完畢，或者使用者還沒有點選播放前顯示的封面。預設顯示當前影片檔案的第一針畫面，當然透過poster也可以自己指定。
controls 控制皮膚
width
height
（3）source標籤
因為瀏覽器對影片格式支援程度不一樣，為了能夠相容不同的瀏覽器，可以透過source來指定影片源。
<video>
<source src='aa.flv' type='video/flv'></source>
<source src='aa.mp4' type='video/mp4'></source>
</video>
3. 表單
表單型別：
email ：能夠驗證當前輸入的郵箱地址是否合法
url ： 驗證URL
number ： 只能輸入數字，其他輸入不了，而且自帶上下增大減小箭頭，max屬性可以設定為最大值，min可以設定為最小值，value為預設值。
search ： 輸入框後面會給提供一個小叉，可以刪除輸入的內容，更加人性化。
range ： 可以提供給一個範圍，其中可以設定max和min以及value，其中value屬性可以設定為預設值
color ： 提供了一個顏色拾取器
time ： 時分秒
date ： 日期選擇年月日
datatime ： 時間和日期(目前只有Safari支援)
datatime-local ：日期時間控制元件
week ：周控制元件
month：月控制元件
表單屬性：
placeholder ：提示資訊
autofocus ：自動獲取焦點
autocomplete=“on” 或者 autocomplete=“off” 使用這個屬性需要有兩個前提：
表單必須提交過
必須有name屬性。
required：要求輸入框不能為空，必須有值才能夠提交。
pattern=" " 裡面寫入想要的正則模式，例如手機號patte="^(+86)?\d{10}$"
multiple：可以選擇多個檔案或者多個郵箱
form=" form表單的ID"
表單事件：
oninput 每當input裡的輸入框內容發生變化都會觸發此事件。
oninvalid 當驗證不透過時觸發此事件。
4. 進度條、度量器
progress標籤：用來表示任務的進度（IE、Safari不支援），max用來表示任務的進度，value表示已完成多少
meter屬性：用來顯示剩餘容量或剩餘庫存（IE、Safari不支援）
high/low：規定被視作高/低的範圍
max/min：規定最大/小值
value：規定當前度量值
設定規則：min < low < high < max
5.DOM查詢操作
document.querySelector()
document.querySelectorAll()
它們選擇的物件可以是標籤，可以是類(需要加點)，可以是ID(需要加#)
6. Web儲存
HTML5 提供了兩種在客戶端儲存資料的新方法：
localStorage - 沒有時間限制的資料儲存
sessionStorage - 針對一個 session 的資料儲存
7. 其他
拖放：拖放是一種常見的特性，即抓取物件以後拖到另一個位置。設定元素可拖放：
<img draggable="true" />
畫布（canvas ）： canvas 元素使用 JavaScript 在網頁上繪製影像。畫布是一個矩形區域，可以控制其每一畫素。canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas>
SVG：SVG 指可伸縮向量圖形，用於定義用於網路的基於向量的圖形，使用 XML 格式定義圖形，影像在放大或改變尺寸的情況下其圖形質量不會有損失，它是全球資訊網聯盟的標準
地理定位：Geolocation（地理定位）用於定位使用者的位置。‘
總結：
（1）新增語義化標籤：nav、header、footer、aside、section、article
（2）音訊、影片標籤：audio、video
（3）資料儲存：localStorage、sessionStorage
（4）canvas（畫布）、Geolocation（地理定位）、websocket（通訊協議）
（5）input標籤新增屬性：placeholder、autocomplete、autofocus、required
（6）history API：go、forward、back、pushstate
移除的元素有：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes
原文連結：https://blog.csdn.net/2301_79577017/article/details/139993787
在Vue中，可以透過全域性Vue.directive()方法或在元件內透過directives選項來自定義指令。
全域性自定義指令示例
Vue.directive('my-directive', {
// 鉤子函式
bind(el, binding, vnode, oldVnode) {
// 指令繫結到元素上時呼叫
},
inserted(el, binding, vnode, oldVnode) {
// 被繫結元素插入父節點時呼叫 binding可以獲取指令的屬性值
},
update(el, binding, vnode, oldVnode) {
// 被繫結於元素所在的模板更新時呼叫
},
componentUpdated(el, binding, vnode, oldVnode) {
// 被繫結元素所在模板完成一次更新週期時呼叫
},
unbind(el, binding, vnode, oldVnode) {
// 指令與元素解綁時呼叫
}
});
JS陣列常用的方法總結20種
1、join(): 陣列轉字串
2、push() 和 pop(): 陣列尾部新增/移除一項
3、shift() 和 unshift(): 陣列頭部移除/新增一項
4、reverse(): 陣列資料反轉
5、sort() : 陣列內的資料進行排序(預設為升序)
6、slice() : 擷取指定位置的陣列
7、splice() : 向陣列中新增，或從陣列刪除，或替換陣列中的元素
8、toString() : 將陣列轉換成字串
9、indexOf() : 查詢在陣列中指定的資料返回該資料的索引
10、forEach() : 遍歷陣列
11、map() : 同forEach功能，遍歷陣列
12、filter(): 過濾
13、find() ： 陣列迴圈
14、findIndex() : 陣列迴圈
15、every() : 判斷陣列中每一項是否都滿足條件
16、some(): 判斷陣列中是否存在滿足條件的項
17、reduce() : 逐個遍歷迭代陣列的所有項，然後構建一個最終返回的值
18、concat() : 用於連線兩個或多個陣列