当前位置：首页 > news >正文

JavaScript 知识点（从基础到进阶）

news 2026/4/3 21:44:13

🌏个人博客主页：心.c

前言：JavaScript已经学完了，和大家分享一下我的笔记，希望大家可以有所收获，花不多说，开干！！！

🔥🔥🔥专题文章：密码生成器

😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力 💓

js的三种书写方式：

行内：

内部：

外部：

js的输入输出：

输入语法：

注释：

变量：

数组：

定义数组：

数组的增删改查：

数据类型：

基本数据类型：

引用数据类型：

数据转换：

隐式转换：

显示转换：

运算符：

算数运算符：

比较运算符：

逻辑运算符：

一元运算符：

函数：

函数声明：

函数表达式：

立即执行表达式：

箭头函数：

对象：

对象的创建：

对象增删改查：

js的三种书写方式：

行内：

<body><button onclick="alert('行内')"></button>
</body>

内部：

<body><script>alert('内部')</script>
</body>

外部：

外部js标签中间不能书写东西

<body><!-- 引用外部js --><script src="./01.js.html"></script>
</body>

js的输入输出：

输入语法：

页面打印：

document.write('页面打印')

控制台打印：

console.log('控制台打印')

弹出界面：

  console.log('控制台打印')

输入语法：

 prompt('请输入信息')

注释：

单行注释：

//我是单行注释

多行注释：

/*我是多行注释*/

变量：

变量是用来储存数据的容器，简单理解就是一个盒子

    //声明并赋值一个年龄变量let age=18//输出alert(age)

    //声明一个年龄变量let age//赋值age = 18//输出alert(age)

数组：

定义数组：

let arr = [1, 2, 3, 4, 5];
console.log(arr); // 输出 [1, 2, 3, 4, 5]

数组的增删改查：

增加元素：

push ( ) 向数组的末尾添加一个或多个元素

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出 [1, 2, 3, 4]

unshift ( ) 向数组的开头添加一个或多个元素

const arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // 输出 [0, 1, 2, 3]

splice ( ) 可以在任意位置插入元素，并且可以同时删除元素。

const arr = [1, 2, 3];
arr.splice(1, 0, 1.5); // 在索引1的位置插入1.5
console.log(arr); // 输出 [1, 1.5, 2, 3]

删除元素：

pop()从数组的末尾移除一个元素，并返回该元素

const arr = [1, 2, 3];
const removed = arr.pop();
console.log(arr); // 输出 [1, 2]
console.log(removed); // 输出 3

shift()从数组的开头移除一个元素，并返回该元素。

const arr = [1, 2, 3];
const removed = arr.shift();
console.log(arr); // 输出 [2, 3]
console.log(removed); // 输出 1

splice()可以从数组中删除元素，并且可以同时插入元素。

const arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // 从索引1开始删除2个元素
console.log(arr); // 输出 [1, 4, 5]

修改元素：

可以直接通过索引访问和修改数组中的元素

const arr = [1, 2, 3];
arr[1] = 2.5;
console.log(arr); // 输出 [1, 2.5, 3]

查询元素：

返回数组中某个元素第一次出现的位置索引，如果不存在则返回-1

const arr = [1, 2, 3, 2, 4];
const index = arr.indexOf(2);
console.log(index); // 输出 1

数据类型：

基本数据类型：

基本数据类型是值类型，它们直接存储在栈内存中，而不是通过引用访问。当赋值给另一个变量时，复制的是具体的值，而不是引用。

1.number

表示数值，包括整数和浮点数。

let num = 42;

2.string

表示文本字符串。

let str = "Hello, world!";

3.boolean

表示逻辑值，只有true和false两个值

let flag = true;

4.undifined

表示尚未赋值的变量或函数返回的未定义值。

let x;
console.log(x); // 输出 undefined

5.null

表示空值或空对象指针。

let nothing = null;

引用数据类型：

1.对象

对象是键值对的集合，是最常用的复合数据类型之一。对象可以包含属性（键值对）和方法（函数）。

let person = {name: "Alice",age: 30,sayHello: function() {console.log("Hello, my name is " + this.name);}
};

