【藍橋杯】第十五屆省賽大學真題組真題解析

一、智能停車系統

1、知識點

（1）flex-wrap

控制子元素的換行方式
屬性值有：

no-wrap不換行
wrap伸縮容器不夠則自動往下換行
wrap-reverse伸縮容器不夠則自動往上換行

（2）align-content調整多行側軸對齊方式

align-items調整單行側軸對齊方式
控制子元素在交叉軸上的對齊方式
屬性值有：

flex-start側軸的起始位置對齊
flex-end側軸的終止位置對齊
center側軸的中間位置對齊
space-around伸縮項目之間的距離相等是距離邊緣間距的2倍
space-between伸縮項目之間的距離相等，距離邊緣間距為0
space-evenly伸縮項目之間的距離相等是距離邊緣間距的1倍

（3）justify-content調整主軸對齊方式

控制子元素在主軸上的對齊方式
屬性值有：

flex-start側軸的起始位置對齊
flex-end側軸的終止位置對齊
center側軸的中間位置對齊
space-around伸縮項目之間的距離相等是距離邊緣間距的2倍
space-between伸縮項目之間的距離相等，距離邊緣間距為0
space-evenly伸縮項目之間的距離相等是距離邊緣間距的1倍

2、題解

flex-wrap: wrap; 
align-content: space-between;
justify-content: space-between;

二、布局切換

1、知識點

（1）classList

add添加類
remove移除類
toggle切換類：如果元素已有該類名則移除，沒有則添加

2、題解

layoutOptions.forEach(function (option) {// 經典模式，瀏覽模式，工具模式點擊事件option.addEventListener('click', function () {// TODO：待補充代碼document.querySelector('.active').classList.remove('active');option.classList.toggle('active')// TODO：END //  以下代碼無需修改// 根據不同選項進行布局處理if (this === layoutOptions[0]) {// Classic modetool.style.display = "none"; // 隱藏工具layoutContainer.classList.add('two-column-layout'); // 添加兩列布局類layoutContainer.classList.remove('three-column-layout'); // 移除三列布局類} else if (this === layoutOptions[1]) {// Browse modetool.style.display = "none"; // 隱藏工具layoutContainer.classList.add('three-column-layout'); // 添加三列布局類layoutContainer.classList.remove('two-column-layout'); // 移除兩列布局類} else if (this === layoutOptions[2]) {// Tool modetool.style.display = 'flex'; // 顯示工具}mode.style.display = 'none'; // 隱藏布局容器});
});

三、產品360度展示

1、知識點

（1）Promise對象

Promise對象是一個構造函數，用來封裝異步操作并且返回成功或者失敗的結果
回調函數：函數A作為參數引入函數B，則稱函數A為回調函數
可以防止“回調地獄”現象產生
回調地獄：多個異步代碼需要按順序執行產生多層嵌套現象，可讀性極差

存在一個異步任務

//封裝一個異步操作
const p = new Promise((resolve,reject) => {//調用一下兩個參數可相應改變promise狀態的值resolve('獲取成功')//或reject('獲取失敗')
})
p.then((data)=>{//then內部接受一個回調函數（resolve()），回調函數的參數設置為dataconsole.log(data)
})
.catch((err)=>{console.log(err)
})

存在兩個異步任務

//封裝一個異步操作
const p = new Promise((resolve,reject) => {//調用兩個參數可改變promise狀態的值resolve('獲取成功')//或reject('獲取失敗')
})
p.then((data)=>{console.log(data)//分配第二個異步任務的功能，作為p.then的返回值return p1 = new Promise((resolve,reject) => {//調用兩個參數可改變promise狀態的值resolve('獲取成功')//或reject('獲取失敗')})
})
//用于處理上一個then返回的promise對象
.then((data)=>{console.log(data)
})
.catch((err)=>{console.log(err)
})

（2）async、await語法糖

