JS【实用教程】（2024最新版）

JS 简介

JavaScript 简称 JS，可运行于浏览器 或 node 环境。

JS 的特点

  • 单线程——同一时间只能执行一个任务，多个任务时会排队，后续任务必须等到前一个任务结束才能开始执行。

    • 为什么JavaScript不能有多个线程？

      因为作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，会带来很复杂的同步问题。所以，为了避免复杂性，JavaScript只能是单线程，将来也不会改变。（为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。）

  • 遵循ECMAScript标准

    • ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定和发布的脚本语言规范。

  • 解释型语言：不需要事先被翻译为机器码（编译成计算机能够执行的指令），而是边翻译边执行（翻译一行，执行一行）

    • 开发方便、运行较慢

  • 以事件驱动为核心 —— JavaScript 与 HTML 之间的交互是通过事件实现

  • 弱类型 —— 对使用的数据类型没有严格的要求，可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。

  • 跨平台 —— JavaScript 可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。

运行流程

  1. 语法分析

  2. 预编译

    此阶段会完成变量和函数的声明（只是完成变量的声明，不会执行变量的赋值），所以即便函数调用在函数声明之前，也能正常执行。

    b();//b可以运行// 定义式函数——预编译时进行预处理
function b() { console.log('b') }

    a();//a未定义报错；// 变量赋值式函数——预编译时不进行预处理，待调用时才进行处理
let a = function () { console.log('a') }

  3. 解释执行

    • 函数覆盖

      fn();
function fn() {console.log(1);
}
function fn() {console.log(2);
}
// 控制台打印：“2”

    • 变量提升

      console.log(a);//存在a变量，但a为undefined;
console.log(b);//存在b变量，但b为undefined;
var a = 1;
var b = function () { };

浏览器对每个scrip

运行机制【重要】

  • 异步机制、同步任务、异步任务、宏任务、微任务、Event Loop 等
    https://blog.csdn.net/weixin_41192489/article/details/118984351

  • event loop(事件循环/事件轮询)
    https://blog.csdn.net/weixin_41192489/article/details/136565347

  • 代码的执行顺序
    https://blog.csdn.net/weixin_41192489/article/details/136591137

注释

单行注释 ctrl+/

// 单行注释

