蓝桥杯webjavascript

### 蓝桥杯 Web 类别 JavaScript 题目及解答 #### 1. 基于 `filter` 方法的数组过滤问题 在蓝桥杯竞赛中，经常涉及对数组的操作。例如，使用 `Array.prototype.filter()` 方法来筛选符合条件的数据项。 以下是基于引用中的描述[^3]的一个典型题目： **题目：** 给定一个整数数组 `arr` 和一个阈值 `threshold`，返回一个新的数组，其中只包含大于等于该阈值的元素。 **解决方案：** ```javascript function filterByThreshold(arr, threshold) { return arr.filter(function (currentValue) { return currentValue >= threshold; }); } // 测试案例 const numbers = [1, 5, 8, 3, 9]; const result = filterByThreshold(numbers, 5); console.log(result); // 输出: [5, 8, 9] ``` 上述代码利用了 `filter` 的回调函数特性，逐一判断每个元素是否满足条件，并将其加入到新数组中。 --- #### 2. DOM 操作与事件绑定 DOM 操作和事件处理是前端开发的基础技能，在蓝桥杯竞赛中也常有体现。以下是一个典型的 DOM 操作题目： **题目：** 在一个 HTML 页面中有多个按钮，点击某个按钮时，改变其背景颜色为红色。 **HTML 结构：** ```html <button class="btn">Button 1</button> <button class="btn">Button 2</button> <button class="btn">Button 3</button> ``` **JavaScript 实现：** ```javascript document.querySelectorAll('.btn').forEach(function (button) { button.addEventListener('click', function () { this.style.backgroundColor = 'red'; }); }); ``` 此代码通过 `querySelectorAll` 获取所有 `.btn` 元素，并为其绑定点击事件监听器。当触发点击事件时，修改当前按钮的样式属性[^1]。 --- #### 3. 动态效果实现 动态效果的设计也是蓝桥杯的重要考点之一。例如，根据引用中的目标效果图[^2]，可以设计一个简单的动画效果。 **题目：** 创建一个 GIF 效果类似的动画，使页面上的某段文字逐渐变大再缩小。 **CSS 动画配合 JavaScript 控制：** ```css @keyframes scaleText { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .text-animation { animation: scaleText 2s infinite ease-in-out; } ``` **JavaScript 添加类名控制动画：** ```javascript const textElement = document.querySelector('#animated-text'); textElement.classList.add('text-animation'); ``` 这段代码定义了一个 CSS 动画并通过 JavaScript 将对应的动画类应用到指定元素上，从而实现了动态缩放效果。 --- #### 4. 性能优化技巧 性能优化是高级前端工程师必备的能力，同时也是蓝桥杯可能考察的内容。例如，如何减少不必要的 DOM 访问操作？ **题目：** 假设有一个列表需要逐个遍历并更新其文本内容，如何提高效率？ **解决方案：** 可以通过缓存 DOM 查询结果的方式提升性能。 ```javascript const listItems = Array.from(document.querySelectorAll('.list-item')); listItems.forEach((item, index) => { item.textContent = `Item ${index + 1}`; }); ``` 这里先将所有的 `.list-item` 缓存在变量 `listItems` 中，避免每次循环都重新查询 DOM。 --- ###