目录
根据比赛考点进行的急救整理，为了应付比赛故而具有功利性，建议还是平时踏踏实实学习。
JS字符串练习
题目描述
【编程要求】 你需要编写一个 JavaScript 函数，该函数接受一个字符串作为输入，并执行以下操作： 将字符串中的所有元音字母（a、e、i、o、u）替换为大写字母。 删除字符串中的所有非字母字符（例如：空格、数字、特殊字符）。 将字符串中的连续相同字母合并为一个字母。例如，"heeello" 应该合并为 "helo"。 返回处理后的字符串。
解：
html：
<input type="text" id="inputString" placeholder="输入字符串">
<button onclick="processString()">处理</button>
js:
function processString() {
const inputValue = document.getElementById('inputString').value; //定义一个变量接受输入value，inputValue为常量
let result = '';
for (var i = 0; i < inputValue.length; i++) { //一个一个字符的遍历
if ((inputValue[i] >= 'a' && inputValue[i] <= 'z') || (inputValue[i] >= 'A' && inputValue[i] <= 'Z')) {
if (inputValue[i] != inputValue[i + 1]) { //有重复字母的字母的只遍历最后一个
switch (inputValue[i]) { //元音判断
case 'a':
case 'e':
case 'i':
case 'o':
case 'u': {
result += inputValue[i].toUpperCase(); //toUpperCase()转大写
break;
}
default: {
result += inputValue[i]; //直接存入result
break;
}
}
}
}
}
document.getElementById('result').innerHTML = result; //.innerHTML把result的值嵌入id框
}
收获
var,let,const区别
（1）var声明变量，作用在当前整个作用域；有变量提升；没var为全局变量，var在函数外为全局变量；
（2）let类似于var,但是所声明的变量，只在let命令所在的代码块内有效，上级代码块中定义的下级代码中可用；无变量提升；不可重复定义；
（3）const 声明方式，除了具有 let 的上述特点外其还具备一个特点，即 const 定义的变量，一旦定义后，就不能修改，定义常量：
声明必须赋初始值； 标识符一般为大写（习惯）； 不允许重复声明； 变量标识符不允许修改； 块儿级作用域（局部变量）；
响应式布局
@media (max-width:768px){ //适应屏幕 <768px时
nav ul li {
display: block;
margin: 0 10px;
}
}@media (max-width:768px)
盒子样式
#box1 {
display: flex;
justify-content: space-around;
/* 居中对齐 */
align-items: center;
/* 垂直居中 */
}
#box2,
#box3{
display: flex;
flex-direction: column;
/* 水平反向排列 */
justify-content: space-between;
/* 子元素在主轴上分布到两端 */
}
#box2 span:nth-child(2) ,
#box3 span:nth-child(3){
align-self: flex-end;
/* 竖直方向单独排列 */
}
//对box内的孩子元素进行每一个的排列
.box2 span:nth-child(id){
叽里呱啦的代码}
函数封装
const 定义常量 let代码块内 var 全局变量
随机生成4个字符的字符串
function generateCaptcha() {
//TODO：补全代码,生成4个不重复字符组成的验证码并显示在id="captcha"组件内
//定义字符串范围为characters
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
//定义一个数组存储生成的字串
const usedChars = new Set();
//目标字串为空
captchaText=''
//当目标字串长度<4时
while (captchaText.length < 4) {
//随机生成索引
const randomIndex = Math.floor(Math.random() * characters.length);
//charAt() 方法返回字符串中指定索引（下标）处的字符
const char = characters.charAt(randomIndex);
//不重复usedchar.has(char)
if (!usedChars.has(char)) {
captchaText += char;
usedChars.add(char);
}
}
document.getElementById('captcha').innerText = captchaText;
}set()集合不含重复子元素
//1.随机生成索引
const randomIndex = Math.floor(Math.random() * characters.length);
//2.charAt() 方法返回字符串中指定索引（下标）处的字符
const char = characters.charAt(randomIndex);
默写：
const index=Math.floor(Math.random()*chars.length);
const char=chars.Atchar(index);
数据树形化，push 根节点与叶子节点，遍历
function convertToTree(regions, rootId = "0") {
// TODO: 在这里写入具体的实现逻辑
// 将平铺的结构转化为树状结构，并将 rootId 下的所有子节点数组返回
// 如果不存在 rootId 下的子节点，则返回一个空数组
let result = []; // 最终结果
let sourceMap = {}; // 存储当前的循环数据
regions.forEach((m) => {
// m 为每个对象
m.children = []; // 对于没有子集的叶子节点，其 children 属性设置为空数组
sourceMap[m.id] = m;
// 如果当前节点是根节点，就放入结果数组中
if (m.pid == rootId) {
result.push(m);
} else {
sourceMap[m.pid].children.push(m); // 压入 children 中
}
});
return result;
//此题也可用递归实现，更简单
}let re=[]; 结果
let res=[]; 临时存储
region.forEach((m)=>{
m.children=[];
res[m.id]=m;
//pid为外键
if(m.id=rootid){
re.push(m);
}
else{
res[m.pid].children.push(m);
}
});Element Plus
目标1
选中项绑定值.数据源自定义列表标题
v-model="selectedKeys" :data="employees" :titles="['可选员工', '项目成员']"
加一个点击事件
@change="handleChange"
目标2
const generateData = async () => {
await fetch('./js/employees.json')
.then(response => response.json())
.then(data => {
// 在这里处理每个员工项，给键（key）能被3整除的员工添加disabled属性
const processedData = data.map(item => ({
...item,
disabled: item.key % 3 === 0
}));
employees.value = processedData;
})
.catch(error => console.error('Failed to load employees data:', error));
};
异步请求，放弃
目标3
disabled: item.key % 3 === 0如目标2代码，放弃
目标4
定义一个计算属性，显示被选中的员工名单
const selectedEmployees = computed(() => {
return employees.value.filter(employee => selectedKeys.value.includes(employee.key));
});html中：
<li v-for="employee in selectedEmployees" :key="employee.key">{{ employee.label }}</li>employee in selectedEmployees
:key="employee.key"
目标5
// TODO:目标5,统计补选员工数量
const handleChange = () => {
selectedCount.value = selectedKeys.value.length;
};方法写法: const **=()=>{
};
const ** =()=>{
};
图表可视化
1.读取数据
2.切换风格
// TODO:axios异步获取数据
axios.get("./js/data.json").then(res => {
let data = res.data.data;
for (const key1 in data) {
subject.push(key1);
for (const key2 in data[key1]) {
enrData[key2].push(data[key1][key2]);
}
}
option.legend.data =year;
option.xAxis.data = subject;
option.series[0].data = enrData["2018"];
option.series[1].data = enrData["2019"];
option.series[2].data = enrData["2020"];
myChart.setOption(option);
});
//TODO：补充代码，响应下拉框事件，更换图表的显示主题
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//切换不同的色彩主题
document.getElementById('sel').addEventListener('change', function () {
myChart.dispose();
let Theme = this.value;
//基于准备好的dom，初始化echarts实例
myChart = echarts.init(document.getElementById('main'), Theme);
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
});VUE
目标：⚫ 完成图书信息显示⚫ 完成添加、删除、查找功能⚫ 完成图书“末读”“已读”状态及按钮样式的动态切换
<li v-for="book in filteredBooks" :key="book.id">
<span class="book-title"> {{ book.title }} </span> by {{ book.author }}
<button @click="toggleRead(book)" :class="[book.isRead ? 'read-button' : 'unread-button']">{{ book.isRead ? '点击标志末读' : '点击标志已读' }}</button>
<button @click="removeBook(book.id)">删除</button>
</li>:class="[book.isRead ? 'read-button' : 'unread-button']" //状态转换
{{ book.isRead ? '点击标志末读' : '点击标志已读' }} //变量渲染
addBook() {
//TODO:补全代码，实现添加图书
if (this.newBook.title.trim() && this.newBook.author.trim()) {
this.books.unshift({
id: Date.now(),
title: this.newBook.title,
author: this.newBook.author,
isRead: false
});
this.newBook.title = '';
this.newBook.author = '';
}
},
removeBook(id) {
//TODO:补全代码，实现删除图书
this.books = this.books.filter(book => book.id !== id);
},
toggleRead(book) {
//TODO:补全代码，切换图书是否已读状态
book.isRead = !book.isRead;
}filteredBooks() {
//TODO:补全代码，实现查找功能
return this.books.filter(book =>
book.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
book.author.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}还是踏实备赛更有底气一些，别临门一脚再出手...
扫一扫
45万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
