前端_003_js扫盲

文章目录

  • var,let,const
  • 严格模式
  • 数据类型
  • 运算符
  • 事件
  • 常用对象
  • 函数绑定
    • call() ,apply(),bind()
  • 闭包
  • 浏览器中事件循环
  • 回调和异步
    • Promise
    • async和await
  • DOM
  • BOM
  • Ajax

var,let,const

let是var的升级版本,对于块作用域,var无法进行限制,let不会存在该问题

另外对于var的声明会进行提升,初始化不会进行提升

严格模式

在脚本或者函数开头添加"use strict"

数据类型

类型描述
numberjs里12==12.0 因为只有一种数字类型
string
boolean
undefined没有值的变量
object
function

注意:NaN和任何值都不相等

运算符

= 前者会自动转类型,后者会严格比较类型

算符描述
typeof返回变量的类型。
instanceof返回 true,如果对象是对象类型的实例。

事件

严格意义上指的是html的DOM事件,可以绑定js函数

onchangeHTML 元素已被改变
onclick用户点击了 HTML 元素
onmouseover用户把鼠标移动到 HTML 元素上
onmouseout用户把鼠标移开 HTML 元素
onkeydown用户按下键盘按键
onload浏览器已经完成页面加载

参考手册参照如下:

https://www.w3school.com.cn/jsref/dom_obj_event.asp

常用对象

数组
let array = [1,'2'];日期
let date = new Date();JSON对象
var obj = JSON.parse(text);  // JSON字符串转对象
var jsonText = JSON.stringify(book); //对象转JSON字符串Set对象
const letters = new Set(["a","b","c"]);
、
Map对象
const maps= new Map([[1],[2]])

函数绑定

call() ,apply(),bind()

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

call和apply是每个函数的方法,可以修改主体对象引用

函数回调时this会丢失,此时用bind函数

闭包

js中只有全局作用域和函数作用域

如果想实现一个私有的变量,则需要用到闭包(有权访问父作用域的函数)

var add = (function () {var counter = 0;return function () {return counter += 1;}
})();add();
add();
add();// 计数器目前是 3 

浏览器中事件循环

1.浏览器中JS是单线程的,会将同步代码按顺序放在执行栈,依次执行,遇到异步任务时交给其他线程处理,

待当前执行栈所有同步代码执行完后,从任务队列(存放已完成的异步任务)循环检测并取出回调加入执行栈继续执行,有异步任务再交给其他线程,循环往复

2.宏任务和微任务队列是2个不同的队列

事件循环的过程中,执行栈在同步代码执行完成后,优先检查微任务队列是否有任务需要执行,如果没有,再去宏任务队列检查是否有任务执行,如此往复。微任务一般在当前循环就会优先执行,而宏任务会等到下一次循环,因此,微任务一般比宏任务先执行,并且微任务队列只有一个,宏任务队列可能有多个。另外我们常见的点击和键盘等事件也属于宏任务。

常见宏任务 setTimeout(),setInterval(0)

常见微任务 promise.then() promise.catch()

当然这个事件循环机制在浏览器和nodejs里不太一样,具体问题具体分析

回调和异步

1.回调就是函数入参里有函数

2.异步函数

setTimeout() 等待超时

setInterval() 等待间隔

一般异步都是用Promise对象

Promise

new Promise() 执行同步方法

new Promise((resolve,reject)=>{resolve()reject()
}).then(a=>{}).catch(e=>{consoloe.log(e)
})

then() ,catch() 执行异步方法

一般使用都是框架封装的,底层都是用的Promise对象

async和await

async修饰异步函数,修饰返回Promise.resolve(返回值) 得到一个promise对象

await只能用在async函数里,修饰一个Promise对象,如果不是promise对象,会自动修饰Promise.resolve()

await可以理解为then的语法糖,也是一个微任务,但会暂时阻塞后面的代码(这里的阻塞个人理解是后面的代码还是会放到执行栈中,在await修饰的微任务执行完后会立刻执行),否则下面的代码执行顺序无法解释…