多行注释 ( 输入 /** 快捷触发)

/*** 函数 validateString* @param 参数 str* @returns 返回值 true/false*/

HTML中引入 JS

无论是哪种方式引入的 js ，同一个html文件中的 js 共享同一个作用域，不同 js 定义的变量是共用的。

  • 内嵌 js
    通常建议写在 body 标签的尾部，也有例外，如下例：
  <body><script>if (/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/.test(navigator.userAgent)) {// 若浏览器移动设备上的浏览器代码// location.href = '移动端代码的首页地址'}</script><div id="app"></div></body>
  • 外链 js
  <body><div id="app"></div><script type="module" src="/src/main.js"></script></body>

若是 url 地址的 js 文件，用 // 开头，以便自动加载当前协议（避免 https网站引用http路径的 js 失效）

异步加载外链 js
允许浏览器异步下载并执行JS文件，适用于不依赖于文档其他部分的脚本。

<script src="example.js" async></script>

延迟加载外链 js
允许浏览器异步下载JS文件，但要等HTML文档完全解析完毕才开始执行。

<script src="example.js" defer></script>

动态加载外链 js

// 动态加载js文件
function load_script(url) {let script = document.createElement("script");script.type = "text/javascript";script.src = url;document.getElementsByTagName("head")[0].appendChild(script);
}

专业术语

  • 标识符
    所有可以由我们自主命名的都可以称之为标识符。 例如：变量名、函数名、属性名都属于标识符。 标识符的命名规则和变量的命令规则是一样的。 不能使用脚本语言中保留的关键字及保留字。

JS 基础

数据类型

https://blog.csdn.net/weixin_41192489/article/details/140356210

对象【重要】

https://blog.csdn.net/weixin_41192489/article/details/140379356

数组【重要】

https://blog.csdn.net/weixin_41192489/article/details/140430116

数据类型转换

https://blog.csdn.net/weixin_41192489/article/details/140384210

JS 的内置对象

除了与数据类型对应的 Number 数值对象，String 字符串对象，Boolean 布尔对象 和 Object 外，还有：

Map

ES6 新增语法
https://blog.csdn.net/weixin_41192489/article/details/139259715

Set

ES6 新增语法
https://blog.csdn.net/weixin_41192489/article/details/139272800

时间日期 Date

https://blog.csdn.net/weixin_41192489/article/details/101347658

数学运算 Math

https://blog.csdn.net/weixin_41192489/article/details/140393654

正则表达式 RegExp

https://blog.csdn.net/weixin_41192489/article/details/113618913

Error

当程序中出现错误时，就会抛出一个Error 对象。

// 创建一个错误对象
let e = new Error("变量名不符合规范");// Error 对象的 name 属性 --- 报错的名称
console.log(e.name); // Error// Error 对象的 message 属性 --- 报错的详情
console.log(e.message); // 变量名不符合规范

派生出的其他报错对象有:

  • EvalError 执行错误
  • RangeError 范围错误
  • ReferenceError 引用错误
  • SyntaxError 语法错误
  • TypeError 类型错误
  • URIError URL错误

抛出错误 throw

  • 一般性的错误
throw new Error('Division by zero!');
  • 指定明确的错误类型
throw new RangeError('Division by zero!')
  • 抛出一个一般对象
throw {name: "MyError",message: "OMG! Something terrible has happened"
}

使用自定义的错误名解决浏览器之间由于抛出错误不相同所导致的问题。

JSON

JSON是 JavaScript 对象标记法（JavaScriptObjectNotation）的简称，是一个轻量级的数据交换格式，不是构造器（无法 new）

let obj = { a: 1 };
// JSON.stringify 用于将对象转为JSON 格式的字符串
let obj_str = JSON.stringify(obj); // 得到字符串 '{"a":1}'// JSON.parse 用于将JSON 格式的字符串转为对象
let obj2 = JSON.parse(obj_str); // 得到对象 { a: 1 }
// 此时 obj2 是对 obj 的一次深拷贝（此种方式仅适用于简易对象的深拷贝）

console

https://blog.csdn.net/weixin_41192489/article/details/123866661

声明常量和变量 const let var

https://blog.csdn.net/weixin_41192489/article/details/140352331

运算符

https://blog.csdn.net/weixin_41192489/article/details/140385858

【实战】精确计算

解决 js 四则运算精度缺失问题
https://blog.csdn.net/weixin_41192489/article/details/136381883

表达式

由运算符构成，会计算出一个值的语法结构。

// 【字面量】直接表示数据的值的一种语法，如 1, true，null,{} 等。// 字面量表达式
1; // 结果为 1let num = 1;// 正则表达式
/\d/;// 变量表达式
num; // 结果为 1// 关键字表达式
this; // 在浏览器中，结果为 Window 对象// 算术表达式
1 + 1; // 结果为 2// 关系表达式
1 === 1; // 结果为 true
2 > 1; // 结果为 true// 逻辑表达式
2 || 0; // 结果为 2
0 && 3; // 结果为 0// 三元表达式
2 > 1 ? "正确" : "错误"; // 结果为 '正确'// 函数定义表达式 ——  结果为 函数 sum
function sum(a, b) {return a + b;
}// 函数调用表达式
sum(1, 1); // 结果为 2let obj = {name: "朝阳",
};let list = [1, 2, 3];// 属性访问表达式
obj.name; // 结果为 "朝阳"
list[0]; // 结果为 1// 对象创建表达式
new Object(); // 结果为 一个空对象// 等等（能计算得到一个值的短语都是！）

语句

声明语句，赋值语句，条件判断语句，循环语句，中断语句 break，继续语句 continue，返回语句 return 等
https://blog.csdn.net/weixin_41192489/article/details/140397123

作用域

https://blog.csdn.net/weixin_41192489/article/details/124277123

函数 function

https://blog.csdn.net/weixin_41192489/article/details/140399891

类 class

https://blog.csdn.net/weixin_41192489/article/details/140329858

模块 module

含 ES6 模块规范 vs CommonJS 模块规范
https://blog.csdn.net/weixin_41192489/article/details/140344284

文档对象模型 DOM

https://blog.csdn.net/weixin_41192489/article/details/136595371

浏览器对象模型 BOM

https://blog.csdn.net/weixin_41192489/article/details/136606052

【实战】获取并解析 url 中参数

https://blog.csdn.net/weixin_41192489/article/details/114002034

本地存储【重要】

Cookie、sessionStorage、localStorage 的区别和用法，详见
https://blog.csdn.net/weixin_41192489/article/details/116882349

错误处理 try catch

try {// 可能存在报错的代码
} catch (e){  // 此处的 e 即错误对象 Errorconsole.log(e) // 可以是修复错误的代码，或打印错误内容
} finally {alert('Finally!'); // 无论是否报错，都会执行finally中的代码
}

JS 进阶

异步【重要】

  • js 【详解】异步-CSDN博客
    https://blog.csdn.net/weixin_41192489/article/details/136562732

  • js【详解】Promise-CSDN博客
    https://blog.csdn.net/weixin_41192489/article/details/136574223

  • js【详解】async await-CSDN博客
    https://blog.csdn.net/weixin_41192489/article/details/136578948

闭包【重要】

https://blog.csdn.net/weixin_41192489/article/details/124312822

设计模式

https://blog.csdn.net/weixin_41192489/article/details/116154815

JS 原理

原型 vs 原型链

https://blog.csdn.net/weixin_41192489/article/details/136529060

浅拷贝 VS 深拷贝

https://blog.csdn.net/weixin_41192489/article/details/109199611

  • 深拷贝的缺陷，5种手写深拷贝
    https://blog.csdn.net/weixin_41192489/article/details/119633624

  • 声明变量和变量赋值的原理（含浅拷贝详解）
    https://blog.csdn.net/weixin_41192489/article/details/136383302

JS 实战

等待接口访问成功后执行指定代码

https://blog.csdn.net/weixin_41192489/article/details/120725403

文件相关的处理

https://blog.csdn.net/weixin_41192489/article/details/140445407

CSS 样式相关的处理

https://blog.csdn.net/weixin_41192489/article/details/140445263

手机号脱敏

// 手机号码脱敏处理:方法1
var phone="13812345678";
var str=phone.substring(0,3)+"****"+phone.substring(7);
// 手机号码脱敏处理:方法2
var phone="13812345678";
var str=phone.substr(0,3)+"****"+phone.substring(7);
// 区别是：
// substring第一个参数是开始下标，第二个是结束下标
// substr第一个参数是开始下标，第二个是截取几位
// 手机号码脱敏处理:方法3
var phone="13812345678"
var pho=/(\d{3})\d*(\d{4})/
var str=phone.replace(pho,'$1****$2');
console.log(str)

代码调试 vs 优化

debugger 语句

https://blog.csdn.net/weixin_41192489/article/details/123872064

开发者工具

打开浏览器，鼠标右键，选择审核元素，在打开的开发者工具中，切换到控制台页签。（快捷键 Ctrl+Shift+i ）

  • Control 控制台页签 —— 可即时执行 JS 代码，查询当前页面的信息（Shift + Enter 可实现换行）
  • Element 元素页签 —— 查看并检查当前页面的DOM以及样式。
  • Network 网络页签 —— 各类网络请求相关的调试，例如实时监控某个资源在网络上的下载情况。
  • Sources 源代码/来源页签【最重要】—— 对JavaScript代码进行调试
    • 点击行号，添加断点
    • 刷新页面，代码会在断点处停止运行
    • 通过调试面板控制代码单步执行
    • Call Stack 中查看调用栈
    • Scope 中查看变量值

统计代码执行的时间

参数的值相同时，就会计时

console.time('obj find')
// 执行的代码
console.timeEnd('obj find')

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

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

相关文章

MiniCPM-V

MiniCPM-V

阅读更多...
BERT架构的深入解析

BERT架构的深入解析

BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是由Google在2018年提出的一种基于Transformer架构的预训练模型&#xff0c;迅速成为自然语言处理&#xff08;NLP&#xff09;领域的一个里程碑。BERT通过双向编码器表示和预训练策略&am…
阅读更多...
17-5 向量数据库之野望5 - 使用 Rust 实现矢量数据库

17-5 向量数据库之野望5 - 使用 Rust 实现矢量数据库

​​​​​​ 与存储标量数据（如整数、字符串等）的传统数据库不同，矢量数据库旨在有效地存储和检索矢量数据——表示多维空间中的点的数值集合。 本文将探讨如何在 Rust 中实现基本的向量数据库。 让我们开始吧！🦀 什么是矢量数据库？ 矢量数据库是一种针对存储和查询…
阅读更多...
Neo4j数据库相关

Neo4j数据库相关

Neo4j 使用指南 目录 什么是 Neo4jNeo4j 的特点Neo4j 的使用场景安装 Neo4j 使用 Docker 安装 Neo4j直接安装 Neo4j 启动和访问 Neo4j使用 Cypher 查询语言 创建节点和关系查询节点和关系更新和删除操作 使用 Python 访问 Neo4j 安装 py2neoPython 代码示例 高级功能和扩展 插…
阅读更多...
十年笃行，拥抱世界，JumpServer开源堡垒机v4.0正式发布

十年笃行，拥抱世界，JumpServer开源堡垒机v4.0正式发布

2024年7月15日&#xff0c;JumpServer开源堡垒机正式发布v4.0版本。在JumpServer开源堡垒机v4.0版本的设计过程中&#xff0c;JumpServer开源项目组继续秉持“内外兼修”的原则&#xff0c;并且开始迈步走向全球化&#xff0c;同时进一步提升用户的使用体验&#xff0c;真正用心…
阅读更多...
25_Vision Transformer原理详解

25_Vision Transformer原理详解

1.1 简介 Vision Transformer (ViT) 是一种将Transformer架构从自然语言处理(NLP)领域扩展到计算机视觉(CV)领域的革命性模型&#xff0c;由Google的研究人员在2020年提出。ViT的核心在于证明了Transformer架构不仅在处理序列数据&#xff08;如文本&#xff09;方面非常有效&…
阅读更多...
【C++精华铺】12.STL list模拟实现

【C++精华铺】12.STL list模拟实现

1.序言 STL (Standard Template Library)是C标准库中的一个重要组件&#xff0c;提供了许多通用的数据结构和算法。其中&#xff0c;STL list是一种带头双向链表容器&#xff0c;可以存储任意类型的元素。 list的特点包括&#xff1a; 双向性&#xff1a;list中的元素可以根据需…
阅读更多...
怎样去除视频上的水印和文字，视频水印文本移除教程

怎样去除视频上的水印和文字，视频水印文本移除教程

在观看和分享视频时&#xff0c;我们经常会遇到带有水印或额外文字的情况。这些标记有时是为了版权保护&#xff0c;有时则是平台的标识&#xff0c;但在某些情况下&#xff0c;它们可能会干扰视频的观赏体验。本文将向你介绍常见的视频水印类型以及如何使用简鹿水印助手去除这…
阅读更多...
浅谈安数云智能安全运营管理平台：DCS-SOAR

浅谈安数云智能安全运营管理平台：DCS-SOAR

SOAR&#xff08;security orchestration&#xff0c;automation and response&#xff09;&#xff0c;由Gartner于2015年提出&#xff0c;最初的含义是安全运营、分析与报告。2017年&#xff0c;Gartner又重新定义了SOAR的能力&#xff0c;包括安全编排、安全自动化和安全响应…
阅读更多...
Purple Pi OH在Android11下测试WiFi和LAN的TCP和UDP传输速率

Purple Pi OH在Android11下测试WiFi和LAN的TCP和UDP传输速率

本文适用于在Purple Pi OH在Andriod11下如何测试WiFi和LAN的TCP和UDP传输速率。触觉智能的Purple Pi OH鸿蒙开源主板&#xff0c;是华为Laval官方社区主荐的一款鸿蒙开发主板。 该主板主要针对学生党&#xff0c;极客&#xff0c;工程师&#xff0c;极大降低了开源鸿蒙开发者的…
阅读更多...
AI安全系列——[第五空间 2022]AI（持续更新）

AI安全系列——[第五空间 2022]AI（持续更新）

最近很长时间没有更新&#xff0c;其实一直在学习AI安全&#xff0c;我原以为学完深度学习之后再学AI安全会更加简单些&#xff0c;但是事实证明理论转实践还是挺困难的&#xff0c;但是请你一定要坚持下去&#xff0c;因为“不是所有的坚持都有结果&#xff0c;但总有一些坚持…
阅读更多...
QT简介、安装与运行

QT简介、安装与运行

QT5.9.0 安装 下载地址&#xff1a;https://download.qt.io/archive/qt/ 安装过程&#xff0c;直接点击下一步&#xff0c;设置勾选如下&#xff1a; 下载VS编译插件地址如下&#xff08;已安装vs&#xff09;&#xff1a; https://download.qt.io/archive/vsaddin/2.3.2/
阅读更多...
【ARMv8/v9 异常模型入门及渐进 9.1 - FIQ 和 IRQ 打开和关闭】

【ARMv8/v9 异常模型入门及渐进 9.1 - FIQ 和 IRQ 打开和关闭】

请阅读【ARMv8/v9 ARM64 System Exception】 文章目录 FIQ/IRQ Enable and Disable汇编指令详解功能解释使用场景和注意事项 FIQ/IRQ Enable and Disable 在ARMv8/v9架构中&#xff0c;可以使用下面汇编指令来打开FIQ和 IRQ,代码如下&#xff1a; asm volatile ("msr da…
阅读更多...
敏捷营销在AI智能名片微信小程序中的应用探索

敏捷营销在AI智能名片微信小程序中的应用探索

摘要&#xff1a;在数字化转型的浪潮中&#xff0c;企业面临着前所未有的挑战与机遇。AI智能名片微信小程序作为一种创新的营销工具&#xff0c;以其便捷性、智能化和高效性&#xff0c;正逐步成为企业连接客户、推广品牌的新宠。然而&#xff0c;如何在快速变化的市场环境中&a…
阅读更多...
docker 安装 onlyoffice

docker 安装 onlyoffice

1.文档地址 Installing ONLYOFFICE Docs for Docker on a local server - ONLYOFFICE 2.安装onlyoffice docker run -i -t -d -p 9000:8000 --restartalways -e JWT_ENABLEDfalse onlyoffice/documentserver 如果发现镜像无法下载,可以尝试更换镜像源 {"registry-mir…
阅读更多...
ES6 Symbol （十三）

ES6 Symbol （十三）

ES5的对象属性名都是字符串&#xff0c;这容易造成属性名的冲突。比如&#xff0c;你使用了一个他人提供的对象&#xff0c;但又想为这个对象添加新的方法&#xff08;mixin 模式&#xff09;&#xff0c;新方法的名字就有可能与现有方法产生冲突。如果有一种机制&#xff0c;保…
阅读更多...
flutter实现语言的国际化

flutter实现语言的国际化

目录 前言 一、GetX实现国际化(推荐) 1.安装Getx 2.创建国际化的文件 3.使用国际化字符串 4.配置GetMaterialApp 5.更改语言 6.系统语言 ​编辑 7.原生工程配置 1.iOS工程配 1.打开iOS工程&#xff0c;在Project的info里面添加语言 2.创建String File文件 2.andr…
阅读更多...
Milvus 核心设计（5）--- scalar indexwork mechanism

Milvus 核心设计（5）--- scalar indexwork mechanism

目录 背景 Scalar index 简介 属性过滤 扫描数据段 相似性搜索 返回结果 举例说明 1. 属性过滤 2. 扫描数据段 3. 相似性搜索 实际应用中的考虑 Scalar Index 方式 Auto indexing Inverted indexing 背景 继续Milvus的很细设计&#xff0c;前面主要阐述了Milvu…
阅读更多...
从零开始搭建vue框架

从零开始搭建vue框架

流程图 开始 | |-- 2013 年底&#xff0c;尤雨溪开始开发 Vue 框架&#xff0c;最初命名为 Seed&#xff0c;后更名为 Vue | |-- 2013 年 12 月&#xff0c;Vue 0.6.0 版本 | |-- 2014 年 1 月 24 日&#xff0c;Vue 0.8.0 版本发布 | |-- 2014 年 2 月 25 日&#xff0c;…
阅读更多...
智能招聘系统的AI功能解析

智能招聘系统的AI功能解析

一、引言 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;技术正逐步渗透到各个领域&#xff0c;为企业带来前所未有的变革。在人力资源管理领域&#xff0c;智能招聘系统的出现&#xff0c;不仅大大提高了招聘效率&#xff0c;还为企业带来了更精准、更科…
阅读更多...
最新文章

Copyright @ 2022~2023