前端_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…

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

探索 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)则是…

大模型生图安全疫苗注入赛题解析(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/…

SpringColoud GateWay 核心组件

优质博文:IT-BLOG-CN 【1】Route路由: Gateway的基本构建模块,它由ID、目标URL、断言集合和过滤器集合组成。如果聚合断言结果为真,则匹配到该路由。 Route路由-动态路由实现原理: 配置变化Apollo 服务地址实例变化…

H3C设备连接方式

Console线本地连接 协议Serial,接口com口,波特率9600(设备管理器中查看com口) 适用于设备初次调试 使用Telnet远程访问 适用于设备上架配置好后的维护管理 使用SSH远程访问 数据传输过程加密,安全的远程访问

洞察数字化营销的本质

数字化营销,即借助互联网、移动互联网、社交媒体等数字技术与渠道实现营销目标。涵盖市场调研、品牌推广、产品销售到客户服务全过程。 其特点显著。精准定位是一大优势,利用大数据分析和人工智能,深入了解客户需求、兴趣和行为,精…

AdmX_new

0x00前言 因为环境问题,此次靶场都放在vm上。都为NAT模式。 靶机地址: https://download.vulnhub.com/admx/AdmX_new.7z 需要找到两个flag文件。 0x01信息搜集 搜集IP 确认目标IP为172.16.8.131,进一步信息搜集 获取端口开放情况,版本信…

多模态大语言模型(MLLM)-Blip3/xGen-MM

论文链接:https://www.arxiv.org/abs/2408.08872 代码链接:https://github.com/salesforce/LAVIS/tree/xgen-mm 本次解读xGen-MM (BLIP-3): A Family of Open Large Multimodal Models 可以看作是 [1] Blip: Bootstrapping language-image pre-training…

stm32 bootloader写法

bootloader写法: 假设app的起始地址:0x08020000,则bootloader的范围是0x0800,0000~0x0801,FFFF。 #define APP_ADDR 0x08020000 // 应用程序首地址定义 typedef void (*APP_FUNC)(void); // 函数指针类型定义 /*main函数中调用rum_app&#x…

【从零开始的LeetCode-算法】504. 七进制数

给定一个整数 num&#xff0c;将其转化为 7 进制&#xff0c;并以字符串形式输出。 示例 1: 输入: num 100 输出: "202"示例 2: 输入: num -7 输出: "-10"提示&#xff1a; -107 < num < 107 我的解答 class Solution {public String convertT…