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

news2024/10/30 9:42:22

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; // 结果为 1

let 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); // 结果为 2

let 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 即错误对象 Error
  console.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.coloradmin.cn/o/1929764.html

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

相关文章

太速科技-FMC207-基于FMC 两路QSFP+光纤收发子卡

太速科技-FMC207-基于FMC 两路QSFP+光纤收发子卡

FMC207-基于FMC 两路QSFP光纤收发子卡 一、板卡概述 本卡是一个FPGA夹层卡&#xff08;FMC&#xff09;模块&#xff0c;可提供高达2个QSFP / QSFP 模块接口&#xff0c;直接插入千兆位级收发器&#xff08;MGT&#xff09;的赛灵思FPGA。支持利用Spartan-6、Virtex-6、Kin…
阅读更多...
Webpack看这篇就够了

Webpack看这篇就够了

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…
阅读更多...
java.sql.SQLException: Unknown system variable ‘query_cache_size‘【Pyspark】

java.sql.SQLException: Unknown system variable ‘query_cache_size‘【Pyspark】

1、问题描述 学习SparkSql中&#xff0c;将spark中dataframe数据结构保存为jdbc的格式并提交到本地的mysql中&#xff0c;相关代码见文章末尾。 运行代码时报出相关配置文件错误&#xff0c;如下。 根据该报错&#xff0c;发现网络上多数解决方都是基于java开发的解决方案&a…
阅读更多...
GPT-4从0到1搭建一个Agent简介

GPT-4从0到1搭建一个Agent简介

GPT-4从0到1搭建一个Agent简介 1. 引言 在人工智能领域&#xff0c;Agent是一种能够感知环境并采取行动以实现特定目标的系统。本文将简单介绍如何基于GPT-4搭建一个Agent。 2. Agent的基本原理 Agent的核心是感知-行动循环&#xff08;Perception-Action Loop&#xff09;…
阅读更多...
【Windows】系统盘空间不足？WizTree 和 DISM++ 来帮忙

【Windows】系统盘空间不足？WizTree 和 DISM++ 来帮忙

当您的系统盘空间接近饱和时&#xff0c;了解硬盘空间的使用情况变得尤为重要。在这种情况下&#xff0c;您可以利用 Windows 内置的存储使用工具来快速查看哪些文件和应用程序占用了大量空间&#xff0c;并采取相应措施进行清理。此外&#xff0c;第三方工具如 WizTree 可以提…
阅读更多...
Java NIO合并多个文件

Java NIO合并多个文件

NIO API java.nio (Java Platform SE 8 ) 直接上代码 package com.phil.aoplog.util;import lombok.extern.slf4j.Slf4j;import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.nio.channels.FileChannel;Slf4j public…
阅读更多...
勒索防御第一关 亚信安全AE防毒墙全面升级 勒索检出率提升150%

勒索防御第一关 亚信安全AE防毒墙全面升级 勒索检出率提升150%

亚信安全信舷AE高性能防毒墙完成能力升级&#xff0c;全面完善勒索边界“全生命周期”防御体系&#xff0c;筑造边界勒索防御第一关&#xff01; 勒索之殇&#xff0c;银狐当先 当前勒索病毒卷携着AI技术&#xff0c;融合“数字化”的运营模式&#xff0c;形成了肆虐全球的网…
阅读更多...
数据结构进阶：使用链表实现栈和队列详解与示例（C, C#, C++）

数据结构进阶：使用链表实现栈和队列详解与示例（C, C#, C++）

文章目录 1、 栈与队列简介栈&#xff08;Stack&#xff09;队列&#xff08;Queue&#xff09; 2、使用链表实现栈C语言实现C#语言实现C语言实现 3、使用链表实现队列C语言实现C#语言实现C语言实现 4、链表实现栈和队列的性能分析时间复杂度空间复杂度性能特点与其他实现的比较…
阅读更多...
VBA学习(21)：遍历文件夹（和子文件夹）中的文件

VBA学习(21)：遍历文件夹（和子文件夹）中的文件

很多时候&#xff0c;我们都想要遍历文件夹中的每个文件&#xff0c;例如在工作表中列出所有文件名、对每个文件进行修改。VBA给我们提供了一些方式&#xff1a;&#xff08;1&#xff09;Dir函数&#xff1b;&#xff08;2&#xff09;File System Object。 使用Dir函数 Dir…
阅读更多...
31.RAM-IP核的配置、调用、仿真全流程

31.RAM-IP核的配置、调用、仿真全流程

&#xff08;1&#xff09;RAM IP核简介 RAM是随机存取存储器&#xff08;Random Access Memory&#xff09;的简称&#xff0c;是一个易失性存储器&#xff0c;其工作时可以随时对任何一个指定地址写入或读出数据。&#xff08;掉电数据丢失&#xff09; &#xff08;2&#…
阅读更多...
Spring Cloud Gateway 入门与实战

