当前位置: 首页 > article >正文

JavaScript 基础语法:变量、数据类型、运算符、条件语句、循环

JavaScript 是一种动态类型的脚本语言,广泛用于前端开发。以下是 JavaScript 基础语法的核心内容,包括变量、数据类型、运算符、条件语句和循环。

---

### 1. 变量

变量用于存储数据。JavaScript 中有三种声明变量的方式:

- **`var`**:传统方式,作用域为函数级。
- **`let`**:块级作用域,推荐使用。
- **`const`**:块级作用域,用于声明常量(不可重新赋值)。

```javascript
var name = "Alice"; // 函数作用域
let age = 25;       // 块级作用域
const PI = 3.14;    // 常量,不可重新赋值
```

---

### 2. 数据类型

JavaScript 是一种动态类型语言,变量的数据类型可以随时改变。主要数据类型包括:

#### 基本数据类型(原始类型)
- **`number`**:数字(整数、浮点数)。
- **`string`**:字符串。
- **`boolean`**:布尔值(`true` 或 `false`)。
- **`undefined`**:未定义的值。
- **`null`**:空值。
- **`symbol`**(ES6):唯一的、不可变的值。

#### 引用数据类型
- **`object`**:对象(包括数组、函数等)。

```javascript
let num = 42;               // number
let text = "Hello";         // string
let isActive = true;        // boolean
let person = { name: "Alice", age: 25 }; // object
let fruits = ["apple", "banana"];        // array
```

---

### 3. 运算符

JavaScript 支持多种运算符,用于操作变量和值。

#### 算术运算符
- `+`(加)、`-`(减)、`*`(乘)、`/`(除)、`%`(取余)、`**`(幂)。

```javascript
let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a % b); // 1
```

#### 比较运算符
- `==`(相等)、`===`(严格相等)、`!=`(不等)、`!==`(严格不等)、`>`、`<`、`>=`、`<=`。

```javascript
console.log(10 == "10");  // true(值相等)
console.log(10 === "10"); // false(值和类型都相等)
```

#### 逻辑运算符
- `&&`(与)、`||`(或)、`!`(非)。

```javascript
let x = true;
let y = false;
console.log(x && y); // false
console.log(x || y); // true
console.log(!x);     // false
```

#### 赋值运算符
- `=`、`+=`、`-=`、`*=`、`/=`。

```javascript
let num = 10;
num += 5; // num = num + 5
console.log(num); // 15
```

---

### 4. 条件语句

条件语句用于根据条件执行不同的代码块。

#### `if...else`
```javascript
let age = 18;
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}
```

#### `switch`
```javascript
let day = "Monday";
switch (day) {
    case "Monday":
        console.log("Start of the week");
        break;
    case "Friday":
        console.log("Weekend is near");
        break;
    default:
        console.log("Midweek");
}
```

#### 三元运算符
```javascript
let isAdult = age >= 18 ? "Yes" : "No";
console.log(isAdult); // Yes
```

---

### 5. 循环

循环用于重复执行代码块。

#### `for` 循环
```javascript
for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}
```

#### `while` 循环
```javascript
let i = 0;
while (i < 5) {
    console.log(i); // 0, 1, 2, 3, 4
    i++;
}
```

#### `do...while` 循环
```javascript
let j = 0;
do {
    console.log(j); // 0, 1, 2, 3, 4
    j++;
} while (j < 5);
```

#### `for...of` 循环(ES6)
用于遍历可迭代对象(如数组、字符串)。
```javascript
let fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
    console.log(fruit); // apple, banana, orange
}
```

#### `for...in` 循环
用于遍历对象的属性。
```javascript
let person = { name: "Alice", age: 25 };
for (let key in person) {
    console.log(key + ": " + person[key]); // name: Alice, age: 25
}
```

---

### 6. 函数

函数用于封装可重用的代码块。

#### 函数声明
```javascript
function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Alice")); // Hello, Alice
```

#### 函数表达式
```javascript
const greet = function(name) {
    return "Hello, " + name;
};
console.log(greet("Bob")); // Hello, Bob
```

#### 箭头函数(ES6)
```javascript
const greet = (name) => "Hello, " + name;
console.log(greet("Charlie")); // Hello, Charlie
```