在promise的基礎上簡化了異步代碼的編寫。
async可以定義異步函數，使該函數返回一個promise對象。如果異步函數返回一個值則會被promise.resolve包裝如果異步函數返回異常則會被promise.reject包裝。
await被用于被async定義的異步函數中，用于等待一個promise對象完成，并返回一個promise值。如果await后面不是一個promise對象，那么他會被轉換成一個已解決的promise對象。

function one(){return 'one'
}
function two(){return new Promise((resolve,reject)=>{setTimeout(()=>{resolve('two')},2000)})
}
function three(){return 'three'
}
async function run(){console.log(one())console.log(await two())//可以等待two的異步函數執行完再往下繼續執行console.log(three())
}

（3）Promise.resolve方法

可以將一個普通值轉換為狀態為fulfilled的promise對象

（4）reduce方法

reduce方法是js數組對象中的一個高階方法，他對數組中的每個元素執行一個自定義的回調函數，并將結果匯總為單個值

語法：數組名.reduce(callback(accumulator,currentValue,currentIndex(可選),array()可選),initialValue(可選))

參數

callback是一個自定義的回調函數，參數可以設置accumulator，currentValue，currentIndex，array
- accumulator：累加器，可保存上一次回調函數的返回值；在第一次調用回調函數時如果設置了initialValue，則accumulator初始值為initialValue，如果沒有設置initialValue，則accumulator的初始值為數組中的第一個元素（必選）
- currentValue：當前正在處理的數組元素（必選）
- currentIndex：當前正在處理的數組元素的所以（可選）
- array：調用reduce()方法的數組（可選）
initialValue：第一次調用callback函數時，accumulator的初始值（可選）

返回值
reduce()方法最后一次回調函數的返回值

2、題解

簡單的promise鏈式調用

const pipeline = (initialValue, sequence) => {// TODO: 待補充代碼return sequence.reduce((promise,currentFn)=>{return promise.then((result)=>{return currentFn(result)})},Promise.resolve(initialValue))
};

在第一次調用時，promise對象為Promise.resolve(initialValue)，其解決值為initialValue。
在后續調用中，promise對象為then方法中返回的新promise對象，其解決值為上一個函數調用后的值。

async await語法糖

const pipeline = async (initialValue, sequence) => {// TODO: 待補充代碼let result = initialValuefor (const fn of sequence){result = await fn(result)}return result
};

如果await后面不是一個promise對象，那么他會被轉換成一個已解決的promise對象。

3、思路

pipeline函數的設計目標是按順序依次執行sequence數組中的所有函數，并且每個函數的輸入是上一函數的輸出。

通過reduce方法遍歷sequence數組，并且將返回值設置為初始值的已解決promise對象形式

在 pipeline 函數中，sequence 數組里的函數既可以是同步函數，也可以是返回 Promise 的異步函數。通過將初始值 initialValue 包裝成一個已解決狀態的 Promise（使用 Promise.resolve(initialValue)），可以確保后續處理的一致性。

promise.then會在promise狀態變為fulfilled時執行內部的回調函數（第一次循環時，initalValue已經是一個已解決的promise對象所以會立即執行回調函數）
在回調函數內部，currentFn(result)會調用當前函數，并傳入上一個promise的結果作為參數result。

當currentFn是同步函數時，會立刻執行并且返回一個值，由于then的特性（then方法期望得到一個promise對象），返回的值會被包裝成一個已解決的promise對象（Promise.resolve(返回值)）。
當currentFn是異步函數時，會等待promise狀態由pending轉變為resolved，然后返回一個已解決的promise對象。

返回的已解決的promise對象會重新傳入管道函數的參數promise累加器，進行下一輪的遍歷

四、多表單檢驗

1、知識點

（1）Element-plus

ElementPlus 是一個基于 Vue 3 構建的開源 UI 組件庫，它為開發者提供了一系列豐富、高質量且易于使用的組件，能夠幫助開發者快速搭建美觀、功能強大的 Web 應用程序。

（2）創建表單數據和校驗規則

使用reactive來創建表單數據對象，同時定義校驗規則。

創建表單數據

