JavaScript 异步编程、对象/数组操作

异步编程

JavaScript 是单线程语言,通过事件循环机制处理异步操作。任务分为两种:

宏任务(Macrotask): script整体代码、setTimeout(时间结束执行)、setInterval(间隔执行)、I/O、UI渲染
微任务(Microtask): Promise.then/catch/finally、process.nextTick(Node)、MutationObserver

  1. 执行一个宏任务(JavaScript本身的代码会作为一个红宏任务)
  2. 执行所有微任务
  3. 渲染页面(如果需要)
  4. 执行下一个宏任务

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));

作用

  1. JavaScript代码的有序执行(整个脚本先完整执行)
  2. 异步回调能够在不阻塞主线程的情况下执行
  3. 高优先级任务(微任务)能比低优先级任务(宏任务)更快执行

数组和对象操作

展开

// 数组展开
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);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/news/906965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中小制造企业网络安全防护指南

考虑到文章内容较长,简要内容图片在文档末尾,请直接翻阅到底部查看 引言:中小制造企业面临的独特网络安全挑战 中小制造企业 (SME) 在当今数字化浪潮中扮演着至关重要的角色,然而,伴随技术进步而来的是日益严峻且独特…

es学习小结

1.​客户端类型​ ​推荐场景​ ​版本兼容性​ Elasticsearch Java API Client 新项目、ES 8.x集群 8.x及以上 Spring Data Elasticsearch Spring生态项目、简化ORM操作 ES 7.x-8.x(需版本匹配) Low-Level REST Client 需要底层HTTP控制、兼容多版本ES …

Axure项目实战:智慧运输平台后台管理端-订单管理2(多级交互)

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!如有帮助请订阅专栏! Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 课程主题:订单管理2 主要内容:中继器筛选、表单跟随菜单拖动、审批数据互通等 应用场景:订单管理…

2025年——ComfyUI_连接HuggingFace及更改缓存路径

本篇分享在 ComfyUI 中连接 huggingface 以及更改模型缓存路径。 我们在使用 ComfyUI 的一些插件时,有些必要模型只能通过连接 huggingface 来缓存才能让流程得以进行。但目前在上网不科学的情况下是无法打开 huggingface 网站的,好在国内有其镜像网站&a…

wx.getPrivacySetting接口needAuthorization一直返回false

我们在开发小程序的隐私协议授权时往往会使用到wx.getPrivacySetting接口,当返回的needAuthorization为true时候提示我们需要去授权,但你们有没有遇到过needAuthorization一直为false的情况呢,下面是最常见的三个解决方法,都完善了…

旅游信息检索

旅游信息检索 旅游信息检索是系统中实现数据获取和处理的关键环节,负责根据用户输入的目的地城市和出游天数,动态获取并生成高质量的旅游数据。 模块的工作流程分为以下几个阶段:首先,对用户输入的信息进行标准化处理&#xff0…

机器学习笔记【Week2】

一、多变量线性回归(Multivariate Linear Regression) 为什么需要多变量? 现实问题中,一个目标可能受多个因素影响,比如预测房价时: x 1 x_1 x1​:面积 x 2 x_2 x2​:卧室数量 x 3…

Axure 基本用法学习笔记

一、元件操作基础 1. 可见性控制 隐藏/显示:可以设置元件的可见性,使元件在特定条件下隐藏或可见 应用场景:创建动态交互效果,如点击按钮显示隐藏内容 2. 层级管理 层级概念:元件有上下层关系,上层元件…

aws平台s3存储桶夸域问题处理

当我们收到开发反馈s3存在跨域问题 解决步骤: 配置 S3 存储桶的 CORS 设置: 登录到 AWS 管理控制台。转到 S3 服务。选择你存储文件的 存储桶。点击 权限 标签页。在 跨域资源共享(CORS)配置 部分,点击 编辑。 登陆…

【后端高阶面经:微服务篇】7、1秒响应保障:超时控制如何成为高并发系统的“救火队长”?

一、全链路超时建模:从用户需求到系统分解 1.1 端到端时间预算分配 黄金公式: 用户期望响应时间 = 网络传输时间 + 服务处理时间 + 下游调用时间 + 缓冲时间典型分配策略(以1秒目标为例): 环节时间预算优化目标客户端渲染100ms骨架屏(Skeleton)预渲染边缘节点(CDN)…

前端遇到高并发如何解决重复请求

在前端开发中遇到高并发场景时,若不加控制容易出现重复请求,这可能导致接口压力增加、数据异常、用户体验变差等问题。以下是前端防止/解决重复请求的常见方法,按不同场景归类总结: 🌟 一、常见重复请求场景 用户频繁点…

老牌协议再升级,Ethernet IP转Modbus TCP网关桥接精准灌装系统

对于消费品包装制造商而言,灌装机是最关键且昂贵的设备之一。然而,许多公司却难以应对生产过程中的灌装波动,从而造成严重的财务和生产后果。 在本次网络研讨会中,我们将探讨稳联技术的ethernet ip转modbus tcp(WL-ABC…

骰子游戏(2023睿抗省赛)

骰子游戏 题目描述: 在某个游戏中有一个骰子游戏。 在游戏中,你需要投掷 5 个标准六面骰子(骰子为一个正方体,6个面上分别有 1、2、3、4、5、6中的一个数字,骰子的质量均匀),投出的点数根据组合会获得一…

CMake跨平台编译生成:从理论到实战

一、引言 在当今软件开发中,跨平台开发已成为常态。无论是需要在Windows、Linux、macOS等多操作系统上运行,还是在不同的硬件架构(如x86、ARM等)间部署,跨平台编译生成都是一个无法回避的关键问题。CMake,…

Python经典算法实战

在编程的世界里,算法是解决问题的灵魂,而Python以其简洁优雅的语法成为实现算法的理想语言。无论你是初学者还是有一定经验的开发者,《Python经典算法实战》都能带你深入算法的殿堂,从理论到实践,一步步构建起扎实的编…

QT的自定义控件

1.比如对label控件进行提升为QPaintPointLabel类,基类选择QLabel,头文件建议加上相对路径,有时候VS识别不出来直接的头文件,在提升的类中重写pointEvent()函数。

flutter 常用组件详细介绍、屏幕适配方案

一、常用组件 1.基础组件 组件说明示例Text显示文本Text(‘Hello Flutter’, style: TextStyle(fontSize: 20))Image显示图片Image.network(‘https://example.com/image.jpg’)Icon显示图标Icon(Icons.home, size: 30, color: Colors.blue)RaisedButton / ElevatedButton按钮…

leetcode 17. Letter Combinations of a Phone Number

题目描述 17. Letter Combinations of a Phone Number 代码: class Solution {string table[10] {"","","abc","def","ghi","jkl","mno","pqrs","tuv","wxyz&qu…

Web前端大模型实战:端侧翻译+朗读流程线+模型音频数据编码 - 让网站快速支持多语言多模态输出

在以前的文章 前端大模型入门:实战篇之Vue3Antdvtransformers本地模型实现增强搜索 中介绍了前端使用大模型的文本RAG实现。本文将更进一步,介绍多模态输出的端侧实现。 本文将通过端侧大模型技术实现网页端的实时翻译与语音合成功能,无需服…

Python包管理工具uv 国内源配置

macOS 下 .config/uv/uv.toml内 pip源 [[index]] url "https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple/" default true#uv python install 下载源配置无效,需要在项目里配置 # python-install-mirror "https://mirror.nju.edu.cn/githu…