蓝桥杯web开发赛道ES6和常用APl处理方法复习

蓝桥杯ES6及常用API解析

一、ES6核心特性

1. let与const示例

// let 块级作用域
for(let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100); // 0,1,2,3,4
}

• let i = 0：使用let声明循环变量i，具有块级作用域
• i < 5：循环条件判断
• i++：每次循环后i自增1
• setTimeout(() => console.log(i), 100)：设置100ms后打印i的值。由于let的块级作用域，每个i都是独立的

// const 常量
const PI = 3.1415;
// PI = 3; // 报错

• const PI = 3.1415：声明一个不可变的常量PI
• PI = 3：尝试修改常量会导致报错（注释掉了）

2. 箭头函数示例

// 简写形式
const sum = (a, b) => a + b;

• 定义箭头函数sum，接收参数a和b，返回a+b的结果

// 与this绑定
const obj = {
  value: 10,
  getValue: function() {
    setTimeout(() => {
      console.log(this.value); // 10 (箭头函数继承外层this)
    }, 100);
  }
};

• value: 10：定义对象属性
• getValue: function()：定义对象方法
• setTimeout(() => {...}, 100)：箭头函数继承外层getValue方法的this
• console.log(this.value)：输出obj.value的值10

3. 模板字符串示例

const name = "蓝桥杯";
console.log(`欢迎参加${name}竞赛！`);

• const name = "蓝桥杯"：定义字符串变量
• 欢迎参加${name}竞赛！：使用模板字符串插入变量

// 多行字符串
const html = `
<div>
  <h1>标题</h1>
</div>
`;

• 使用反引号创建多行字符串，保留所有换行和缩进

4. 解构赋值示例

// 数组解构
const [first, second] = [1, 2, 3];

• 将数组[1,2,3]的第一个元素赋值给first，第二个给second

// 对象解构
const { name, age } = { name: "Alice", age: 20 };

• 从右侧对象中提取name和age属性赋值给同名变量

// 函数参数解构
function greet({name, age}) {
  return `你好，${name}，你今年${age}岁！`;
}

• 函数参数直接解构对象，获取name和age属性

5. 扩展运算符示例

// 数组展开
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

• ...arr1：将arr1数组展开为1,2
• 合并成新数组[1,2,3,4]

// 对象展开
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

• ...obj1：展开obj1的属性
• 合并成新对象{a:1,b:2}

6. Promise与异步示例

// 基本使用
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("数据加载成功"), 1000);
  });
};

• 创建Promise对象
• setTimeout模拟异步操作
• 1秒后调用resolve返回成功结果

fetchData().then(data => console.log(data));

• 调用fetchData()
• then处理成功结果，打印返回的数据

// async/await
async function getData() {
  const data = await fetchData();
  console.log(data);
}

• async声明异步函数
• await等待Promise解析完成
• 获取数据后打印

二、常用数组API

1. 高阶函数示例

const nums = [1, 2, 3, 4];

// map
const doubled = nums.map(x => x * 2); // [2, 4, 6, 8]

• map遍历数组，对每个元素x执行x*2
• 返回新数组[2,4,6,8]

// filter
const evens = nums.filter(x => x % 2 === 0); // [2, 4]

• filter筛选数组中满足x%2===0的元素
• 返回新数组[2,4]

// reduce
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 10

• reduce累加数组元素
• acc是累加器，cur是当前值
• 初始值为0
• 返回总和10

2. 其他实用方法示例

// find/findIndex
const firstEven = nums.find(x => x % 2 === 0); // 2

• find查找第一个满足条件的元素
• 返回第一个偶数2

// some/every
const hasEven = nums.some(x => x % 2 === 0); // true
const allEven = nums.every(x => x % 2 === 0); // false

• some检查是否有元素满足条件
• every检查是否所有元素满足条件

// flat/flatMap
const nested = [1, [2, 3], [4, [5]]];
const flat = nested.flat(2); // [1, 2, 3, 4, 5]

• flat扁平化数组
• 参数2表示扁平化两层嵌套
• 返回[1,2,3,4,5]

三、字符串API示例

const str = "蓝桥杯竞赛";

// includes/startsWith/endsWith
console.log(str.includes("蓝桥")); // true

• 检查是否包含子串"蓝桥"

console.log(str.startsWith("蓝")); // true

• 检查是否以"蓝"开头

// repeat
console.log("ha".repeat(3)); // "hahaha"

• 将字符串重复3次

// padStart/padEnd
console.log("5".padStart(2, "0")); // "05"

• 在字符串开头填充0直到长度达到2

四、对象API示例

const obj = { a: 1, b: 2 };

// Object.keys/values/entries
console.log(Object.keys(obj)); // ["a", "b"]

• 获取对象所有可枚举属性名组成的数组

console.log(Object.values(obj)); // [1, 2]

• 获取对象所有属性值组成的数组

console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]

• 获取对象所有[key,value]对组成的数组

// Object.assign
const newObj = Object.assign({}, obj, { c: 3 }); // { a: 1, b: 2, c: 3 }

• 合并多个对象属性到第一个参数对象
• 返回新对象{a:1,b:2,c:3}

五、Set与Map示例

// Set
const set = new Set([1, 2, 2, 3]);
console.log([...set]); // [1, 2, 3]

• Set自动去重
• 扩展运算符将Set转为数组

// Map
const map = new Map();
map.set("name", "蓝桥杯");
console.log(map.get("name")); // "蓝桥杯"

• 创建Map实例
• set方法添加键值对
• get方法获取键对应的值

六、实战练习题解析

const unique = arr => arr.reduce((acc, cur) => 
  acc.includes(cur) ? acc : [...acc, cur], []);

• reduce遍历数组
• acc是结果数组，cur是当前元素
• 如果acc包含cur则保持acc不变，否则将cur加入acc
• 初始值为空数组

function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    let results = [];
    let completed = 0;
    
    promises.forEach((promise, i) => {
      promise.then(result => {
        results[i] = result;
        completed++;
        if(completed === promises.length) resolve(results);
      }).catch(reject);
    });
  });
}

• 返回新Promise
• results保存所有promise的结果
• completed计数完成的promise数量
• 遍历promises数组，处理每个promise
• 当所有promise完成时resolve结果数组
• 任意promise失败则reject整个Promise