跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

JavaScript 基础语法与核心概念详解

JavaScript 是一种用于网页交互的高级脚本语言，与 HTML 和 CSS 共同构成前端开发核心。内容涵盖 JavaScript 的基础引入方式、变量声明规范（var、let、const）、常用运算符及类型转换规则。详细讲解了基本数据类型（Number、String、Boolean 等）与引用类型（数组、对象），包括数组的创建、遍历、增删改操作。此外还介绍了函数的定义与调用机制，以及对象的字面量创建、构造函数和属性操作方法。适合初学者快速掌握 JavaScript 核心语法。

ByteFlow发布于 2026/3/25更新于 2026/9/353 浏览
JavaScript 基础语法与核心概念详解

JavaScript 基础教程

一、什么是 JavaScript？

定义

JavaScript（简称 JS），是一种脚本语言，高级编程语言。主要用于为网页添加交互性和动态功能，是前端开发的核心技术之一（与 HTML 和 CSS 并称网页三要素）。

JavaScript、HTML 和 CSS 之间的关系

  • HTML：负责网页结构，相当于网页的'骨架'。
  • CSS：负责网页的样式，相当于网页的'外观'。
  • JavaScript：负责网页的交互逻辑，相当于网页的'行为'。

JavaScript 和 Java 之间的关系

JavaScript 和 Java 虽然名字相似，但本质上是两门独立的语言，更多是历史营销原因。就像'雷锋'和'雷峰塔'，'老婆'和'老婆饼'一样，没有直接关联。

二、JavaScript 的使用

引入方式

行内脚本：直接嵌入到 html 元素内部

<script>alert("hello")</script>

外部脚本：定义 <script> 标签，用 src 引入外部 js 文件

<script src="hello.js"></script> // hello.js 文件内容 alert("hello");

内部脚本：定义 <script> 标签，写到 script 标签中

<input type="button" value="点击一下" onclick="alert('hello')">

基础语法

这里先说一下 JavaScript 常用的控制台信息输出工具 console.log

<script> console.log(1.02); </script>

在浏览器中点击快捷键 F12，显示开发者工具面板，点击 Console，会显示输出信息。

变量声明

  • var：早期声明变量，作用域在该语句的函数内，也就是在所在函数内都可以访问，用的不多；
  • let：新增的声明变量，作用域在语句所在的代码块，在 {} 都可以访问；
  • const：声明常量，声明后不能修改，否则会报错。
<script>  age1=; .(age1);  age2=; .(age2);  age3=;
var
11
console
log
let
12
console
log
const
13
// age3=13; 常量声明，修改报错 console.log(age3); </script>

JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值，随着程序的运行，类型也会改变。

<script> var age1=11; age1="abc" console.log(age1); let age2=12; age2=true; console.log(age2); const age3=13; console.log(age3); </script>
  • +：当使用 + 运算符对不同类型的值进行拼接时，会自动将非字符串类型转换为字符串。
<script> let age1=123+"h"; console.log(age1); let age2="123"+"你好"; console.log(age2); let age3="123"+true; console.log(age3); </script>

运算符

运算符类型运算符
算术运算符+, -, *, /, %
自增自减运算符++, --
赋值运算符==, +=, -=, *=, /=, %=
比较运算符<, >, <=, >=, !=, !==, ==, ===
逻辑运算符&&,
位运算符&,
移位运算符<<, >>, >>>
三元运算符条件表达式？true_value:false_value

大体都与 Java 相同，个别不同。

  • == 与 === 的不同
    • ==：会尝试进行隐式类型转换，也就是，把不同的值转换为相同类型后再进行比较。
    • ===：不进行隐式类型转换。
      • 想严格比较（类型 + 值都相同）-> 用 ===；
      • 想宽松比较（允许类型转换）-> 用 ==（尽量少用）。
