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

JavaScript基础知识及高频用法

news 来源：原创 2025/5/15 1:26:07

一、语言基础：构建代码逻辑的积木

二、核心概念：理解JavaScript的灵魂

三、高频用法：现代开发必备技巧

四、避坑指南：常见错误与调试

五、学习路线与资源推荐

从入门到实战，掌握现代Web开发基石

作为全球使用最广泛的编程语言，JavaScript 不仅是前端开发的“灵魂”，更通过 Node.js 渗透到后端、移动端甚至物联网领域。本文将系统梳理 JavaScript 的核心语法与高频使用技巧，助你快速构建扎实的编码能力。

一、语言基础：构建代码逻辑的积木

1. 变量与数据类型

变量声明：

let age = 25;          // 可重新赋值
const PI = 3.14;       // 常量，不可重复声明
var legacyVar = "old"; // 避免使用（存在变量提升问题）

7种基本类型：
string、number、boolean、null、undefined、symbol（ES6）、bigint（ES11）

动态类型特性：

let dynamic = 'hello'; // string
dynamic = 100;         // 自动变为 number

2. 运算符与流程控制

严格相等判断：

1 == '1'   // true（隐式类型转换）
1 === '1'  // false（推荐使用）

现代循环语法：

// for...of 遍历数组
const colors = ['red', 'green', 'blue'];
for (const color of colors) {console.log(color); 
}

3. 函数：代码复用的核心单元

箭头函数（ES6+）：

// 传统函数
function add(a, b) { return a + b; }// 箭头函数简化
const multiply = (a, b) => a * b;

默认参数与剩余参数：

function greet(name = 'Guest', ...hobbies) {console.log(`Hello ${name}, hobbies: ${hobbies}`);
}

二、核心概念：理解JavaScript的灵魂

1. 作用域与闭包

块级作用域（ES6 let/const）：

if (true) {let blockScoped = 'visible only here';
}
console.log(blockScoped); // ReferenceError

闭包应用：创建私有变量

function createCounter() {let count = 0;return {increment: () => ++count,getCount: () => count};
}
const counter = createCounter();

2. 对象与原型链

对象字面量增强（ES6+）：

const key = 'dynamicKey';
const obj = {[key]: 'value',      // 动态属性名shorthandMethod() {  // 方法简写return 'Hello!';}
};

原型继承示例：

function Animal(name) {this.name = name;
}
Animal.prototype.speak = function() {console.log(`${this.name} makes a noise`);
};

3. 数组的高阶函数

链式处理数据：

const numbers = [1, 2, 3, 4];
const result = numbers.filter(n => n % 2 === 0).map(n => n * 2).reduce((sum, n) => sum + n, 0); // 输出：12

三、高频用法：现代开发必备技巧

1. DOM 操作与事件处理

元素查询与更新：

// 现代写法
document.querySelector('.btn').addEventListener('click', (e) => {e.target.textContent = 'Clicked!';
});

事件委托优化性能：

document.getElementById('list').addEventListener('click', (e) => {if (e.target.tagName === 'LI') {e.target.classList.toggle('selected');}
});

2. 异步编程模式

Promise 链式调用：

fetch('https://api.example.com/data').then(response => response.json()).then(data => processData(data)).catch(error => console.error('Error:', error));

async/await 终极方案：

async function loadData() {try {const response = await fetch('/api/data');const data = await response.json();return data;} catch (error) {console.error('Fetch failed:', error);}
}

3. 模块化开发（ES Modules）

导出与导入：

// utils.js
export const formatDate = (date) => { /* ... */ };
export default function logger(msg) { console.log(msg); }// app.js
import logger, { formatDate } from './utils.js';

四、避坑指南：常见错误与调试

1. 典型错误场景

意外全局变量：

function calculate() {result = 0; // 未使用 let/const/var → 变成 window.result
}

this 指向问题：