2.数组

数组是一种特殊的对象，用于存储有序的元素列表。数组的元素可以是任何类型的数据。

let numbers = [1, 2, 3, 4, 5];
let mixed = ["apple", 42, true, {name: "Alice"}];console.log(numbers[0]); // 输出 1
console.log(mixed[3].name); // 输出 "Alice"

3.函数

函数也是一种对象，可以作为值进行传递，并且可以作为对象的属性或方法。

function greet(name) {console.log("Hello, " + name + "!");
}

数据转换：

隐式转换：

    console.log(11 + 11)  //numberconsole.log('11' + 11) //stringconsole.log('111') //stringconsole.log(+'123') //numberconsole.log(+'123' + 132) //number

显示转换：

      let str = '123'let num = Number(str) //numberlet num1 = +str //number

      let num = 123let str = String(num) //stringlet str1 = num.toStrign() //string

运算符：

算数运算符：

运算符	描述	示例
`+`	加法	`5 + 3`
`-`	减法	`5 - 3`
`*`	乘法	`5 * 3`
`/`	除法	`5 / 3`
`%`	取模（求余数）	`5 % 3`
`**`	幂运算（次方）	`2 ** 3`

比较运算符：

运算符	描述	示例
`==`	等于（值相等即可）	`5 == "5"`
`===`	严格等于（值和类型都相等）	`5 === "5"`
`!=`	不等于	`5 != 3`
`!==`	严格不等于	`5 !== "5"`
`<`	小于	`5 < 3`
`>`	大于	`5 > 3`
`<=`	小于等于	`5 <= 5`
`>=`	大于等于	`5 >= 5`

逻辑运算符：

运算符	描述	示例
`&&`	逻辑与（AND）	`true && false`
\|\|	逻辑或（OR)	`true && false`
`!`	逻辑非（NOT）	`!true`

一元运算符：

`++`	前置/后置自增	`++x` 或 `x++`
`--`	前置/后置自减	`--x` 或 `x--`
`+`	正号（强制转换为数字）	`+5`
`-`	负号（取反）	`-5`
`!`	逻辑非	`!true`
`typeof`	获取变量的类型	`typeof x`
`delete`	删除对象的属性	`delete obj.prop`

函数：

函数声明：

function greet(name) {console.log("Hello, " + name + "!");
}

函数表达式：

const greet = function(name) {console.log("Hello, " + name + "!");
};

立即执行表达式：

(function(name) {console.log("Hello, " + name + "!");
})("Charlie");

箭头函数：

const greet = (name) => {console.log("Hello, " + name + "!");
};

对象：

对象的创建：

使用字面量方式创建：

    //定义对象let obj = {name: '阿伟',age: 12,phone: 12323232323}console.log(obj)

使用构造函数创建

const person = new Object();
2person.name = "Bob";
3person.age = 25;

对象增删改查：

增加属性：

使用标点：

const person = {};
person.name = "Alice";
person.age = 30;

使用括号：

const person = {};
person["name"] = "Alice";
person["age"] = 30;

修改属性：

const person = {name: "Alice",age: 30
};person.age = 31;

删除属性：

const person = {name: "Alice",age: 30
};delete person.age;

查找对象属性：

const person = {name: "Alice",age: 30
};const keys = Object.keys(person);
console.log(keys); // 输出 ["name", "age"]

const person = {name: "Alice",age: 30
};const values = Object.values(person);
console.log(values); // 输出 ["Alice", 30]

const person = {name: "Alice",age: 30
};const entries = Object.entries(person);
console.log(entries); // 输出 [["name", "Alice"], ["age", 30]]

遍历对象：

const person = {name: "Alice",age: 30,city: "New York"
};for (const key in person) {if (person.hasOwnProperty(key)) {console.log(`${key}: ${person[key]}`);}
}
// 输出
// name: Alice
// age: 30
// city: New York

到这里就讲完了，感谢大家的观看！！！

JavaScript 知识点（从基础到进阶）