---

### 总结

- **变量**:使用 `let` 和 `const` 声明变量。
- **数据类型**:包括原始类型和引用类型。
- **运算符**:算术、比较、逻辑、赋值等。
- **条件语句**:`if...else`、`switch`、三元运算符。
- **循环**:`for`、`while`、`do...while`、`for...of`、`for...in`。
- **函数**:函数声明、函数表达式、箭头函数。

掌握这些基础语法是学习 JavaScript 的第一步,后续可以深入学习 DOM 操作、异步编程、ES6+ 新特性等。

相关文章:

JavaScript 基础语法:变量、数据类型、运算符、条件语句、循环

JavaScript 是一种动态类型的脚本语言&#xff0c;广泛用于前端开发。以下是 JavaScript 基础语法的核心内容&#xff0c;包括变量、数据类型、运算符、条件语句和循环。 --- ### 1. 变量 变量用于存储数据。JavaScript 中有三种声明变量的方式&#xff1a; - **var**&…...

ElementUI的常用组件及使用技巧

1. 引言 项目背景与目标 随着前端技术的快速发展,构建高效、美观的用户界面变得越来越重要。ElementUI作为一款基于Vue.js的组件库,提供了丰富的组件和工具,帮助开发者快速构建高质量的Web应用。本文旨在介绍ElementUI的常用组件及其使用技巧,帮助开发者更好地利用Elemen…...

python爬虫--简单登录

1&#xff0c;使用flask框架搭建一个简易网站 后端代码app.py from flask import Flask, render_template, request, redirect, url_for, sessionapp Flask(__name__) app.secret_key 123456789 # 用于加密会话数据# 模拟用户数据库 users {user1: {password: password1}…...

三次握手,四次挥手,服务器模型(多进程并发,线程),基于套接字的UDP通信

三次握手&#xff1a; 第一次握手&#xff1a;客户端向服务器发送SYN待确认数据x, 客户端进入SYN_SEND状态​ 第二次握手&#xff1a;服务器向客户端回传一条ACK应答数据x1, 同时发送一条SYN待确认数据y&#xff0c;服务器进入SYN_RECV状态​ 第三次握手&#xff1a;客户端向服…...

Linux TCP 编程详解与实例

一、引言 在网络编程的领域中&#xff0c;TCP&#xff08;Transmission Control Protocol&#xff09;协议因其可靠的数据传输特性而被广泛应用。在 Linux 环境下&#xff0c;使用 C 或 C 进行 TCP 编程可以实现各种强大的网络应用。本文将深入探讨 Linux TCP 编程的各个方面&…...

Vue.js 如何自定义主题和样式

Vue.js 如何自定义主题和样式 今天我们来聊聊如何在 Vue 项目中自定义主题和样式。无论是你想让自己的应用看起来独一无二&#xff0c;还是想快速适配设计稿&#xff0c;自定义主题和样式都是必不可少的一环。下面我将和大家分享几种常见的自定义方法和技巧。 为什么要自定义…...

Elasticsearch 开放推理 API 增加了 Azure AI Studio 支持

作者&#xff1a;来自 Elastic Mark Hoy Elasticsearch 开放推理 API 现已支持 Azure AI Studio。在此博客中了解如何将 Azure AI Studio 功能与 Elasticsearch 结合使用。 作为我们持续致力于为 Microsoft Azure 开发人员提供他们选择的工具的一部分&#xff0c;我们很高兴地宣…...

提示工程:少样本提示(Few-shot Prompting)

少样本提示&#xff08;Few-shot Prompting&#xff09;是一种利用大语言模型从少量示例样本中学习并处理任务的方法。它的核心思想是利用大语言模型的上下文学习能力&#xff0c;通过在提示中增加“示例样本”来启发大语言模型达到举一反三的效果。这种方法避免了重新训练或者…...

封装descriptions组件,描述,灵活

效果 1、组件1&#xff0c;dade-descriptions.vue <template><table><tbody><slot></slot></tbody> </table> </template><script> </script><style scoped>table {width: 100%;border-collapse: coll…...

数据中台是什么?:架构演进、业务整合、方向演进