const obj = {value: 42,getValue: () => {console.log(this.value); // 箭头函数无自己的this → undefined}
};

2. 调试技巧

浏览器开发者工具：
- console.table() 展示结构化数据
- debugger 语句触发断点
- 网络面板分析请求

五、学习路线与资源推荐

夯实基础：
- MDN JavaScript 指南（官方权威文档）
- 《JavaScript高级程序设计》（红宝书）
实战提升：
- 构建 TodoList 应用（综合练习DOM/事件/状态管理）
- 开发天气查询小工具（实践API调用/异步处理）
进阶方向：
- TypeScript（添加静态类型系统）
- 框架学习（React/Vue 三大核心：组件化、响应式、虚拟DOM）

JavaScript基础知识及高频用法

目录一、语言基础：构建代码逻辑的积木二、核心概念：理解JavaScript的灵魂三、高频用法：现代开发必备技巧四、避坑指南：常见错误与调试五、学习路线与资源推荐从入门到实战，掌握现代Web开发基石作为全球使…...

编程日记 2025/5/15 1:26:07

VUE项目中实现权限控制，菜单权限，按钮权限，接口权限，路由权限，操作权限，数据权限实现

VUE项目中实现权限控制，菜单权限，按钮权限，接口权限，路由权限，操作权限，数据权限实现权限系统分类（RBAC）引言菜单权限按钮权限接口权限路由权限菜单权限方案方案一：菜单…...

编程日记 2025/5/4 23:52:59

多机器人系统的大语言模型：综述

25年2月来自 Drexel 大学的论文“Large Language Models for Multi-Robot Systems: A Survey”。大语言模型 (LLM) 的快速发展为多机器人系统 (MRS) 开辟新的可能性，从而增强通信、任务规划和人机交互。与传统的单机器人和多智体系统不同，MRS 带来独特…...

编程日记 2025/5/1 6:23:12

如何在 Java 应用中实现数据库的主从复制（读写分离）？请简要描述架构和关键代码实现？

在Java应用中实现数据库主从复制（读写分离） 一、架构描述 （一）整体架构主库（Master） 负责处理所有的写操作（INSERT、UPDATE、DELETE等）。它是数据的源头，所有的数据变…...

编程日记 2025/5/13 14:07:12

Redis 数据类型 Hash 哈希

在 Redis 中，哈希类型是指值本⾝⼜是⼀个键值对结构，形如 key "key"，value { { field1, value1 }, ..., {fieldN, valueN } }，Redis String 和 Hash 类型⼆者的关系可以⽤下图来表⽰。 Hash 数据类型的特点键值对集合…...

编程日记 2025/5/12 11:23:47

17.推荐系统的在线学习与实时更新

接下来就讲解推荐系统的在线学习与实时更新。推荐系统的在线学习和实时更新是为了使推荐系统能够动态地适应用户行为的变化，保持推荐结果的实时性和相关性。以下是详细的介绍和实现方法。推荐系统的在线学习与实时更新在线学习的概念在线学习（Onli…...

编程日记 2025/5/10 17:44:19

网络安全检测思路

对于主机的安全检测，我们通常直接采用nmap或者类似软件进行扫描，然后针对主机操作系统及其开放端口判断主机的安全程度，这当然是一种方法，但这种方法往往失之粗糙，我仔细考虑了一下，觉得按下面的流程进行…...

编程日记 2025/5/11 13:19:04

老游戏回顾：SWRacer

竞速类游戏里，我很怀念它。虽然已经25年过去了。相比之下，别的游戏真的没法形容。 ---- 是LucasArts制作的一款赛车竞速游戏； 玩家要扮演一名银河旅行者参加各种赛车比赛，赢得奖金，在经历了八个不同星球上的24场…...

编程日记 2025/5/15 1:09:28

MySQL面试题合集

1.MySQL中的数据排序是怎么实现的？回答重点排序过程中，如果排序字段命中索引，则利用索引排序。反之，使用文件排序。文件排序中，如果数据量少则在内存中排序，具体是使用单路排序或者双路排序。如果数据大则利用磁盘文件进行外部排序，一般使用归并排序。知识…...

编程日记 2025/5/14 9:44:27

如何在Java EE中使用标签库？

在Java EE（现在称为Jakarta EE）中使用标签库（Tag Library），主要是通过JSP标准标签库（JSTL）或自定义标签库来实现的。标签库允许在JSP页面中使用自定义的标签，从而简化页面逻辑、增强…...

编程日记 2025/5/13 5:55:35

第 12 天：行为树（Behavior Tree），让 AI 更智能！

🎯 目标： ✅ 理解 Unreal Engine 5 行为树（Behavior Tree） ✅ 创建行为树（BT）和黑板（Blackboard）管理 AI 状态 ✅ 使用任务（Task）让 AI 巡逻、追踪、攻击玩家…...

编程日记 2025/5/14 7:47:41

LabVIEW 用户界面设计基础原则

在设计LabVIEW VI的用户界面时，前面板的外观和布局至关重要。良好的设计不仅提升用户体验，还能提升界面的易用性和可操作性。以下是设计用户界面时的一些关键要点： 1. 前面板设计原则交互性：组合相关的输入控件和显示控件&#x…...

编程日记 2025/5/13 14:15:22

自然语言处理NLP入门 -- 第三节词袋模型与 TF-IDF

目标了解词袋模型（BoW）和 TF-IDF 的概念通过实际示例展示 BoW 和 TF-IDF 如何将文本转换为数值表示详细讲解 Scikit-learn 的实现方法通过代码示例加深理解归纳学习难点，并提供课后练习和讲解 3.1 词袋模型（Bag of Words, BoW&a…...

编程日记 2025/5/15 1:10:35

Flappy Bird开发学习记录

概述为了了解一下Unity的开发过程，或者说感受？先搞简单的练练手。工具 Unity:2022.3.51f1c1 visual studio 2022 开发过程项目基本设置新建2d项目，游戏画面设置为1080*1920（9：16）。图片素材设…...

编程日记 2025/5/10 0:01:18

Visual Studio 使用 “Ctrl + /”键设置注释和取消注释

问题：在默认的Visual Studio中，选择单行代码后，按下Ctrl /键会将代码注释掉，但再次按下Ctrl /键时，会进行双重注释，这不是我们想要的。实现效果：当按下Ctrl /键会将代码注释掉，…...

编程日记 2025/5/14 5:41:16

CTF-WEB: 利用Web消息造成DOM XSS

如果索引中有类似如下代码  <div idads> </div> <script>window.addEventListener(message, function(e) {document.getElementById(ads).innerHTML e.data;}); </script>这行代码的作用是将接收到的消息内容…...

编程日记 2025/5/15 1:05:31

2025 西湖论剑wp

web Rank-l 打开题目环境： 发现一个输入框，看一下他是用上面语言写的发现是python，很容易想到ssti 密码随便输，发现没有回显但是输入其他字符会报错确定为ssti注入开始构造payload， {{(lipsum|attr(‘global…...

编程日记 2025/5/15 1:15:12

常见的排序算法：插入排序、选择排序、冒泡排序、快速排序

1、插入排序步骤： 1.从第一个元素开始，该元素可以认为已经被排序 2.取下一个元素tem，从已排序的元素序列从后往前扫描 3.如果该元素大于tem，则将该元素移到下一位 4.重复步骤3，直到找到已排序元素中小于等于tem的元素…...

编程日记 2025/5/5 12:59:10

LVDS接口总结--(5)IDELAY3仿真

仿真参考资料如下： https://zhuanlan.zhihu.com/p/386057087 timescale 1 ns/1 ps module tb_idelay3_ctrl();parameter REF_CLK 2.5 ; // 400MHzparameter DIN_CLK 3.3 ; // 300MHzreg ref_clk ;reg …...

编程日记 2025/5/13 4:20:34

数据库的基本概念

在当今的信息时代，数据已成为企业乃至整个社会的重要资产。如何有效地存储、管理和利用这些数据成为了技术发展的关键领域之一。数据库系统作为数据管理的核心工具，在软件开发、数据分析等多个方面扮演着不可或缺的角色。本文将带你了解数据库的一些基本…...

编程日记 2025/5/11 15:07:29

Redis性能优化

1.是否使用复杂度过高的命令首先，第一步，你需要去查看一下 Redis 的慢日志（slowlog）。 Redis 提供了慢日志命令的统计功能，它记录了有哪些命令在执行时耗时比较久。查看 Redis 慢日志之前，你需要设置慢…...

编程日记 2025/5/8 14:42:35

CCF-CSP第34次认证第二题——矩阵重塑（其二）【需反复思考学习！！！】

第34次认证第二题——矩阵重塑（其二） 官网题目链接时间限制： 1.0 秒空间限制： 512 MiB 相关文件： 题目目录（样例文件） 题目背景矩阵转置操作是将矩阵的行和列交换的过程。在转置过程中&…...

编程日记 2025/5/10 6:13:46

大模型DeepSeek-R1学习

学习路线机器学习-> 深度学习-> 强化学习-> 深度强化学习大模型演进分支微调： SFT 监督学习蒸馏：把大模型作为导师训练小模型RLHF：基于人类反馈的强化学习 PPO 近端策略优化油门 - 重要性采样权重 * 打分刹车 - clip 修剪…...

编程日记 2025/5/10 8:34:03

Spring Cloud — 深入了解Eureka、Ribbon及Feign

Eureka 负责服务注册与发现；Ribbon负责负载均衡；Feign简化了Web服务客户端调用方式。这三个组件可以协同工作，共同构建稳定、高效的微服务架构。 1 Eureka 分布式系统的CAP定理： 一致性（Consistency）&am…...

编程日记 2025/5/13 23:51:50

《深度LSTM vs 普通LSTM：训练与效果的深度剖析》

在深度学习领域，长短期记忆网络（LSTM）以其出色的处理序列数据能力而备受瞩目。而深度LSTM作为LSTM的扩展形式，与普通LSTM在训练和效果上存在着一些显著的不同。训练方面参数数量与计算量：普通LSTM通常只有一层或较少…...

编程日记 2025/5/14 17:15:47

认识一下redis的分布式锁

Redis的分布式锁是一种通过Redis实现的分布式锁机制，用于在分布式系统中确保同一时刻只有一个客户端可以访问某个资源。它通常用于防止多个应用实例在同一时间执行某些特定操作，避免数据的不一致性或竞争条件。实现分布式锁的基本思路： 1. …...

编程日记 2025/5/15 0:59:58

untiy3D为游戏物体制作简单的动画

1.创建一个物体挂载动画组件Animator 2.创建一个动画控制器 3.动画控制器挂载到Animator组件 4.创建动画窗口>动画入口默认执行left 执行效果 20250212_151707 脚本控制动画鼠标点击是切换到动画t using System.Collections; using System.Collections.Generic; usi…...

编程日记 2025/5/12 10:49:36

微服务与网关

什么是网关背景单体项目中，前端只用访问指定的一个端口8080，就可以得到任何想要的数据微服务项目中，ip是不断变化的，端口是多个的解决方案：网关网关：就是网络的关口，负责请求的路由、转发、身份校验。前段还是访问之前的端口8080即可后端对于前端来说是透明的网…...

编程日记 2025/5/14 20:50:12

ArcGIS基础知识之ArcMap基础设置——ArcMap选项：常规选项卡设置及作用

作为一名 GIS 从业者，ArcMap 是我们日常工作中不可或缺的工具。对于初学者来说，掌握 ArcMap 的基础设置是迈向 GIS 分析与制图的第一步。今天，就让我们一起深入了解 ArcMap 选项中常规选项卡的各个设置，帮助大家更好地使用这款强大的软件。在 ArcMap 中，常规选项卡是用户…...

编程日记 2025/5/9 18:05:11

Ubuntu轻松部署ToolJet低代码开发平台结合内网穿透远程访问

文章目录前言1.关于ToolJet2.Docker部署3.简单使用演示4.安装cpolar内网穿透5. 配置公网地址6. 配置固定公网地址前言本文主要介绍如何在本地Linux服务器使用Docker部署轻量级开源文件分享系统ToolJet，并结合cpolar内网穿透工具轻松实现跨网络环境远程访问与使用…...

编程日记 2025/5/11 3:02:40

[MySQL]5-MySQL扩展（分片）

随着数据量和用户量增加，MySQL会有读写负载限制。以下是部分解决方案目录功能拆分使用读池拓展读（较复杂） 排队机制 🌟分片拓展写按业务或职责划分节点或集群大数据集切分分片键的选择多个分片键跨分片查询资料…...

编程日记 2025/5/12 17:13:28

如何使用 DeepSeek 帮助自己的工作

Hi，我是布兰妮甜 ！在当今快速发展的技术领域，人工智能（AI）工具已经成为提高工作效率、促进创新的重要助手。DeepSeek作为一款先进的AI解决方案，为用户提供了强大的数据处理、分析以及预测能力，可…...

编程日记 2025/5/9 23:29:31

Redis缓存穿透、击穿和雪崩面试相关问题整理

在互联网公司的面试中，Redis 的缓存穿透、击穿和雪崩是高频考点，尤其在北京的头部互联网公司（如字节、阿里、美团、快手等）。以下是针对这三个问题的详细解析及常见面试题方向： 一、缓存穿透（Cache Penetra…...

编程日记 2025/5/10 3:24:49

Flink之Watermark

Apache Flink 是一个分布式流处理框架，它非常擅长处理实时数据流。流处理中的一个关键挑战是事件时间的处理，因为在流式数据中，事件到达系统的顺序可能并不代表它们的实际发生时间。为了解决这一问题，Flink 引入了**Watermark&…...

编程日记 2025/5/6 0:51:57

vs构建网络安全系统网络安全和网络搭建

网站的组成和搭建网站由服务器，容器，脚本，数据库组成。服务器和家庭电脑一样。容器又为环境或服务：apache，lls，tomcat，nginx等脚本：php，aspx，asp&#x…...

编程日记 2025/5/12 8:02:58

缓存穿透问题及解决方案

一、什么是缓存穿透？ 在分布式系统中，缓存常常用于提高系统的性能，减轻数据库的压力。缓存穿透问题指的是请求的数据在缓存和数据库中都不存在，导致请求每次都直接查询数据库，无法从缓存中获取数据，从而绕…...

编程日记 2025/5/9 13:26:07

ElementUI el-popover弹框背景色设置

1.el-popover样式由于使用了 absolute 属性，导致脱离了节点，所以在父级元素使用class无法进行权重处理来修改其样式，解决方式如下：通过popper-class实现样式处理，避免全局样式污染 // html <el-popoverplacement&q…...

编程日记 2025/5/13 7:26:00

在 Mac ARM 架构上使用 nvm 安装 Node.js 版本 16.20.2

文章目录 1. 安装 nvm（如果还没有安装的话）2. 加载 nvm 配置3. 列出特定系列的 Node.js 版本（远程）：4. 安装 Node.js 16.20.25. 使用指定版本的 Node.js6. 验证安装在 Mac ARM 架构上使用 nvm 安装 Node.js 版本 16.…...

编程日记 2025/5/12 3:49:41

spring集成activiti流程引擎（源码）

前言 activiti工作流引擎项目，企业erp、oa、hr、crm等企事业办公系统轻松落地，请假审批demo从流程绘制到审批结束实例。源码获取：本文末个人名片直接获取。一、项目形式 springbootvueactiviti集成了activiti在线编辑器，流行…...

编程日记 2025/5/12 17:54:14

VLLM历次会议(2024.4)

Prefix Caching。预先算好KV cache，遇见公共前缀，复用之，避免再计算一遍。场景：1. 多轮对话。2.公共的system prompt。 Guided Decoding(格式化输出) 通过Outlines工具实现。支持正则表达式、JSON格式等。输入：…...

编程日记 2025/5/5 22:53:08

基于 Docker 搭建 Elasticsearch + Kibana 环境

一、Elasticsearch 1. 下载镜像 elasticsearch镜像不支持latest标签，必须指定版本号 % docker pull elasticsearch:8.17.2 2. 启动容器参考官方文档 https://www.elastic.co/guide/en/elasticsearch/reference/7.5/docker.html % docker run -p 9200:9200 -p 9…...

编程日记 2025/5/14 0:55:28

在 ARM64 架构系统离线安装 Oracle Java 8 全流程指南

在 ARM64 架构系统离线安装 Oracle Java 8 全流程指南文章目录在 ARM64 架构系统离线安装 Oracle Java 8 全流程指南一、引言二、下载前的准备2.1 确认系统架构2.2 注册 Oracle 账号三、从 Oracle 官方下载 Java 8 for ARM643.1 访问 Oracle Java 存档页面3.2 选择合适的版本…...

编程日记 2025/5/9 13:11:24

策略模式-小结

总结一下看到的策略模式： A:一个含有一个方法的接口 B:具体的实行方式行为1,2,3，实现上面的接口。 C:一个环境类（或者上下文类），形式可以是：工厂模式，构造器注入模式，枚举模式。 …...

编程日记 2025/5/3 13:31:10

记一次Self XSS+CSRF组合利用

视频教程在我主页简介或专栏里 （不懂都可以来问我专栏找我哦） 目录：　确认 XSS 漏洞确认 CSRF 漏洞这个漏洞是我在应用程序的订阅表单中发现的一个 XSS 漏洞，只能通过 POST 请求进行利用。通常情况下，基于 POST 的…...

编程日记 2025/5/10 9:17:45

VSCode + Continue 实现AI编程助理

安装VS Code 直接官网下载安装，反正是免费的。安装VS插件Continue 直接在插件市场中搜索， Continue，第一个就是了。配置Chat Model 点击Add Chat model后进行选择： 选择Ollama后，需要点击下面的config file : 由于…...

编程日记 2025/5/11 4:53:46

使用Typescript开发Babylon.js的Vue3模板参考

main.js文件 // main.ts import { createApp } from vue import App from ./App.vuecreateApp(App).mount(#app) App.vue文件  <template><div class"app-container"><BabylonScene /></div> </template><…...

编程日记 2025/5/12 13:54:18

STM32+Proteus+DS18B20数码管仿真实验

1. 实验准备硬件方面： 了解 STM32 单片机的基本原理和使用方法，本实验可选用常见的 STM32F103 系列。熟悉 DS18B20 温度传感器的工作原理和通信协议（单总线协议）。数码管可选用共阴极或共阳极数码管，用于显示温度值。…...

编程日记 2025/5/11 11:15:17

DeepSeek自然语言处理（NLP）基础与实践

自然语言处理（Natural Language Processing, NLP）是人工智能领域的一个重要分支，专注于让计算机理解、生成和处理人类语言。NLP技术广泛应用于机器翻译、情感分析、文本分类、问答系统等场景。DeepSeek提供了强大的工具和API，帮助我们高效地构建和训练NLP模型。本文将详细介…...

编程日记 2025/5/13 8:44:48

Baklib优化数字化内容管理用科技提升商业效率与增值潜力

内容概要在当今数字化迅速发展的时代，数字化内容管理已成为企业提升竞争力的重要手段。Baklib作为一款强大的智能优化内容管理系统，通过先进的科技手段，帮助企业在内容管理和数据整合方面实现高效运作。Baklib 是什么类型的工具&#xff0c…...

编程日记 2025/5/1 7:59:25

一、语言基础：构建代码逻辑的积木

二、核心概念：理解JavaScript的灵魂

三、高频用法：现代开发必备技巧

四、避坑指南：常见错误与调试

五、学习路线与资源推荐

相关文章：