蓝桥杯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
相关推荐
Codebee2 天前
50行代码搞定OneCode摄像头插件:快速定制实战指南
前端框架·开源·ecmascript 6
百锦再3 天前
服务器间接口安全问题的全面分析
运维·服务器·安全·api·jwt·token·net
Rose 使者14 天前
基站定位接口如何如何用PHP实现调用?
api·基站
zandy101118 天前
嵌入式BI实战指南:通过衡石API/SDK深度集成数据分析能力
数据挖掘·数据分析·api·嵌入式bi·sdk工具
月下点灯18 天前
🚀学会这几个Set实例新特性方法,助你开发体验提升一个档次⚡️
前端·javascript·ecmascript 6
胖墩会武术19 天前
OpenAI API调用教程
python·openai·api
百锦再19 天前
自动打电话软件设计与实现
python·django·html·api·语音·打电话
栗子味清清20 天前
API 管理系统实践指南:监控、安全、性能全覆盖
安全·ai·ai作画·架构·api·数据安全
用户25191624271120 天前
ES6之Promise基础
javascript·ecmascript 6
一个专注api接口开发的小白21 天前
亚马逊 API 实战:商品详情页实时数据采集接口开发与调用
前端·数据挖掘·api