const form = reactive({name: '',sex: '',age: '',isCompetition: '',isEntrepreneurship: '',footnote: ''
})

創建校驗規則
通常使用rules對象定義每個表單字段的校驗規則，每個規則的字段是一個數組，內部可以包含多個校驗規則，常見的規則屬性包括：

required表示該字段是否為必填項
message校驗不通過時的錯誤提示信息
trigger制定驗證邏輯的觸發方式
- blur失去焦點時觸發
- change值改變時觸發
min和max用于限制字符串或數組的長度

自定義校驗規則
如果內置的校驗規則無法滿足需求時可以使用自定義校驗函數，如：

const validatePassword = (rule, value, callback) => {if (value === "") {callback(new Error("請輸入密碼"));} else if (value !== ruleForm.pass) {callback(new Error("密碼輸入不一致"));} else {callback();}
};

在這個示例中，validatePassword 是一個自定義的校驗函數，它接收三個參數：rule（當前校驗規則）、value（當前字段的值）和 callback（回調函數）。在校驗過程中，根據不同的情況調用 callback 函數，若校驗通過則直接調用 callback()，若校驗不通過則調用 callback(new Error(‘錯誤信息’)) 拋出錯誤。

（3）正則表達式檢驗

test 方法：test 是正則表達式對象的一個方法，它接受一個字符串作為參數，用于檢測該字符串是否包含符合正則表達式規則的部分。如果找到匹配項，test 方法返回 true；否則返回 false。

（4）reactive函數

reactive是Vue3提供的一個函數，他的作用是將一個普通的JavaScript對象轉換為一個響應式對象。當對象屬性發生變化時，與之相關的視圖會自動更新
reactive函數期望接受一個合法的對象字面量作為參數。對象字面量是由花括號包裹，包含一系列鍵對值的結構，鍵是屬性名，值可以是各種數據類型。reactive函數內不能聲明函數與變量，只能包含對象字面量

2、題解

// TODO：待補充代碼
const rules = reactive({name:[{validator:validateName = (rule,value,callback) => {if(value === ''){callback(new Error('請輸入姓名'))}else if (/[^\u4e00-\u9fa5]/g.test(value)){callback(new Error('只能輸入漢字'))}else{callback()}},trigger:'blur'}],sex:[{required:true,message:'請選擇性別',trigger:'blur'}],age:[{required:true,message:'請輸入年齡',trigger:'blur'}],isCompetition:[{required:true,message:'請選擇是否參加過編程比賽',trigger:'blur'}],isEntrepreneurship:[{required:true,message:'請選擇是否有過創業經歷',trigger:'blur'}]
})

五、找回連接的奇幻之旅

1、知識點

（1）arguments

基本概念：arguments對象包含了函數調用時傳入的所有參數，其索引從0開始，可以通過索引來訪問每個參數。不過argument并不是真正的數組，他沒有數組的方法（如map、filter），但是具備length屬性，用于表示傳入參數的數量。
雖然arguments并不是真正的數組，但是我們可以通過方法將其轉化為真正的數組

Array.from()方法
擴展運算符...：可以將多余的參數（傳遞的參數在函數內部未被使用）收集到一個真正的數組中。

2、題解

function resetableOnce(fn) {// TODO: 待補充代碼let done = falselet resultfunction runOnce() {if(!done){result = fn(...arguments)done=!done}return result}function reset() {done = false}  // TODO: ENDreturn { runOnce, reset};
}

六、tree命令助手

1、知識點

（1）map方法

map()是數組的一個高階函數，它用于對數組中的每個元素執行一個給定的函數，并返回一個新的數組，新數組中的元素是原數組元素經過函數處理后的結果。
map方法的特點：

不改變原數組：map()方法不會改變原始數組，而是返回一個新的數組。
按順序執行：map()方法按照數組元素的順序依次調用回調函數，并且新數組中的元素順序與原數組一致。
對稀疏數組的處理：map()方法會跳過數組中缺少的元素（即稀疏數組中的空位），不會為這些空位調用回調函數。

2、題解

