📚 蓝桥杯web组核心知识点速通

本文为笔者在备战蓝桥杯过程中，结合高频考点与实战经验整理的本人易遗忘前端核心知识库。

一、异步请求与数据处理

1.1 AJAX核心实现

Axios实战

// GET请求基础模板
axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

// 配置式请求
axios({
  method: 'post',
  url: '/api/submit',
  data: { key: 'value' },
  params: { page: 1 }
}).then(res => console.log(res.data));

原生XHR实现

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log('Received:', data);
  }
};

xhr.send();

1.2 数据遍历与响应式

Vue列表渲染最佳实践

<template>
  <ul class="data-list">
    <!-- 带索引的遍历 -->
    <li v-for="(item, index) in items" :key="item.id">
      {{ index + 1 }}. {{ item.name }} - {{ item.value }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item A', value: 100 },
        { id: 2, name: 'Item B', value: 200 }
      ]
    }
  }
}
</script>

二、异步编程核心

2.1 Promise深度解析

const fetchData = (url) => {
  return new Promise((resolve, reject) => {
    const success = Math.random() > 0.5;
    setTimeout(() => {
      success ? resolve({ data: 'Mock Data' }) 
              : reject(new Error('Network Error'));
    }, 1000);
  });
};

fetchData('/api')
  .then(res => console.log('Success:', res.data))
  .catch(err => console.error('Error:', err.message))
  .finally(() => console.log('Request completed'));

2.2 Async/Await工程实践

async function loadUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error('HTTP error');
    return await response.json();
  } catch (error) {
    console.error('Fetch failed:', error);
    return null;
  }
}

// 并行请求优化
async function fetchMultiple() {
  const [data1, data2] = await Promise.all([
    fetch('/api/data1'),
    fetch('/api/data2')
  ]);
  return { data1: await data1.json(), data2: await data2.json() };
}

三、DOM操作与表单处理

3.1 高效元素操作

// 类名操作
const element = document.querySelector('.target');
element.classList.add('active', 'highlight');
element.classList.toggle('visible');
element.classList.replace('old-class', 'new-class');

// 样式操作
element.style.cssText = 'color: red; font-size: 16px;';
element.style.setProperty('--theme-color', '#2196F3');

3.2 表单高级处理

// 动态表单验证
const validateEmail = (email) => {
  const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
  return re.test(String(email).toLowerCase());
};

// 复合表单数据收集
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData.entries());
  console.log('Form data:', data);
});

四、数据结构与算法

4.1 数组高阶操作

// 矩阵转换
const matrix = [[1,2], [3,4], [5,6]];
const transposed = matrix[0].map((_, i) => matrix.map(row => row[i]));

// 高效去重
const unique = arr => [...new Set(arr)];
const uniqueByKey = (arr, key) => [
  ...new Map(arr.map(item => [item[key], item])).values()
];

4.2 集合与字典

// Set应用：并集/交集/差集
const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
const union = new Set([...setA, ...setB]);
const intersection = new Set([...setA].filter(x => setB.has(x)));
const difference = new Set([...setA].filter(x => !setB.has(x)));

// Map实现LRU缓存
class LRUCache {
  constructor(capacity) {
    this.cache = new Map();
    this.capacity = capacity;
  }
  
  get(key) {
    if (!this.cache.has(key)) return -1;
    const value = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, value);
    return value;
  }
  
  put(key, value) {
    this.cache.delete(key);
    this.cache.set(key, value);
    if (this.cache.size > this.capacity) {
      this.cache.delete(this.cache.keys().next().value);
    }
  }
}

五、可视化与CSS布局

5.1 ECharts快速集成

const initChart = (dom) => {
  const chart = echarts.init(dom);
  const option = {
    title: { text: '访问趋势' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{
      name: 'PV',
      type: 'line',
      data: [150, 230, 224],
      smooth: true,
      areaStyle: {}
    }]
  };
  chart.setOption(option);
  return chart;
};

5.2 现代布局方案对比

Flex经典布局

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.item {
  flex: 1 1 300px;
  min-width: 250px;
  background: #f5f5f5;
  padding: 20px;
}

