WEBSTORM前端 —— 第4章：JavaScript —— 第2节：变量与常量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Variable Practice</title>
</head>

<body>
    <script>
        // 1. 声明变量存放商品数量，值为 20
        let num = 20; 
        // 2. 声明变量存放用户姓名，值为 '张三'
        let uname = '张三'; 
        // 3. 依次在控制台打印输出两个变量
        console.log(num); 
        console.log(uname); 
    </script>
</body>

</html>

4. 更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。注意： let 不允许多次声明一个变量。

5. 声明多个变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

语法：多个变量中间用逗号隔开。

说明：看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

6.变量案例

①弹出姓名

需求：浏览器中弹出对话框：请输入姓名，页面中输出：刚才输入的姓名

分析：

①：输入：用户输入框：prompt()
②：内部处理：保存数据
③：输出：页面打印：document.write()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 输出用户名案例
    // 1. 用户输入
    // prompt('请输入姓名')
    // 2. 内部处理保存数据
    let uname = prompt('请输入姓名')
    // 3. 打印输出
    document.write(uname)
  </script>
</body>
</html>

②交换变量的值

需求：

有2个变量： num1 里面放的是 10， num2 里面放的是20
最后变为 num1 里面放的是 20 ， num2 里面放的是 10

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // let if = 10
    let num1 = 'pink老师'
    let num2 = '戚薇'
    let temp
    // 都是把右边给左边
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1, num2)
  </script>
</body>

</html>

1.3 变量的本质

内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间

1.4 变量命名规则与规范

1. 规则：

不能用关键字
关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量

2. 规范：

起名要有意义
遵守小驼峰命名法
第一个单词首字母小写，后面每个单词首字母大写。例：userName

1.5 变量练习——输出用户信息

需求：让用户输入自己的名字、年龄、性别，再输出到网页

分析：

①：弹出输入框（prompt）：请输入您的姓名 (uname)：用变量保存起来。
②：弹出输入框（prompt）：请输入您的年龄 (age)：用变量保存起来。
③：弹出输入框（prompt）：请输入您的性别(gender)：用变量保存起来。
④：页面分别输出 (document.write) 刚才的 3 个变量。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1. 姓名
    let uname = prompt('请输入姓名')
    let age = prompt('请输入年龄')
    let gender = prompt('请输入性别')
    document.write(uname, age, gender)
  </script>
</body>
</html>

1.6 变量拓展-let和var的区别

let 和 var 区别：

在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。

var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。

let 为了解决 var 的一些问题。

var 声明:

可以先使用在声明 (不合理)
var 声明过的变量可以重复声明(不合理)
比如变量提升、全局变量、没有块级作用域等等

结论：

var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // var num
    // console.log(num)
    // num = 10
    // num = 10
    // console.log(num)
    // var num
    // var num = 10
    // var num = 20
    // console.log(num)
    // num = 10
    // console.log(num)
    // let num
    // let num = 20
    // let num = 10
    // console.log(num)
  </script>
</body>

</html>

2. 1 数组

数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式

1.数组的基本使用

① 声明语法

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

②取值语法

通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问

2.一些术语

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // let arr = [10, 20, 30]
    // 1. 声明数组 有序 
    let arr = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]
    // 2. 使用数组  数组名[索引号] 从0
    // console.log(arr)
    console.log(arr[0]) // 刘德华
    console.log(arr[4])
    // 3. 数组长度 =  索引号 + 1 
    console.log(arr.length)  // 6

    // let 刘德华 = 10
    // console.log(刘德华)
  </script>
</body>

</html>

3.1 常量

概念：使用 const 声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致
注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
小技巧：不需要重新赋值的数据使用const

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.常量 不允许更改值
    // const PI = 3.14
    // console.log(PI)
    // PI = 3.15
    // console.log(PI)
    // 2. 常量声明的时候必须赋值
    // const PI 
  </script>
</body>

</html>

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

Headroom：AI Agent上下文压缩新方案

Headroom 是一个专为 AI Agent 设计的的上下文压缩层，旨在通过智能压缩 Agent 与 LLM 之间的交互内容（如工具输出、日志、RAG 片段等），显著降低 Token 消耗，同时保持任务准确率。

AI Agent技术社区

一个 AI Coding Agent，三种框架实现：Java / AgentScope Python / LangGraph 全景对比

摘要： Babi Agent 项目通过**Java（AgentScope + Spring Boot）和Python（AgentScope + FastAPI / LangGraph）**三种技术栈实现同一AI编程助手，探索跨语言、跨框架的AI Agent设计异同。核心对比：动机：比较Java与Python生态差异，验证通用设计模式，避免框架绑定。实现： Java：基于HarnessAgen