<script> //==:会尝试进行隐式类型转换，把不同的值转换为相同类型在进行比较 console.log(1=="1");//true console.log(true=="1");//true console.log(true==1);//true console.log("========="); //===：不会进行隐式类型转换，直接比较 console.log(1==="1");//false console.log(true==="1");//false console.log(true===1);//false </script>
  • != 与 !== 也是同理，!= 可以进行类型转换，而 !== 不可以。

三、数据类型

js 的数据类型分为：基本类型和引用类型。

typeof：用于返回操作数的数据类型。

基本类型

基本类型描述
Number数字，用于表示整数和浮点数
String字符串类型，需要用引号，单引号双引号都可以
Boolean布尔类型，只有两个取值，true（表示真），false（表示假），常用语逻辑判断
Undefined表示变量未初始化，变量的值就是 undefined，或者访问对象不存在属性时，也会返回 undefined
<script> //基本类型 //number console.log(typeof(11)); //String console.log(typeof("hello")); //true console.log(typeof(true)); //Undefined let a; console.log(a); //null console.log(typeof(null)); </script>
  • null：返回的类型是 object，这个早期 JavaScript 设计的一个历史遗留问题。虽然 null 表示空值，但从检测类型角度来看，需要特殊处理。

引用类型

数组
数组的创建
<script> //方法一：使用 new 关键字 let a1=new Array(1,"hell0",null); //方法二：使用字面量创建 let a2=[]; a2=[1,"1",4]; let a3=[1,2,3]; </script>
  • js 的数组可以不用统一类型。
数组的操作
1. 数组的查找
<script> let a=[1,3,5,7]; console.log(a[0]);//1 console.log(a[1]);//3 console.log(a[2]);//5 console.log(a[100]);//undefined </script>
  • 元素不存在查找结果为 undefined。
2. 数组的遍历

方式一：传统 for 循环

<script> a1=[1,"1",4]; //方式一： for(let i=0;i<a1.length;i++){ console.log(a1[i]); } </script>

方式二：for...of 循环（值遍历）

<script> //方式二： for (const element of a1) { console.log(element); } </script>
  • element 是当前遍历到的元素的值，变量名可自定义。
  • of 关键字用于遍历数组的值。

方式三：foreach 遍历

<script> //方式三： a1.forEach(element => { console.log(element); }); </script>
  • foreach 是数组的内置方法，接收一个回调函数作为参数。
3. 数组的增添
<script> //添加元素 let a=[1,2,3]; a[4]=100; a[100]=1; console.log(a[4]); console.log(a[100]); console.log(a); </script>
  • 稀疏数组：数组索引不连续，存在未显示赋值的空槽（不占实际内存，遍历会跳过）；
  • 动态长度：数组长度由最大索引决定。
4. 数组的删除
<script> //删除元素 let a=[1,2,3]; //删除前 console.log(a[1]); //删除从下标一开始的两个数据 a.splice(1,2); //删除后 console.log(a); </script>
  • splice（起始索引，删除数量，插入元素 1，插入元素 2...）；
  • 如果访问不存在的元素，结果为 undefined。
5. 数组的修改
<script> //修改元素 let a=[1,2,3]; //修改前 console.log(a[0]); a[0]=100; //修改后 console.log(a[0]); </script>

四、函数

语法格式

<script> //函数格式 function 函数名（参数 1，参数 2...）{ //函数体 return 结果//（可选，返回值） } //函数调用（无返回值） 函数名（实参列表）; //函数调用（有返回值） 返回值=函数名（实参列表）; </script>

示例：

<script> function add(a,b){ return a+b; } //两个参数 let d=add(15,20);//35 console.log(d); //三个参数（多出一个参数） let f=add(15,20,10); console.log(f);//35 //一个参数（少一个参数） let h=add(15); console.log(h);//NaN </script>
  • 当函数定义了 n 个参数，调用时传了 m 个参数（m>n），JavaScript 不会报错，会忽略多余参数，只计算前 n 个参数；
  • 当函数定义了 n 个参数，调用时传了 m 个参数（m<n），JavaScript 不会报错，多余参数会被赋值为 undefined，在上述示例中，也就成了 15+undefined，结果是 NaN（Not a Number，非数字）。

