当前位置：首页 > article >正文

9.8通宵速通javascript

article 2024/9/20 6:03:01

由于正着已经光速通了一些基础语法了，所以这一步我们倒着来。并记录一些疑问从而从难到易去解决这些问题。

23 eventloop

首先明确两个概念，分别是
1 调用栈
javascript只有一个调用栈用于跟踪函数其他的就类似于任何语言的函数调用栈
2 任务队列
异步任务在完成时会被添加到任务队列中，当调用栈为空的时候，也就是当下的函数全部执行完之后，会将这些已经完成的任务从任务队列中放入函数调用栈等待执行

javascript事件循环中有两种任务：宏任务和微任务
宏任务是javascript 引擎线程直接执行的，包括整个脚本（main script），setTimeout 和 setInterval 的回调，setImmediate（Node.js环境）等。
微任务是在当前宏任务结束后立即执行的任务，包括 Promise 的 then 和 catch 的回调process.nextTick（Node.js环境），MutationObserver的回调（浏览器环境）等。
微任务的优先级是低于宏任务的。

~~我无法理解这个事件循环的概念~~我现在理解了哈哈哈哈哈

console.log('script start');  // Macrotask

setTimeout(function() {
  console.log('setTimeout');  // Macrotask
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');  // Microtask
}).then(function() {
  console.log('promise2');  // Microtask
});

console.log('script end');  // Macrotask

我认为的输出顺序

script start
setTimeout
script end
promise1
promise2

实际的顺序

script start
script end
promise1
promise2
setTimeout

settime设置的定时任务，会进入宏任务队列，promise的任务在完成之后会进入微任务队列。
我的彩笔分析如下：
我认为微任务的优先级还是挺高的，当前宏任务执行完之后就会执行，先前没有执行只是因为队列中没有这个任务。这也符合上述的任务结果

22 network

首先我们看一段代码。

fetch('https://api.github.com/search/users?q=amazingang', {
  method: 'GET',
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));

这段代码调用fetch产生了一个promise类型的任务，之后将获取到的数据转化为了json,~~为什么是response我猜测只是一个接受的函数~~然后打印这个数据，甚至还用了catch来捕捉错误，做了错误处理。
哦，神奇的javascript

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: '0xAA',
    password: 'pwd',
  }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Request failure:', error));

post请求一如既往的需要header和body，需要更多的信息。

21 promise

promise的概念类似于rust中的future，也就是说，同样存在pending和ready（fulfilled状态）
创建一个promise是简单的。

const promise = new Promise((resolve, reject) => {
  // 异步操作代码
});

该构造函数接收一个函数作为参数，这个函数又接收两个参数：一个 resolve 函数和一个 reject 函数，分别用于改变 Promise 的状态为 Fulfilled 或 Rejected。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('WTF Promise resolved');
  }, 1000);
});

// 1秒后输出 'WTF Promise resolved'
promise.then(value => console.log(value));

~~我有点看不懂这个代码~~
Promise 的优势在于你可以使用链式 .then 调用来组织和管理你的异步代码。.then 方法接受两个可选参数：一个用于处理解析值的回调函数，和一个用于处理拒绝原因（即错误）的回调函数。
哈哈哈哈补充完就看懂啦

promise.then(
  value => {
    // 处理解析后的值
  },
  error => {
    // 处理错误
  }
);

再加上这段就可以理解了catch的用法确实和我先前理解的差不读，用于捕获错误

promise
  .then(value => {
    throw new Error('WTF Something went wrong');
  })
  .catch(error => console.error(error));

还有一个神奇的finally

const p = new Promise((resolve, reject) => {
  resolve('Hello, WTF JavaScript!')
})

p.then((value) => {
  console.log(value)
}).finally(() => {
  console.log('finally')
})

Promise API 提供了一些用于处理 Promise 的便捷方法：
Promise.resolve(value)：返回一个以给定值解析后的 Promise。如果该值是一个 Promise，返回的 Promise 将具有相同的状态和值。
Promise.reject(reason)：返回一个用给定的原因拒绝的 Promise。
Promise.all(iterable)：返回一个新的 Promise，它在 iterable 中的所有 Promise 都解析后解析，或者在 iterable 中的任何 Promise 被拒绝后拒绝。
Promise.race(iterable)：返回一个新的 Promise，它在 iterable 中的任何 Promise 解析或拒绝后具有相同的解析值或拒绝原因。
Promise.allSettled(iterable): 有时我们希望等到一组异步操作都结束了，不管每一个操作是成功还是失败，再进行下一步操作。但是，Promise.all 方法只适合所有异步操作都成功的情况，如果有一个操作失败，就无法满足要求。这时我们需要使用 Promise.allSettled 方法。
Promise.any: 与 Promise.race 类似，区别在于只要有一个 Promise 实例变成 fulfilled 状态，包装实例就会变成 fulfilled 状态；所有 Promise 实例都变成 rejected 状态，包装实例才会变成 rejected 状态。
~~我暂时不理解这些用法~~

20 ES6

原本以为吕布已经天下无敌了，想不到还有高手
javascript在最初是没有这种let 和 const的定义方法的，只有笨重的var，随着es6的出现，这种var语法渐渐的被替换掉了。
我以为这已经结束了，没想到还~~tmd~~有迭代器。

const arr = [1, 2, 3, 4];
const squares = arr.map(x => x * x);
console.log(squares);  // 输出 [1, 4, 9, 16]

也有类似于其他语言的输出方法

let name = 'Alice';
console.log(`Hello, ${name}!`);  // 输出 "Hello, Alice!"

我觉得这种方式可能能称为我装逼的写法

function addNumbers(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// 使用扩展运算符将数组中的元素展开作为函数的参数
const result = addNumbers(...numbers);

console.log(result); // 输出: 6

解构是一种简单的写法，其实不要把解构想得太复杂，其实就是编译器的眼力见罢了。

let [a, b, c] = [1, 2, 3];
console.log(a, b, c);  // 输出 1 2 3

let {x, y} = {x: 10, y: 20};
console.log(x, y);  // 输出 10 20

可以简单的了解一下promise的语法糖

// 使用Promise封装一个异步操作
function fetchUser() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: 1, name: 'John' };
      resolve(user);
    }, 2000);
  });
}

// 使用async/await来处理异步任务
async function getUser() {
  try {
    const user = await fetchUser();
    console.log('User:', user);
  } catch (error) {
    console.log('Error:', error);
  }
}

// 调用异步函数
getUser();//2s后输出 User: {id: 1, name: 'John'}