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

蓝桥杯ES6及常用API解析

一、ES6核心特性

1. let与const示例

javascript 复制代码

// 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都是独立的

javascript 复制代码

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

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

2. 箭头函数示例

javascript 复制代码

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

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

javascript 复制代码

// 与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. 模板字符串示例

javascript 复制代码

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

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

javascript 复制代码

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

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

4. 解构赋值示例

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

5. 扩展运算符示例

javascript 复制代码

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

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

javascript 复制代码

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

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

6. Promise与异步示例

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

二、常用数组API

1. 高阶函数示例

javascript 复制代码

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]

javascript 复制代码

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

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

javascript 复制代码

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

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

2. 其他实用方法示例

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

// 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示例

javascript 复制代码

const str = "蓝桥杯竞赛";

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

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

javascript 复制代码

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

检查是否以"蓝"开头

javascript 复制代码

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

将字符串重复3次

javascript 复制代码

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

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

四、对象API示例

javascript 复制代码

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

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

五、Set与Map示例

javascript 复制代码

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

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

javascript 复制代码

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

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

六、实战练习题解析

javascript 复制代码

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

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

javascript 复制代码

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