匿名函数

语法格式

<script> let 变量名=function(参数名 1，参数名 2....){ 函数体 ); } //调用 函数名 (参数 1，参数 2...) </script>

示例：

<script> let c=function(a,b){ console.log(a+b); } c(1,2); </script>
  • 需要调用变量名，才能触发函数。

五、对象

在 JavaScript 中，对象是一种复合数据类型，用于存储键值对形式的数据，并且可以包含函数（方法）。

对象的创建

字面量创建（常用）：{}
<script> let student={ id:12333, name:"张三", age:12 } </script>
  • 键值对之间使用逗号分割；
  • 键和值使用冒号分割。
使用 new Object 创建对象

语法：

<script> let 对象名=new Object(); 对象名。属性=值; .... </script>

示例：

<script> let student=new Object(); student.id=2; student.name="张三"; student.age=12; </script>

构造函数对象

语法格式

<script> function 构造函数名 (参数 1，参数 2...){ this.属性=值; this.name=name; this.方法=function(){ 函数体 } } let a=new 构造函数名 (参数...); </script>

示例

<script> function Student(id,name,gender){ this.id=id; this.name=name; this.age=age; this.say=function(){ console.log("say"); } } let a=new Student(1,"zhangsan",11); </script>
  • 构造函数不需要 return。

对象的属性操作

访问

<script> let student={ id:12333, name:"张三", age:12, say:function(){ console.log("hello"); } } //访问操作 //方法 1： console.log(student.name); //方法二： console.log(student["name"]); //添加 student.classid=1; //修改 student.age=24; //删除 delete student.age; </script>
  • 使用 [] 访问属性，需要加上引号。

目录

  1. JavaScript 基础教程
  2. 一、什么是 JavaScript？
  3. 二、JavaScript 的使用
  4. 引入方式
  5. 基础语法
  6. 变量声明
  7. 运算符
  8. 三、数据类型
  9. 基本类型
  10. 引用类型
  11. 数组
  12. 数组的创建
  13. 数组的操作
  14. 1. 数组的查找
  15. 2. 数组的遍历
  16. 3. 数组的增添
  17. 4. 数组的删除
  18. 5. 数组的修改
  19. 四、函数
  20. 匿名函数
  21. 五、对象
  22. 对象的创建
  23. 字面量创建（常用）：{}
  24. 使用 new Object 创建对象
  25. 构造函数对象
  26. 对象的属性操作

更多推荐文章

查看全部
  • Ubuntu 安装 MySQL 社区版
  • Pi0 机器人大模型基于昇腾 A2 的部署与性能实测
  • 枚举 ToString() 性能优化：字典映射方案
  • WiFi 模块 AT 指令详解及透传模式说明
  • 2026 年协作机器人十大品牌推荐
  • 基于 Termux+Ubuntu 在安卓手机本地部署 OpenClaw 与 Llama 模型教程
  • Ubuntu 24.04 安装 NVIDIA 驱动及 CUDA 开发环境完整指南
  • C++可变参数队列与压栈顺序：模板语法及汇编调用约定
  • ClawdBot 多语言翻译 Telegram 机器人部署与配置指南
  • AI 时代的“黑箱问题”：理解与信任的边界
  • QClaw 上手指南：本地 AI 代理工具深度体验与配置
  • 多模态大模型文本预训练知识依赖问题与 BPO 偏好对齐方案
  • 前端开发基础：HTML、CSS 与 JavaScript 入门梳理
  • 基于人工蜂群非确定性双向规划机制的无人机二维三维路径规划研究
  • IDEA 插件 Trae AI 实战指南：从安装到进阶
  • OpenLLaMA 实战指南：5 步构建智能文案生成系统
  • 基于 STM32 的智能家居环境监测与控制系统
  • C++ STL 容器详解：序列、关联与适配器
  • FLUX.1-dev 高清壁纸生成指南
  • Linux 线程概念详解

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online