9.8通宵速通javascript

2024-09-08 07:52
文章标签 java script 速通 通宵 9.8

本文主要是介绍9.8通宵速通javascript,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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');  // MacrotasksetTimeout(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 3let {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'}

这篇关于9.8通宵速通javascript的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1147543

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟 开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚 第一站:海量资源,应有尽有 走进“智听

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定