// 生成文件樹
function generateTree(dirPath) {// TODO：待補充代碼const items = fs.readdirSync(dirPath)return items.map((item)=>{console.log('dirPath是：',dirPath);console.log('item是：',item);const itemPath =path.join(dirPath,item)console.log('itemPath是：',itemPath);if(fs.statSync(itemPath).isDirectory()){return {name:item,children:generateTree(itemPath)}}else{return {name:item}}})
}

七、Github明星項目統計

1、知識點

（1）filter方法

filter()方法是數組的一個常用高階函數，用于創建一個新數組，其中包含通過特定條件篩選出來的原數組中的元素。
filter方法的特點：

不改變原數組：filter()方法不會改變原始數組，而是返回一個新的數組，新數組中的元素是根據條件篩選出來的原數組中的部分元素。
按順序執行：filter()方法按照數組元素的順序依次調用回調函數，并且新數組中的元素順序與原數組中滿足條件的元素順序一致。
對稀疏數組的處理：filter()方法會跳過稀疏數組中的空位，不會為這些空位調用回調函數，也不會將其包含在新數組中。

（2）slice方法

slice()方法是數組和字符串都具有的方法，用于提取原數組或字符串的一部分，并返回一個新的數組或字符串，而不改變原始數組或字符串。

語法：array.slice(begin,end) 遵循左閉右開原則

（3）箭頭函數

在箭頭函數中如果使用花括號包裹函數體則需要return返回，不適用花括號包裹函數體則不需要return返回

（4）Vue.ref()

ref用于創建一個包含響應式數據的引用對象，當引用對象的值改變時vue會自動追蹤值的變化并更新與之綁定的dom元素。
訪問和修改ref的值需要使用.value屬性，在 Vue 3 的 <script setup> 語法糖中，在模板里使用 ref 對象時可以直接引用，無需添加 .value，Vue 會自動處理。但在 JavaScript 代碼里，仍然需要使用 .value 來訪問和修改值。

2、題解

//任務1
<div>篩選語言<!-- TODO: 待補充代碼 --><select name="language" id="language" @change="changeHandle" v-model="language"><option v-for='lang in languages' :value="lang">{{lang}}</option></select>
</div>//任務2
// 語言篩選改變時或頁面數字輸入框數字改變時的處理函數
const changeHandle = () => {// TODO：待補充代碼let newData = chartData.value.filter((item)=>item.language === language.value)//響應式數據對象需要.value才能獲取到具體數值if(language.value === 'All'){newData = chartData.value}newData = newData.slice(pageStart.value-1,pageEnd.value)xData.value = newData.map((item)=>item.name)yData.value = newData.map((item)=>item.stars)initChart();
};

八、小藍驛站

1、知識點

（1）push方法

push方法是 JavaScript 中數組的一個常用方法，用于在數組的末尾添加一個或多個元素，并返回新數組的長度。

2、題解

//任務1
<!-- 聯系人列表 -->
<ul class="contacts-list"><!-- TODO：待補充代碼 目標 1  --><!-- 以 A 為例 start --><li class="contacts-group" v-for='(item,index) in contacts'>   <!-- 字母分組渲染 DOM 結構--><div class="contacts-group-title">{{item.letter}}</div>  <!-- 分組的 字母名稱 --><ul><li class="contact-item" v-for='i in item.contacts'> <!-- contact-item 人名渲染 dom 結構--><span class="contact-name">{{i.name}}</span><button class="del-contact-button">刪除</button></li></ul></li>
</ul>//任務2
// 定義添加聯系人的方法
const addContact = () => {// TODO：待補充代碼 目標 2 let inp = document.querySelector('.add-contact-input')let inpFirst = inp.value[0].toUpperCase()let index = contacts.value.map((item)=>item.letter).indexOf(inpFirst)if(index>=0){return contacts.value[index].contacts.push({"name":inp.value})}else{return contacts.value.push({"letter":inpFirst,"contacts":[{"name":inp.value}]})}// TODO：END// 添加完成清空聯系人輸入框newContact.value = "";
};