async function async1() {console.log('async1 start')let a=await async2()console.log(a)console.log('async1 end')
}async function async2() {console.log('async2')return "async2 finish"
}console.log('script start')
setTimeout(function() {console.log('setTimeout')
}, 0)async1(); new Promise( function( resolve ) {console.log('promise1')resolve();
} ).then( function() {console.log('promise2')
} )console.log('script end')script start
async1 start
async2
promise1
script end
//上面为同步任务
async2 finish //微任务1
async1 end  //同步任务
promise2 //微任务2
setTimeout //宏任务

DOM

就是html => js对象, document对象,后续基本都用的框架封装,原生的基本用不到

BOM

浏览器提供的对象

window对象

screen对象

location对象

navigator对象

history对象

弹出框方法 alert(),confirm(),prompt()

计时器方法(也是window对象提供的方法)

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。

setInterval(function, milliseconds)

cookie是document对象的属性,操纵cookie

Ajax

浏览器提供的http线程,使用XMLHttpRequest 对象会遇到跨域问题,url请求和当前网页必须同域。

经验上我感觉大多是用框架封装后的Ajax进行http请求

// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();// 定义回调函数
xhttp.onload = function() {// 您可以在这里使用数据
}// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

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

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

相关文章

营销邮件软件:提升邮件营销效率必备工具!

营销邮件软件选择技巧?免费高效的邮件营销软件推荐? 如何高效地管理和优化邮件营销活动成为了企业面临的一大挑战。营销邮件软件成为提升邮件营销效率的必备工具。MailBing将深入探讨营销邮件软件的功能、优势以及如何选择合适的工具。 营销邮件软件&a…

【深度学习】transformer为什么使用多头注意力极致?为什么不使用一个头

在现代深度学习中,Transformer 模型的多头注意力机制已被广泛应用,特别是在自然语言处理领域。最近我读到一篇有趣的博客文章,详细介绍了为什么 Transformer 采用多头注意力,而不是简单的单头注意力。文章从理论推导到代码实现,对多头注意力机制进行了深入分析。下面我为大…

前端新手教程:HTML、CSS 和 JavaScript 全面详解及实用案例

一、引言 在当今数字化的时代,前端开发扮演着至关重要的角色,它决定了用户与网页和应用程序交互的体验。HTML、CSS 和 JavaScript 作为前端开发的核心技术,分别负责网页的结构、样式和交互。本教程将为前端新手全面深入地介绍 HTML、CSS 和 …

element checkbox选框和文字分开点击---更改一列checkbox的顺序(进阶版)

选框和文字分开点击,找了很多,没有我想要的效果,但也借鉴了一下,实现了,记录一下 样式看起来倒是没多大区别,需求: 勾选了选框才可以点击文字 ,一次只能点击一条数据,点…

【分布式微服务云原生】《微服务架构大揭秘:关键组件全览与实战指南》

标题:《微服务架构大揭秘:关键组件全览与实战指南》 摘要:本文深入详解微服务架构及其关键组件,包括服务网关、配置中心、熔断器、负载均衡、限流降级和服务注册与发现的核心功能特点、技术选型以及注意事项。读者将全面了解微服…

中阳金融市场中的风险管理与投资优化策略

在全球经济波动性不断加剧的背景下,金融市场的复杂性与不确定性显著增加。作为国际金融市场中的重要组成部分,中阳金融市场吸引了大量投资者的关注。面对风险与机遇并存的市场环境,如何合理制定风险管理与投资优化策略,成为投资者…

Parameter-Efficient Fine-Tuning for Large Models: A Comprehensive Survey阅读笔记

Parameter-Efficient Fine-Tuning for Large Models: A Comprehensive Survey 综述阅读笔记 仅记录个人比较感兴趣的部分 基本知识 PEFT的三种分类:additive, selective, reparameterized, and hybrid fine-tuning selective fine-tuning 不需要任何额外的参数&am…

