青少年编程与数学 01-007 在网页上编写程序 04课题、变量4_3

最新推荐文章于 2025-10-21 20:57:47 发布

原创最新推荐文章于 2025-10-21 20:57:47 发布 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#青少年编程 #前端 #JavaScript #编程与数学

编程与数学第一阶段:应用基础专栏收录该内容

316 篇文章

订阅专栏

青少年编程与数学 01-007 在网页上编写程序 04课题、变量4_3

七、变量的声明
- - 示例代码：
八、变量的赋值
九、变量的作用域
十、变量概念比较

本文详细介绍了什么是变量，阐释了其基本特性，包括命名规则、数据类型、作用域、生命周期和可变性。通过日常生活中的比喻，帮助读者理解变量的存储和访问机制。接着，文档专注于JavaScript语言，详细介绍了变量的声明方式，包括var、let和const关键字的用法，以及变量提升和重声明等语言特性。同时，对JavaScript中的常量进行了讨论，强调了const声明的值不可变性和作用域规则。文档还区分了原始值和引用值，并解释了它们的存储和类型转换。通过字面量的概念，展示了如何在代码中直接创建数据结构。最后，探讨了变量声明和赋值的不同形式。此外，还对比了编程中的变量和数学中的变量，以及命名的重要意义。

七、变量的声明

在JavaScript中，可以使用以下三种方式来声明变量：

var：
- 使用var关键字声明的变量具有函数作用域或全局作用域，这意味着如果在一个函数内部声明了一个var变量，它可以在整个函数内访问。
- var声明的变量会发生变量提升现象，即变量的声明会被提升到它所在函数或全局的顶部，但初始化（赋值）不会提升。
```
var message = "Hello, World!";
```
let（ES6引入）：
- 使用let关键字声明的变量具有块级作用域，这意味着它可以在声明它的代码块（如if语句、for循环等）内访问。
- let声明的变量不会发生变量提升，必须先声明后使用，否则会导致ReferenceError。
```
let age = 25;
```
const（ES6引入）：
- 使用const关键字声明的变量同样具有块级作用域，但它用于声明一个只读的常量，一旦赋值后不能被重新赋值。
- 如果const声明的是一个对象或数组，对象或数组内部的属性仍然可以被修改，但重新赋值给常量是不允许的。
- const声明的变量也必须先声明后使用，否则会导致ReferenceError。
```
const PI = 3.14159;
```

示例代码：

// 使用var声明变量
var globalVar = "I am a global variable";

function varTest() {
  var localVar = "I am a local variable";
  if (true) {
    var ifVar = "I have function scope";
    console.log(ifVar); // 可以访问
  }
  console.log(localVar); // 可以访问
  // console.log(ifVar); // 报错：ifVar is not defined
}

varTest();

// 使用let声明变量
let letVar = "I have block scope";
{
  let blockVar = "I have block scope too";
  console.log(blockVar); // 可以访问
}
// console.log(blockVar); // 报错：blockVar is not defined

// 使用const声明常量
const constantVar = "I am a constant";
// constantVar = "New value"; // 报错：Assignment to constant variable.

const objectVar = { name: "Object" };
objectVar.name = "New Object"; // 允许修改对象属性
// objectVar = { new: "Object" }; // 报错：Assignment to constant variable.

在现代JavaScript开发中，推荐使用let和const来声明变量，因为它们提供了块级作用域，有助于避免一些作用域相关的问题。使用const声明那些不应该改变的值，使用let声明可能会被重新赋值的变量。

八、变量的赋值

在JavaScript中，为变量赋值是一个将数据存储到变量的过程。这可以通过使用赋值操作符来完成。以下是JavaScript中为变量赋值的几种常见方式：

简单赋值：
使用单个等号=将值赋给变量。这是最基本的赋值方式。
```
let message;
message = "Hello, World!"; // 为变量赋值
```
初始化声明：
在声明变量的同时进行赋值，这种方式可以减少代码量并提高可读性。
```
let age = 25; // 声明变量并初始化
```

并行赋值：
使用一个表达式同时为多个变量赋值。这可以通过数组解构或对象解构来实现。

// 数组解构
let a, b;
[a, b] = [1, 2]; // a 被赋值为 1，b 被赋值为 2

// 对象解构
let { name, age } = { name: "Alice", age: 30 }; // name 被赋值为 "Alice"，age 被赋值为 30

更新赋值：
使用复合赋值操作符可以对变量的当前值进行操作并重新赋值。这些操作符包括+=, -=, *=, /=等。
```
let count = 1;
count += 1; // 等同于 count = count + 1，现在 count 是 2
```

条件（三元）赋值：
使用三元运算符?:可以在一个赋值表达式中根据条件执行不同的赋值。

let status = (age >= 18) ? "adult" : "minor"; // 如果 age 大于或等于 18，则 status 被赋值为 "adult"，否则为 "minor"

链式赋值：
可以在没有中间变量的情况下，将多个变量链接起来进行赋值。
```
let a, b, c;
a = b = c = 1; // a, b, c 都被赋值为 1
```
函数返回赋值：
可以将函数的返回值直接赋给变量。
```
let result = Math.max(10, 20); // result 被赋值为 20
```

动态属性赋值：
可以给对象的动态属性赋值。

let obj = {};
obj["dynamicKey"] = "value"; // 给动态生成的键赋值

模板字符串赋值：
使用模板字符串可以方便地构建字符串并插入变量值。

let name = "Kimi";
let greeting = `Hello, ${name}!`; // greeting 被赋值为 "Hello, Kimi!"

这些赋值方式可以根据不同的使用场景和需求灵活选择，以实现代码的简洁性和表达性。

九、变量的作用域

在JavaScript中，变量的作用域指的是变量可以被访问的代码区域。JavaScript有两种主要的作用域类型：全局作用域和局部作用域。此外，函数作用域和块级作用域（ES6引入的let和const）也是理解作用域时需要考虑的。

全局作用域

全局作用域是在整个脚本中都可以访问的作用域。
在任何函数之外声明的变量都具有全局作用域。
全局变量是全局对象（在浏览器中是window对象）的属性。

局部作用域

局部作用域是在函数内部声明的变量的作用域。
这些变量只能在该函数内部被访问和使用。
当函数执行完毕后，局部作用域内的变量将被销毁。

函数作用域

函数作用域是由函数创建的，只在函数内部有效。
函数内部声明的变量（使用var）仅在函数体内部可见。
函数作用域可以嵌套在其他作用域中。

块级作用域

块级作用域是由{...}包围的代码块创建的，例如循环、条件语句等。
ES6之前，JavaScript没有真正的块级作用域，所有在块内的变量实际上都是函数作用域的一部分。
ES6引入了let和const关键字，允许在块内声明变量，这些变量只在该块内部可见。

变量提升（Hoisting）

var声明的变量会被提升到它们所在作用域的顶部，但是它们的初始化不会被提升。
这意味着在变量声明之前访问它们是可能的，但会得到undefined而不是错误。

作用域链

当查找变量时，JavaScript会从当前作用域开始，逐级向上查找，直到找到该变量或达到全局作用域。
如果在全局作用域中也没有找到，通常会返回undefined。

示例

var globalVar = "I am global";

function checkScope() {
  var localVar = "I am local";
  console.log(globalVar); // 访问全局变量
  if (true) {
    let blockVar = "I am block-scoped";
    console.log(blockVar); // 访问块级作用域变量
  }
  // console.log(blockVar); // ReferenceError: blockVar is not defined
}

checkScope();