文章目录 1. 引言2. 数据中台的概念与沿革2.1 概念定义2.2 历史沿革 3. 数据中台的架构组成与关键技术要素解析3.1 架构组成3.2 关键技术要素 4. 数据中台与其他平台的对比详细解析 5. 综合案例&#xff1a;金融行业数据中台落地实践5.1 背景5.2 解决方案5.3 成果与价值 6. 方向…...

Android FCM推送及通知栏展示

需求&#xff1a; 实现FIrebase Cloud Message推送功能&#xff0c;用户收到通知后&#xff0c;可以悬浮通知&#xff0c;自定义的大/小通知展示在通知栏&#xff0c;判断前台/后台&#xff0c;点击后进行跳转。 步骤&#xff1a; 一、配置及接入依赖库 1.下载 google-serv…...

【Matlab优化算法-第14期】基于智能优化算法的VMD信号去噪项目实践

基于智能优化算法的VMD信号去噪项目实践 一、前言 在信号处理领域&#xff0c;噪声去除是一个关键问题&#xff0c;尤其是在处理含有高斯白噪声的复杂信号时。变分模态分解&#xff08;VMD&#xff09;作为一种新兴的信号分解方法&#xff0c;因其能够自适应地分解信号而受到…...

4. Go结构体使用

1、结构体的简介 结构体&#xff08;Struct&#xff09;是编程语言中常见的一种复合数据类型&#xff0c;它将不同类型的数据元素&#xff08;成员&#xff09;组合成一个单一的实体。通过结构体&#xff0c;程序员可以将具有不同类型和性质的信息绑定到一个对象中&#xff0c…...

ubuntu20使用tigervnc远程桌面配置记录

一、安装tigervnc sudo apt install tigervnc-common sudo apt install tigervnc-standalone-server二、增加配置文件 安装完后新增配置文件&#xff1a;vim ~/.vnc/xstartup #!/bin/sh #Uncomment the following two lines for normal desktop: #unset SESSION_MANAGER #ex…...

【WB 深度学习实验管理】使用 PyTorch Lightning 实现高效的图像分类实验跟踪

本文使用到的 Jupyter Notebook 可在GitHub仓库002文件夹找到&#xff0c;别忘了给仓库点个小心心~~~ https://github.com/LFF8888/FF-Studio-Resources 在机器学习项目中&#xff0c;实验跟踪和结果可视化是至关重要的环节。无论是调整超参数、优化模型架构&#xff0c;还是监…...

编译spring 6.2.2

如何编译Spring 6.2.2 下载spring 6.2.2 首先&#xff0c;下载spring 6.2.2&#xff0c;地址&#xff1a;下载 解压到你的目录下。 下载gradle 下载gradle&#xff0c;这是spring项目的依赖管理工具&#xff0c;本文下载的是8.12.1。 gradle idea配置如下&#xff1a;在你的…...

【centOS】搭建公司内网git环境-GitLab 社区版(GitLab CE)

1. 安装必要的依赖 以 CentOS 7 系统为例&#xff0c;安装必要的依赖包&#xff1a; sudo yum install -y curl policycoreutils openssh-server openssh-clients postfix sudo systemctl start postfix sudo systemctl enable postfix2. 添加 GitLab 仓库 curl -sS https:/…...

MHTML文件如何在前端页面展示

MHTML文件如何在前端页面展示 需求背景&#xff1a; 目前在给证券公司做项目&#xff0c;但是在使用新系统的过程中&#xff0c;甲方还希望之前之前系统的历史记录可以看到。 最初制定的计划是项目组里面做数据的把原系统页面爬取下来&#xff0c;转成图片&#xff0c;直接给…...

Spring Boot的常用注解

Spring Boot 常用注解 主要分为以下几类&#xff1a; Spring 核心注解Spring Boot 相关注解Spring MVC 相关注解Spring Data JPA 相关注解Spring 事务管理Spring Security 相关注解Spring AOP 相关注解Spring 其他常用注解 下面是详细分类和表格展示&#x1f447;&#xff1a…...

【R语言】plyr包和dplyr包

一、plyr包 plyr扩展包主要是实现数据处理中的“分割-应用-组合”&#xff08;split-apply-combine&#xff09;策略。此策略是指将一个问题分割成更容易操作的部分&#xff0c;再对每一部分进行独立的操作&#xff0c;最后将各部分的操作结果组合起来。 plyr扩展包中的主要函…...