🌏个人博客主页：心.c 前言：JavaScript已经学完了，和大家分享一下我的笔记，希望大家可以有所收获，花不多说，开干！！！ 🔥🔥&#x1f5…...

编程日记 2024/9/7 22:58:17

计算机网络知识点复习——TCP协议的三次握手与四次挥手（连接与释放）

TCP协议的三次握手与四次挥手（连接与释放） 一、前言二、简单的知识准备1. TCP协议的主要特点2. TCP报文段三、TCP连接的建立（三次握手）四、TCP连接的释放（四次挥手）五、TCP连接与释放的总结六、结束语一、…...

编程日记 2024/9/7 22:57:16

SpringDataJPA系列(7)Jackson注解在实体中应用

SpringDataJPA系列(7)Jackson注解在实体中应用常用的Jackson注解 Springboot中默认集成的是Jackson，我们可以在jackson依赖包下看到Jackson有多个注解一般常用的有下面这些： 一个实体的示例测试方法如下： 按照上述图片中的序号做个简…...

编程日记 2024/9/7 22:56:15

【Spring Boot 3】【Web】统一封装 HTTP 响应体

【Spring Boot 3】【Web】统一封装 HTTP 响应体背景介绍开发环境开发步骤及源码工程目录结构总结背景软件开发是一门实践性科学，对大多数人来说，学习一种新技术不是一开始就去深究其原理，而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中，每次学习新技术总…...

编程日记 2024/9/7 22:51:03

Linux如何做ssh反向代理

SSH反向代理是一种通过SSH协议实现的安全远程访问方式，它允许客户端通过SSH连接到一台具有公网IP的代理服务器，然后这台代理服务器再将请求转发给内部网络中的目标主机。以下是实现SSH反向代理的步骤： 一、准备工作确保服务器配置&#xff…...

编程日记 2024/9/7 22:50:02

Verilog语法+:和-:有什么用?

Verilog语法:和-:主要用于位选择，可以让代码更简洁。一、位选择基础在Verilog中，位选择可以通过直接索引来实现，例如： reg [7:0] data; wire select_a; wire [2:0] select_b; assign select_a data[3]; assign select_b …...

编程日记 2024/9/7 22:49:00

stm32F103 串口2 中断无法接收指定字符串 [已解决]

stm32F103 串口2中断接收指定字符串 USART 初始化和中断配置示例中断处理函数示例关键点总结确保在串口配置中正确使能空闲中断 ( USART_IT_IDLE) 是关键。这个中断可以帮助你在串口接收一帧数据完成后，进行相应的处理和分析。为了确保你在串口配置时能避免类似问…...

编程日记 2024/9/7 22:45:36

Matlab/Simulink和AMEsim联合仿真（以PSO-PID算法为例）

目录安装软件和配置环境变量 Matlab/Simulink和AMEsim联合仿真详细流程非常重要的一点 Simulink模型和AMEsim模型用S-Function建立连接从AMEsim软件打开Matlab Matlab里的设置 Matlab的.m文件修改（对于PSO-PID算法） 运行程序我印象中好像做过…...

编程日记 2024/9/7 22:44:34

超声波测距模块HC-SR04（基于STM32F103C8T6HAL库）

超声波测距模块参考资料 1.电路连接及引脚配置触发信号PA3只需要输出10us的高电平，所以直接设置成普通的GPIO端口即可；回响信号使用外部中断，上升沿信号产生外部中断，打开定时器，下降沿再产生一次中断，读…...

编程日记 2024/9/7 22:43:34

Go语言结构体和元组全面解析

Go语言中的复合类型与其应用在编程中，标准类型虽然方便，但无法满足所有需求。Go通过支持结构体和元组类型，为开发者提供了自定义数据类型的能力。本文将介绍如何定义结构体、如何使用指针操作结构体、如何通过元组返回多个值等内容&#xf…...

编程日记 2024/9/7 22:42:33

集成电路学习：什么是SDK软件开发工具包

SDK：软件开发工具包 SDK，即Software Development Kit（软件开发工具包），是一套由软件提供商或其他组织提供的开发工具集合。这些工具旨在帮助开发者更快速、更便捷地创建、测试和部署软件应用程序。以下是对SDK的详细解…...

