ES6（ECMAScript 2015）是 JavaScript 的一次重大更新，为前端开发带来了更简洁、更强大的语法。在蓝桥杯 Web 方向竞赛中，ES6 新特性几乎是必考内容，掌握它们能帮助你高效处理字符串、数组、对象，写出更优雅的代码。本文将从你提供的代码片段出发，系统梳理 ES6 中常用的扩展写法，并结合蓝桥杯常见考点进行拓展，每个知识点都附有汇总表格和代码实例。
一、字符串扩展
ES6 为字符串添加了多个实用方法，并引入了模板字符串，极大地提升了字符串处理的便捷性。
| 方法/特性 | 描述 | 示例 |
|---|---|---|
includes(searchString) |
判断字符串是否包含指定子串，返回布尔值（区分大小写） | 'Hello World'.includes('World') → true |
repeat(count) |
将字符串重复 count 次，返回新字符串 |
'Hi'.repeat(3) → 'HiHiHi' |
| 模板字符串 | 使用反引号 包裹，支持换行和内嵌变量 ${expression} |
Hello ${name} |
代码实例
// includes() 与 repeat()
const str = "Hello World";
console.log(str.includes("World")); // true
console.log(str.includes("world")); // false（区分大小写）
const repeated = str.repeat(2);
console.log(repeated); // "Hello WorldHello World"
// 模板字符串
const name = "ggx", age = 18;
const intro = `my name is ${name}, ${age} years old`;
console.log(intro); // my name is ggx, 18 years old蓝桥杯考点：常结合 DOM 操作动态生成 HTML 字符串，或判断用户输入是否包含敏感词。
二、函数扩展
ES6 让函数定义更加灵活：支持默认参数、rest 参数（可变参数），以及不绑定自己的 this 的箭头函数。
| 特性 | 描述 | 示例 |
|---|---|---|
| 参数默认值 | 为函数参数指定默认值，当传入 undefined 或未传时使用 |
(name = '匿名') => {} |
rest 参数 (...args) |
将多个参数收集到一个数组中 | const sum = (...nums) => nums.reduce((a,b)=>a+b) |
| 箭头函数 | 简写语法，不绑定自己的 this，继承外层作用域的 this |
const add = (a,b) => a + b |
代码实例
// 默认参数
const introduce = (name = 'please input your name', age = 0) => {
console.log(`my name is ${name}, ${age} years old`);
};
introduce('ggx', 18); // my name is ggx, 18 years old
introduce(); // my name is please input your name, 0 years old
// rest 参数（可变参数求和）
const add = (...numbers) => {
let s = 0;
for (let value of numbers) s += value;
return s;
};
console.log(add(10, 15, 20, 55)); // 100
// 箭头函数的 this 指向
const obj = {
value: 42,
log: () => console.log(this.value), // 箭头函数 → this 指向全局（undefined）
log2: function() { console.log(this.value); } // 普通函数 → 指向 obj
};
obj.log(); // undefined（浏览器中 globalThis 没有 value）
obj.log2(); // 42蓝桥杯考点 ：箭头函数常用于回调（如
map、filter），需注意其this指向；rest 参数可替代arguments对象，更简洁。
三、数组扩展
ES6 为数组带来了扩展运算符、查找方法以及新的遍历方式，让数组操作如虎添翼。
| 特性 | 描述 | 示例 |
|---|---|---|
扩展运算符 ... |
将数组展开为元素序列，用于复制、合并数组 | const arr2 = [...arr1, 6, 7] |
find(callback) |
返回第一个满足条件的元素 | arr.find(v => v > 5) |
findIndex(callback) |
返回第一个满足条件的元素下标 | arr.findIndex(v => v > 5) |
for...of 循环 |
遍历可迭代对象（数组、字符串等）的值 | for(let val of arr) { ... } |
代码实例
const arr1 = [1, 2, 3, 5];
const arr2 = [...arr1, 6, 7, 8]; // 复制 + 添加元素
const arr3 = [...arr1, ...arr2]; // 合并数组
console.log(arr3); // [1,2,3,5,1,2,3,5,6,7,8]
// find 与 findIndex
const found = arr3.find(element => element > 6); // 7
const index = arr3.findIndex(element => element > 6); // 9（0-based）
console.log(found, index);
// for...of 遍历（与 rest 参数配合）
const sumAll = (...nums) => {
let total = 0;
for (let num of nums) total += num;
return total;
};
console.log(sumAll(1,2,3)); // 6蓝桥杯考点 ：常结合数据处理题，如从数组中查找满足条件的对象、合并多个数组、使用
for...of替代传统for循环提高可读性。
四、对象扩展
对象字面量得到了大幅增强，属性简写、计算属性名、Object.assign 等方法让对象操作更加方便。
| 特性 | 描述 | 示例 |
|---|---|---|
| 属性简写 | 变量名直接作为属性名和值 | { name, age } 等价于 { name: name, age: age } |
| 计算属性名 | 使用 [表达式] 作为属性名 |
{ [key]: value } |
Object.assign(target, ...sources) |
合并源对象到目标对象（浅拷贝） | Object.assign({}, obj1, obj2) |
对象扩展运算符 ...（ES2018） |
复制或合并对象属性 | const newObj = {...obj1, ...obj2} |
代码实例
// 属性简写
const name = 'ggx', age = 18;
const person = { name, age };
console.log(person); // { name: 'ggx', age: 18 }
// 计算属性名
const title = (10 < 100) ? "ttt" : "qqq";
const obj1 = { [title]: "value of ttt" };
console.log(obj1); // { ttt: 'value of ttt' }
// Object.assign 合并对象
const obj2 = { name: 'ggg' };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { ttt: 'value of ttt', name: 'ggg' }
// 对象扩展运算符（更现代的合并方式）
const obj4 = { ...obj1, ...obj2, extra: true };
console.log(obj4); // { ttt: 'value of ttt', name: 'ggg', extra: true }蓝桥杯考点 ：属性简写常用于封装数据；计算属性名在动态生成对象键时非常实用；
Object.assign或对象扩展运算符在状态管理（如 Redux）中常见，竞赛中可用来合并配置对象。
五、补充：ES6 其他高频考点
蓝桥杯 Web 赛道还常考察解构赋值、Promise 和模块化等特性，这里一并补充。
| 特性 | 描述 | 示例 |
|---|---|---|
| 数组解构 | 快速从数组提取值并赋给变量 | const [a, b] = [1, 2] |
| 对象解构 | 从对象提取属性值 | const { name, age } = person |
| Promise | 处理异步操作，避免回调地狱 | fetch(url).then(res=>res.json()) |
模块化 import/export |
拆分代码为独立模块 | export const foo = ...; import { foo } from './module.js' |
代码实例
// 数组解构
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
console.log(first, second); // red green
// 对象解构 + 默认值
const user = { id: 1 };
const { name = '匿名', age: userAge = 0 } = user;
console.log(name, userAge); // 匿名 0
// Promise 模拟异步
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('数据加载成功'), 1000);
});
};
fetchData().then(data => console.log(data));
// 模块化（需在支持 ES6 模块的环境运行）
// ----- math.js -----
export const add = (a,b) => a + b;
// ----- main.js -----
import { add } from './math.js';
console.log(add(2,3)); // 5蓝桥杯考点 ：解构赋值常用于快速提取 API 返回的数据；Promise 结合
fetch处理网络请求是必考异步操作；模块化则体现在多文件代码组织上。
总结
ES6 不仅让 JavaScript 变得更优雅，也是蓝桥杯 Web 方向命题的重要基础。本文从字符串、函数、数组、对象四个核心维度出发，结合你提供的代码实例，提炼出每个特性的用法与表格，并补充了解构、Promise、模块化等高频考点。建议你在备考过程中：
-
多动手练习每个代码实例，并尝试改造为更复杂的场景。
-
注意箭头函数的
this指向与普通函数的区别（笔试常考）。 -
熟悉数组的
find/findIndex/map/filter组合使用。 -
掌握
Object.assign与对象扩展运算符的浅拷贝特性。
将以上知识点融会贯通，你就能在蓝桥杯 Web 赛题中快速、准确地完成数据处理和 DOM 交互任务。祝备赛顺利！加油💪