《XSS跨站脚本攻击》

一、XSS简介 XSS全称&#xff08;Cross Site Scripting&#xff09;跨站脚本攻击&#xff0c;为了避免和CSS层叠样式表名称冲突&#xff0c;所以改为了XSS&#xff0c;是最常见的Web应用程序安全漏洞之一&#xff0c;位于OWASP top 10 2013/2017年度分别为第三名和第七名&…...

Golang:精通sync/atomic 包的Atomic 操作

在本指南中&#xff0c;我们将探索sync/atomic包的细节&#xff0c;展示如何编写更安全、更高效的并发代码。无论你是经验丰富的Gopher还是刚刚起步&#xff0c;你都会发现有价值的见解来提升Go编程技能。让我们一起开启原子运算的力量吧&#xff01; 理解Go中的原子操作 在快…...

代码随想录_二叉树

二叉树 二叉树的递归遍历 144.二叉树的前序遍历145.二叉树的后序遍历94.二叉树的中序遍历 // 前序遍历递归LC144_二叉树的前序遍历 class Solution {public List<Integer> preorderTraversal(TreeNode root) {List<Integer> result new ArrayList<Integer&g…...

详解Swift中 Sendable AnyActor Actor GlobalActor MainActor Task、await、async

详解Swift中 Sendable AnyActor Actor GlobalActor MainActor 的关联或者关系 及其 各自的作用 和 用法 以及与 Task、await、async&#xff1a; Sendable 协议 作用&#xff1a; Sendable 是一个协议&#xff0c;它用于标记可以安全地跨线程或异步任务传递的数据类型。符合 S…...

【C语言标准库函数】浮点数分解与构造: frexp() 和 ldexp()

目录 一、头文件 二、函数简介 2.1. frexp(double x, int *exp) 2.2. ldexp(double x, int exp) 三、函数实现&#xff08;概念性&#xff09; 3.1. frexp 的概念性实现 3.2. ldexp 的概念性实现 四、注意事项 五、示例代码 在C语言标准库中&#xff0c;frexp() 和 ld…...

【Git】tortoisegit使用配置

1. 安装 首先下载小乌龟&#xff0c;下载地址:https://tortoisegit.org/download/, 可以顺便下载语言包&#xff01; 安装时&#xff0c;默认安装就可以&#xff0c;一路next。也可以安装到指定目录中 目前已完成本地安装&#xff0c;接下来就需要与远程仓库建立连接&…...

Spring基于文心一言API使用的大模型

有时做项目我们可能会遇到要在项目中对接AI大模型 本篇文章是对使用文心一言大模型的使用总结 前置任务 在百度智能云开放平台中注册成为开发者 百度智能云开放平台 进入百度智能云官网进行登录&#xff0c;点击立即体验 点击千帆大模型平台 向下滑动&#xff0c;进入到模型…...

运维_Mac环境单体服务Docker部署实战手册

Docker部署 本小节&#xff0c;讲解如何将前端 后端项目&#xff0c;使用 Docker 容器&#xff0c;部署到 dev 开发环境下的一台 Mac 电脑上。 1 环境准备 需要安装如下环境&#xff1a; Docker&#xff1a;容器MySQL&#xff1a;数据库Redis&#xff1a;缓存Nginx&#x…...

[论文笔记] Deepseek-R1R1-zero技术报告阅读

启发: 1、SFT&RL的训练数据使用CoT输出的格式,先思考再回答,大大提升模型的数学与推理能力。 2、RL训练使用群体相对策略优化(GRPO),奖励模型是规则驱动,准确性奖励和格式化奖励。 1. 总体概述 背景与目标 报告聚焦于利用强化学习(RL)提升大型语言模型(LLMs)…...

Centos Ollama + Deepseek-r1+Chatbox运行环境搭建

Centos Ollama Deepseek-r1Chatbox运行环境搭建 内容介绍下载ollama在Ollama运行DeepSeek-r1模型使用chatbox连接ollama api 内容介绍 你好&#xff01; 这篇文章简单讲述一下如何在linux环境搭建 Ollama Deepseek-r1。并在本地安装的Chatbox中进行远程调用 下载ollama 登…...