编程日记 2024/9/7 22:41:32

java后端如何发送http请求

用java后端发送请求需要用到的一个工具包为HttpClient。HttpClient是Apache的一个子项目，是高效的、功能丰富的支持HTTP协议的客户端编程工具包。引入依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId&…...

编程日记 2024/9/7 22:35:22

装WebVideoCreator记录

背景，需要在docker容器内配置WebVideoCreator环境，配置npm、node.js WebVideoCreator地址：https://github.com/Vinlic/WebVideoCreator 配置环境，使用这个教程： linux下安装node和npm_linux离线安装npm-CSDN博客 1…...

编程日记 2024/9/7 22:33:20

【编程底层思考】什么是GC Roots

在Java虚拟机（JVM）中，GC Roots是垃圾收集（Garbage Collection，GC）过程中的起点，用于确定对象是否可被回收。GC Roots集合是一组必须活跃的（即必须保留在内存中的）引用&am…...

编程日记 2024/9/7 22:32:19

[STL --stack_queue详解]stack、queue，deque,priority_queue，容器适配器

stack stack介绍 1、stack是一种容器适配器，专门用在具有后进先出操作的上下文环境中，其删除只能从容器的一端进行元素的插入与提取操作。 2、stack是作为容器适配器被实现的，容器适配器即是对特定类封装作为其底层的容器，并提供…...

编程日记 2024/9/7 22:31:18

240907-Gradio插入Mermaid流程图并自适应浏览器高度