Axure横向菜单高级交互

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! 课程主题:横向菜单高级交互 主要内容:横向菜单左右拖动、选中效果 应用场景:app横向菜单、pc后台动态区域 案例展示: 演…

SpringBoot技术的车辆管理流程自动化

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式,是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示: 图4-1系统工作原理…

uniapp-实现天地图以及行政区划图层覆盖

前言: 在uniapp中,难免会遇到使用地图展示的功能,但是百度谷歌这些收费的显然对于大部分开源节流的开发者是不愿意接受的,所以天地图则是最佳选择。 此篇文章,详细的实现地图展示功能,并且可以自定义容器宽…

儿童服装CPC认证的测试项目有哪些

儿童服装CPC认证的测试项目主要包括以下几个方面: 一、物理性能测试 小零件测试:检查产品是否含有小零件,避免对3岁及以下儿童造成窒息风险。这包括检查服装上的纽扣、拉链、装饰物等小部件是否牢固,以及是否容易脱落。锐点&…

探索 Jupyter 笔记本转换的无限可能:nbconvert 库的神秘面纱

文章目录 探索 Jupyter 笔记本转换的无限可能:nbconvert 库的神秘面纱背景:为何选择 nbconvert?库简介:nbconvert 是什么?安装指南:如何安装 nbconvert?函数用法:简单函数示例应用场…

安装vue发生异常:npm ERR! the command again as root/Administrator.

一、异常 npm ERR! The operation was rejected by your operating system. npm ERR! Its possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If you believe this might b…

安卓开发中轮播图和其指示器的设置

在安卓开发中,轮播图(Carousel)是一种常见的UI组件,用于展示一系列图片或内容,用户可以左右滑动来切换不同的视图。轮播图通常用于展示广告、新闻、产品图片等。 轮播图的指示器(Indicator)则是…

LlamaIndex 针对数据集表格数据的Pandas 查询引擎

Pandas简介 Pandas 是一个强大的数据处理和分析库,广泛应用于 Python 数据科学和机器学习领域。它提供了丰富的数据结构和数据操作工具,使得数据清洗、转换、合并、重塑、选择等任务变得更加简单高效。以下是 Pandas 的一些主要特点和常用功能&#xff…

大模型生图安全疫苗注入赛题解析(DataWhale组队学习)

引言 大家好,我是GISer Liu😁,一名热爱AI技术的GIS开发者。本系列文章是我跟随DataWhale 2024年10月实践赛的大模型生图安全疫苗注入赛道;本文主要整理本次赛事的基本流程和优化方法。💕💕😊 一…

IEC104规约的秘密之九----链路层和应用层

104规约从TCP往上,分成链路层和应用层。 如图,APCI就是链路层,ASDU的就是应用层 我们看到报文都是68打头的,因为应用层报文也要交给链路层发送,链路层增加了开头的6个字节再进行发送。 完全用于链路层的报文每帧都只有…

好用,易用,高效,稳定 基于opencv 的 图像模板匹配 - python 实现

在定位、搜索固定界面图块时,经常用到模板匹配,opencv自带的图像模板匹配好用,易用,高效,稳定,且有多种匹配计算方式。 具体示例如下: 模板图: 待搜索图: 具体实现代码…

FreeRTOS - 任务管理

在学习FreeRTOS过程中,结合韦东山-FreeRTOS手册和视频、野火-FreeRTOS内核实现与应用开发、及网上查找的其他资源,整理了该篇文章。如有内容理解不正确之处,欢迎大家指出,共同进步。 参考:https://rtos.100ask.net/zh/…

【C++刷题】力扣-#219-存在重复元素II

题目描述 给定一个整数数组 nums 和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j 使得 nums[i] nums[j] 且 i! j。也就是说,不能有重复的元素。 示例 示例 1: 输入: nums [1,2,3,1], k 3 输出: true示例 2: 输入: nums [1,2,3,1,2,4], k …