Spring Cloud Gateway 入门与实战

一、网关 在微服务框架中&#xff0c;网关是一个提供统一访问地址的组件&#xff0c;它充当了客户端和内部微服务之间的中介。网关主要负责流量路由和转发&#xff0c;将外部请求引导到相应的微服务实例上&#xff0c;同时提供一些功能&#xff0c;如身份认证、授权、限流、监…
阅读更多...
【企业级监控】Zabbix监控MySQL主从复制

【企业级监控】Zabbix监控MySQL主从复制

Zabbix自定义监控项与触发器 文章目录 Zabbix自定义监控项与触发器资源列表基础环境前言四、监控MySQL主从复制4.1、部署mysql主从复制4.1.1、在两台主机&#xff08;102和103上安装&#xff09;4.1.2、主机102当master4.1.3、主机103当slave 4.2、MySQL-slave端开启自定义Key值…
阅读更多...
JMeter案例分享：通过数据验证的错误，说说CSV数据文件设置中的线程共享模式

JMeter案例分享：通过数据验证的错误，说说CSV数据文件设置中的线程共享模式

前言 用过JMeter参数化的小伙伴&#xff0c;想必对CSV Data Set Config非常熟悉。大家平时更关注变量名称&#xff0c;是否忽略首行等参数&#xff0c;其余的一般都使用默认值。然而我最近遇到一个未按照我的预想读取数据的案例&#xff0c;原因就出在最后一个参数“线程共享模…
阅读更多...
摄像头 RN6752v1 视频采集卡

摄像头 RN6752v1 视频采集卡

摄像头 AHD倒车摄像头比较好&#xff0c;AHD英文全名Analog High Definition&#xff0c;即模拟高清&#xff0c;拥有比较好的分辨率与画面质感。 RN6752v1 GQW AKKY2 usb 采集卡 FHD&#xff08;1080p&#xff09;、HD&#xff08;720p&#xff09;和D1&#xff08;480i&am…
阅读更多...
开始Linux之路

开始Linux之路

人生得一知己足矣&#xff0c;斯世当以同怀视之。——鲁迅 Linux操作系统简单操作指令 1、ls指令2、pwd命令3、cd指令4、mkdir指令(重要)5、whoami命令6、创建一个普通用户7、重新认识指令8、which指令9、alias命令10、touch指令11、rmdir指令 及 rm指令(重要)12、man指令(重要…
阅读更多...
C# Winform的三态CheckBox，以及批量修改Panel中的控件

C# Winform的三态CheckBox，以及批量修改Panel中的控件

在C# WinForms中&#xff0c;如果你想批量修改一个Panel容器内的所有CheckBox控件的状态&#xff0c;你可以使用foreach循环来遍历Panel的Controls集合。下面是一个示例&#xff0c;展示了如何将一个Panel内所有的CheckBox控件设为选中状态&#xff08;Checked true&#xff0…
阅读更多...
借助 Aspose.Words，在 C# 中将 Word 转换为 JPG

借助 Aspose.Words，在 C# 中将 Word 转换为 JPG

有时我们需要将 Word 文档转换为图片&#xff0c;因为 DOC 或 DOCX 文件在不同设备上的显示可能会有所不同&#xff0c;但图像&#xff08;例如 JPG 格式&#xff09;在任何地方看起来都一样。 Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作…
阅读更多...
超声波眼镜清洗机哪个牌子好？2024年超全热门眼镜清洗机推荐

超声波眼镜清洗机哪个牌子好？2024年超全热门眼镜清洗机推荐

夏天来了&#xff0c;在户外活动不到几分钟就已经大汗淋漓&#xff01;特别是汗珠一滴滴的挂在眼皮上往下坠落简直让戴眼镜的人苦不堪言&#xff01;虽说戴眼镜在现如今来看是非常普遍的一件事情&#xff0c;但是人们一直深受眼镜清洗的困扰&#xff01;很多朋友看到这里可能会…
阅读更多...
C++学习日记 | Lecture 9 类基础

C++学习日记 | Lecture 9 类基础

资料来源&#xff1a;南科大 余仕琪 C/C Program Design LINK&#xff1a; CPP/week09 at main ShiqiYu/CPP GitHub9.1-classes-and-objects_哔哩哔哩_bilibili9.2-constructors-and-destructors_哔哩哔哩_bilibili9.3-this-pointer_哔哩哔哩_bilibili9.4-const-and-static…
阅读更多...
好用的《身份证工具》插件，解锁6大实用功能

好用的《身份证工具》插件，解锁6大实用功能

在数据处理领域&#xff0c;超级处理器插件凭借其强大的功能和高效的性能&#xff0c;一直是Excel和WPS用户的心头好。而今&#xff0c;这一优秀插件再次迎来革新——身份证工具功能现已支持单独安装使用&#xff0c;为用户带来前所未有的便利与灵活性。 超级处理器下载与安装…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023