A. 最终效果 B. 示例代码 import gradio as grmermaid_code """ <iframe srcdoc <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width" />…...

编程日记 2024/9/7 22:30:16

ubuntu 安装python3 教程

本篇教程，主要介绍如何在Ubuntu上安装python3教程。 1、查看是否有python 在安装前，首先看看自己系统上，是否存在python环境，可能有些系统，默认就安装过python，如果已经有python了，可以直接跳过安装教程。 2、安装步骤 apt update && apt install -y python3 p…...

编程日记 2024/9/7 22:29:15

NOR Flash、NAND Flash……

存储类型描述Compact Flash一种用于便携式电子设备的数据存储设备，于1994年由SanDisk公司推出。SRAM静态随机存取存储器，不需要刷新电路即能保存数据，速度快但集成度低、功耗大。PSRAM伪静态随机存取存储器，结合了SRAM和DRAM的特点…...

编程日记 2024/9/7 22:27:11

【高性能代码】提高代码的性能有哪些方式，如何写出高性能代码，一段代码如何提高这段代码的执行性能，高性能代码开发

【高性能代码】提高代码的性能有哪些方式，如何写出高性能代码，一段代码如何提高这段代码的执行性能，高性能代码开发提高代码的性能是软件开发中一个重要的方面，尤其是在处理大数据、高并发或实时性要求较高的应用时。以下是一些提…...

编程日记 2024/9/7 22:25:09

2024整理 iptables防火墙学习笔记大全_modepro iptables

Iptables名词和术语 2iptables表（tables）和链（chains） 2表及其链的功能 2  Filter表 2  NAT表 2  MANGLE表 2iptables的工作流程 3iptables表和链的工作流程图 3 二、 iptables实战应用 4iptables命令参数详解 4  iptable…...

编程日记 2024/9/7 22:24:08

CST可调谐太赫兹超材料吸收器仿真教学，石墨烯，二氧化钒，锑化铟等材料设置包括建模过程，后处理

CST可调谐太赫兹超材料吸收器仿真教学，石墨烯，二氧化钒，锑化铟等材料设置包括建模过程，后处理，吸收光谱图教学等包括宽带吸收器、窄带，以及宽窄带吸收器设计"打开CST微波工作室，先别急着…...

编程新知 2026/4/3 21:41:58

纸箱压缩试验机哪个好

在包装行业，纸箱抗压性能直接决定着产品运输安全、仓储效率和企业成本控制。而纸箱压缩试验机（抗压试验机）就是衡量纸箱是否“扛得住”的核心设备。面对市面上琳琅满目的品牌与型号，很多企业主都会问：纸箱压缩试验机哪…...

编程新知 2026/4/3 21:19:50

2.4.快速排序——先分区再递归，为什么它平均这么快却可能退化？

2.4.快速排序——先分区再递归，为什么它平均这么快却可能退化？ 系列：搜索与排序 | 第 4 篇，共 16 篇难度：⭐⭐⭐☆☆ 中等标签：排序快速排序分治随机化三路快排上一篇：2.3.插入排序——像…...

编程新知 2026/4/3 21:13:48

避坑指南：用OpenCV处理Kinetics-400数据集时，你可能遇到的3个典型问题及解决方案

避坑指南：用OpenCV处理Kinetics-400数据集时，你可能遇到的3个典型问题及解决方案处理大型视频数据集如Kinetics-400时，即使是最有经验的开发者也会遇到各种意料之外的问题。本文将深入探讨三个最常见的技术陷阱，并提供经过实战验…...

编程新知 2026/4/3 20:25:24

星闪实战指南：10分钟掌握WS63 SDK任务调度与调试技巧

1. 星闪WS63 SDK任务调度基础第一次接触星闪WS63 SDK的任务调度功能时，我完全被各种API搞晕了。经过几个项目的实战，才发现这套任务管理系统设计得非常巧妙。简单来说，它就像个智能管家，能帮你把各种工作安排得井井有条。任务调…...

编程新知 2026/4/3 20:23:20

操作系统与数据库系统的核心知识点，属于计算机科学与技术专业（尤其是考研408统考或相关课程）的重点复习提纲

操作系统与数据库系统的核心知识点，属于计算机科学与技术专业（尤其是考研408统考或相关课程）的重点复习提纲。以下是对各部分的简明梳理与关键点说明： ✅ 死锁处理预防：破坏死锁四个必要条件之一（互斥、占…...

编程新知 2026/4/3 19:02:28

快速启动Tensorboard并解决本地端口访问问题的实战指南

1. Tensorboard快速启动指南 Tensorboard是TensorFlow生态中不可或缺的可视化工具，它能直观展示模型训练过程中的损失曲线、准确率、计算图等重要信息。但很多新手在第一次使用时，常常卡在启动后无法访问的环节。这里分享我调试过上百个模型总结出的启动…...

编程新知 2026/4/3 18:09:34

Notepad--：当文本编辑遇到真正的跨平台解决方案

Notepad--：当文本编辑遇到真正的跨平台解决方案【免费下载链接】notepad-- 一个支持windows/linux/mac的文本编辑器，目标是做中国人自己的编辑器，来自中国。项目地址: https://gitcode.com/GitHub_Trending/no/notepad-- 你是否曾因…...

编程新知 2026/4/3 17:59:28

收藏备用！大模型3种调用模式详解，重点吃透RAG技术（小白/程序员入门必看）

对于刚接触大模型开发的小白、程序员来说，最困惑的莫过于“怎么用大模型”“如何避免AI瞎胡说”“不同场景该选哪种调用方式”。今天这篇文章，就把大模型最核心的3种调用模式讲透，重点拆解能解决AI幻觉、适配多场景的RAG技术，结合…...

编程新知 2026/4/3 17:10:48

D3KeyHelper深度评测：5大实战技巧提升暗黑破坏神3操作效率

D3KeyHelper深度评测：5大实战技巧提升暗黑破坏神3操作效率【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面，可自定义配置的暗黑3鼠标宏工具。项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 还在为暗黑破坏神3中复杂的技能…...

编程新知 2026/4/3 16:54:34

js的三种书写方式：

行内：

内部：

外部：

js的输入输出：

输入语法：

输入语法：

注释：

变量：

数组：

定义数组：

数组的增删改查：

数据类型：

基本数据类型：

引用数据类型：

数据转换：

隐式转换：

显示转换：

运算符：

算数运算符：

比较运算符：

逻辑运算符：

一元运算符：

函数：

函数声明：

函数表达式：

立即执行表达式：

箭头函数：

对象：

对象的创建：

对象增删改查：

相关文章：