异步编程
JavaScript 是单线程语言,通过事件循环机制处理异步操作。任务分为两种:
宏任务(Macrotask): script整体代码、setTimeout(时间结束执行)、setInterval(间隔执行)、I/O、UI渲染
微任务(Microtask): Promise.then/catch/finally、process.nextTick(Node)、MutationObserver
- 执行一个宏任务(JavaScript本身的代码会作为一个红宏任务)
- 执行所有微任务
- 渲染页面(如果需要)
- 执行下一个宏任务
fetch Api
网络请求API,返回Promise对象
// 基本GET请求
fetch('https://api.example.com/data').then(response => {if (!response.ok) throw new Error('Network response was not ok');return response.json(); // 解析JSON数据}).then(data => console.log(data)).catch(error => console.error('Error:', error));// POST请求示例
fetch('https://api.example.com/data', { //第二个参数设定方法,请求头,返回格式method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
作用
- JavaScript代码的有序执行(整个脚本先完整执行)
- 异步回调能够在不阻塞主线程的情况下执行
- 高优先级任务(微任务)能比低优先级任务(宏任务)更快执行
数组和对象操作
展开
// 数组展开
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }// 函数参数展开
function sum(a, b, c) { return a + b + c; }
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6// 剩余参数
const [first, ...rest] = [1, 2, 3, 4]; // first=1, rest=[2,3,4]
const { a, ...others } = { a: 1, b: 2, c: 3 }; // a=1, others={b:2,c:3}
深拷贝浅拷贝
const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original }; // 或 Object.assign({}, original)shallowCopy.b.c = 3;
console.log(original.b.c); // 3 - 也被修改了
深拷贝方法
const deepCopy1 = JSON.parse(JSON.stringify(original));
// 不能处理函数、undefined、循环引用等structuredClone(original);