关于web应用开发赛道的备考

一定记得return

1、flex布局

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

2、布局切换：去除类名给点击的对象添加类名

记得使用检查查看对象名

document.querySelector('.active').classList.remove('active');
option.classList.add('active')

3、promise函数使用

const pipeline = async (initialValue, sequence) => 
{ 
    let res = initialValue; 
    for (const fn of sequence) { 
    res = await fn(res) 
 } 
 return res 
 };

4、element-plus 表单验证

认真读题，一般题中会给出使用方法，正则使用.test(/ /)来判断

5、在处理函数传多个参数时，合理使用三点...运算符

6、函数递归

function generateTree(dirPath) { // 读取目录下的所有文件和文件夹 const files = fs.readdirSync(dirPath); 
const tree = []; 
files.forEach(file => 
{ const filePath = path.join(dirPath, file); 
const isDirectory = fs.statSync(filePath).isDirectory();
if (isDirectory) { // 如果是目录，则递归生成子目录的文件树 
const subtree = generateTree(filePath);
tree.push({ name: file, children: subtree }); } 
else { // 如果是文件，则直接添加到文件树 
tree.push({ name: file }); 
} 
});
return tree;
}

7、.fliter和.slice

.fliter(item => item.name === name.value)和.slice(data.vale - 1, dataend.value)

8、.trim().charAt(0).toUpperCase()取首字母大写，.toLowerCase()大写转化为小写

.trim()是一个字符串方法，用于移除字符串两端的空白字符 （包括空格、制表符 \t、换行符 \n 等）。它不会修改原字符串，而是返回一个新的字符串。

取首字母大写
let num = ' hell o  world';
let firstChar = num.trim().charAt(0).toUpperCase();

9、.find和.findIndex

10、Object.keys(obj)把对象中的键值封装成一个数组和.includes()判断字符串是否有

function appendParamsToURL(url, params) { 
  const paramString = Object.keys(params)
  .map((key) => `${encodeURIComponent(key)}
  =${encodeURIComponent(params[key])}`).join('&')
  const sep = url.includes('?') ? '&' : '?'

  const newurl = `${url}${sep}${paramString}`
  return newurl

}

11、.split("、")对字符串进行分割，.sort()对数组进行排序（也可以对对象进行排序）

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];
const numbers = [10, 2, 5, 1];
numbers.sort((a, b) => a - b);升序
numbers.sort((a, b) => b - a);降序
// 按 age 升序排序
users.sort((a, b) => a.age - b.age);
console.log(users);
// 输出：
// [
//   { name: 'Charlie', age: 20 },
//   { name: 'Alice', age: 25 },
//   { name: 'Bob', age: 30 }
// ]

12、typeof检查数据类型，返回数据类型

typeof "hello"      // "string"
typeof 42            // "number"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof null          // "object" (这是历史遗留问题)
typeof {}            // "object"
typeof []            // "object"
typeof function(){}  // "function"
typeof Symbol()      // "symbol"
typeof 10n           // "bigint"

13、for...in和for..of的用法

// 示例
const obj = {a: 1, b: 2, c: 3};
for (const key in obj) {
  console.log(key, obj[key]); // 输出 "a 1", "b 2", "c 3"
}

// 示例
const arr = ['a', 'b', 'c'];
for (const value of arr) {
  console.log(value); // 输出 "a", "b", "c"
}

// 适用于字符串
for (const char of 'hello') {
  console.log(char); // 输出 "h", "e", "l", "l", "o"
}

14、document的常用API

// 通过 CSS 选择器获取单个元素
const submitBtn = document.querySelector('.submit-btn'); 

// 通过 CSS 选择器获取多个元素
const menuItems = document.querySelectorAll('.menu li');

// 示例：添加点击事件
submitBtn.addEventListener('click', () => {
  console.log('按钮被点击了');
});

// 创建新元素
`&`const newDiv = document.createElement('div');
    newDiv.className = 'alert';
    newDiv.textContent = '这是一条新消息';
// 给submitBtn元素添加子标签createTextNode添加文本内容
`&`submitBtn
.appendChild(newDiv.createTextNode('一些文本内容')) 

`&`//修改样式
const box = document.querySelector('.box');
    // 直接修改样式
    box.style.color = 'red';
    box.style.backgroundColor = '#f0f0f0';
`&`// 添加/移除/切换类名
    box.classList.add('active');
    box.classList.remove('inactive');
    box.classList.toggle('hidden'); // 有则移除，无则添加 

`&`//给对象添加属性和值
let str = "color: red "
box["style"] = str
box["click"] = function(){}
box.setAttribute(name, value); 
    name ：要设置的属性名称（字符串）
    value ：要为属性设置的值（字符串）

15、.replace()和如何拿到方法和对象

//替换操作
.replace(/[A-Z]/,c => `-${c.toLowerCase()}`)

//给dom元素添加方法
dom[key] = prop

16、Map()和Set(),常用于去重

// 创建 Map
const map = new Map();

// 添加元素
map.set('name', 'Alice');
map.set(1, 'number one');
map.set({ id: 1 }, 'object key');

// 获取元素
console.log(map.get('name')); // 'Alice'
console.log(map.get(1));      // 'number one'

// 检查键是否存在
console.log(map.has('name')); // true

// 删除元素
map.delete('name');

// 清空 Map
map.clear();

// 获取大小
console.log(map.size); // 0



`// 创建 Set`
const set = new Set();

// 添加元素
set.add(1);
set.add(2);
set.add(2); // 重复值不会被添加

// 检查值是否存在
console.log(set.has(1)); // true

// 删除元素
set.delete(1);

// 清空 Set
set.clear();

// 获取大小
console.log(set.size); // 0

17、grid布局

.seat-area {
  margin-top: 50px;          /* 区域顶部有50px的外边距 */
  display: grid;             /* 使用CSS Grid布局 */
  grid-template-columns: repeat(8, auto);  /* 创建8列，每列宽度自动 */
  grid-template-rows: 100px 200px 150px;
 /* 三行，高度分别为100px、200px、150px */
  gap: 10px;                 /* 网格项之间的间隙为10px */
}
//:nth-of-type(8n + 2)伪选择器表示没8个的第二个
.seat:nth-of-type(8n + 2) {
  margin-right: 20px;        /* 每行第2个座位右侧增加20px外边距 */
}

.seat:nth-of-type(8n + 6) {
  margin-right: 20px;        /* 每行第6个座位右侧增加20px外边距 */
}

18、生成随机数

let randomInt = Math.floor(Math.random() * 10) + 1; 
console.log(randomInt); // 输出一个介于 1 到 10 之间的随机整数

/**
 * 封装函数，函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
 */
//生成指定数目和范围的随机数
const getRandomNum = function(min,max,countNum){
    var arr = [];
    // 在此处补全代码
    for(let i =0; i < countNum; i++){
        let random = Math.floor(Math.random() * max) + min

        if(!arr.includes(random)){
            arr.push(random)
        }
    }
    return arr;
}
module.exports = getRandomNum; //请勿删除

19、文本溢出，......代替

let wenben = document.querySelector('.more2_info_name')
    wenben.style.overflow = "hidden"
    wenben.style['-webkit-line-clamp'] = 2

20、@media媒体查询加弹性布局（看父元素）

@media(max-width: 768px){
    #container{
        flex-direction: column;
        gap: 45px;
    }
    #banner{
        width: 100%;
    }
    #news{
        width: 100%;
    }
}

21、关于获取Attribute的css相关用法

22、axios请求

23、css的var()设置属性

24、本地存储

最后心态放平不要看的太重