Grid网格布局

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

六、Vue进阶技巧

6.1 响应式状态管理

// 组合式API示例
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    
    function increment() {
      count.value++;
    }

    return { count, double, increment };
  }
}

6.2 动态样式处理

<template>
  <div :class="['base-class', { active: isActive, 'text-danger': hasError }]">
    <p :style="{ color: dynamicColor, transform: `scale(${scale})` }">
      动态样式示例
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false,
      dynamicColor: '#42b983',
      scale: 1.2
    }
  }
}
</script>

七、性能优化专题

7.1 函数节流与防抖

// 防抖实现
function debounce(func, delay = 300) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 节流实现（时间戳版）
function throttle(func, limit = 300) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= limit) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

7.2 本地存储优化

const storage = {
  set(key, value, expire = 3600) {
    const data = {
      value,
      expire: Date.now() + expire * 1000
    };
    localStorage.setItem(key, JSON.stringify(data));
  },
  
  get(key) {
    const dataStr = localStorage.getItem(key);
    if (!dataStr) return null;
    
    const data = JSON.parse(dataStr);
    if (Date.now() > data.expire) {
      localStorage.removeItem(key);
      return null;
    }
    return data.value;
  }
};

// 使用示例
storage.set('user_token', 'abc123', 7200); // 2小时有效
const token = storage.get('user_token');

八、Node.js基础

8.1 HTTP服务搭建

const http = require('http');
const url = require('url');

const server = http.createServer((req, res) => {
  const { pathname } = url.parse(req.url);
  
  if (pathname === '/api/data') {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ data: 'Hello from Node!' }));
  } else {
    res.writeHead(404);
    res.end('Not Found');
  }
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

九、正则表达式

9.1 规定特定的字符串

const reg=new RegExp('hello','修饰符') //修饰符：igm //一般用于无法准确知道要替换的内容的值
const reg=/hello/g
const str='hello,world!'
const newstr=str.replace(reg,'world')

9.2 判断是否符合正则表达式

var reg=/hello/
var str='hello world'
console.log(reg.test(str)) //true

9.3 字符合集

var reg=/[abc]/
var reg=/[0-9]/
var reg=/[^xyz]/  //^写在【】里面是反义字符组，匹配任意不在括号内的字符

9.4 边界符

var reg=/abc/
var reg=/^abc/ //必须以abc开头
var reg=/abc$/ //必须以abc结尾
var reg=/^abc$/ //必须是abc字符才符合规范

9.5 字符集和边界符

var reg=/^[abc]$/ //三选一，只有是a,b,c这三个字母才返回true
console.log(reg.test('aa')) //false
var reg=/^[0-9A-Za-z]$/ //只要是数字、字母中的任意一个都返回true

9.6 字符类

字符类	含义
·	匹配除换行\n和回车符之外的任何单个字符，等效于[^\n\r]
\d	匹配一个数字字符，等效于[0-9]
\D	[^0-9]
\w	[0-9a-zA-Z_](包括下划线)
\W	[^0-9a-zA-Z_]
\s	[\f\t\n\r]
\S	[^\f\t\n\r]

9.7 数量词

字符	含义
*	>=0次
+	>=1次
？	0或1次
{n}	n次
{n,}	>=n次
{n,m}	n到m次

var reg=/^a*$/ //a出现0次或多次
var reg=/^a+$/ //a出现1次或多次
var reg=/^a?$/ //?只允许a出现1次或0次
var reg=/^a{3}$/ //{3}允许重复3次

十、易遗忘的小知识点

10.1 将 JSON 字符串转换为 JavaScript 对象

// 将 JSON 字符串转换为 JavaScript 对象。
JSON.parse(jsonstr)
// 将 JavaScript 对象转换为 JSON 字符串
JSON.stringify(str)

10.2 判断是否是数组

const arr=[1,2,3]
console.log(Array.isArray(arr)) //true

10.3 保留几位小数

const num=1.4399222
console.log(num.toFixed(2)) //保留两位小数

未完待续...如有错误欢迎指出！