JavaScript变量-代码号

JavaScript变量指南：从声明到作用域

变量是JavaScript中最基础也最重要的概念之一。说白了，变量就是用来存储数据的“容器”，你可以往里面放数字、文本、对象等各种类型的数据。在代码号学习编程的新手，第一个接触的概念往往就是变量。

变量到底是干什么用的？

变量在代码里主要有两个作用：

作为未知值的占位符：写代码时有些值还不确定，先用变量占个位置，等程序运行时再往里放具体的值。

让代码更清晰易懂：用有意义的变量名，别人一看就知道这段代码在干什么。

变量命名规则

在JavaScript里给变量起名字（也叫标识符）要遵守几个硬性规定：

第一个字符必须是字母（a-z或A-Z）、下划线（_）或者美元符号（$）
第一个字符之后，可以用数字，比如value1、score2
JavaScript严格区分大小写，所以userName和username是两个不同的变量

这就像给人起名字，有基本规则要遵守，但不能太随意。

声明变量的三种方式

JavaScript提供了三个关键字用来声明变量，各有各的用处。

使用var声明变量

var是早期JavaScript就有的声明方式。不过我在实际开发中已经很少用var了，因为它存在作用域问题，容易造成代码混乱。

var siteName = "代码号";
console.log(siteName); // 输出：代码号

// var的问题在于没有块级作用域
if (true) {
    var course = "JavaScript教程";
}
console.log(course); // 依然能访问到，这容易造成变量污染

使用let声明变量

let解决了var的作用域问题，它只在当前的代码块内有效。现在我在编程教学中，都推荐学生用let。

let userName = "张三";
console.log(userName); // 输出：张三

if (true) {
    let userAge = 25;
    console.log(userAge); // 输出：25
}
// console.log(userAge); // 这里会报错，userAge未定义，因为只在if块内有效

使用const声明常量

const声明的变量一旦赋值就不能改变。这适合用来存储那些不会变化的值，比如配置信息、固定参数等。

const SITE_URL = "https://www.ebingou.cn/";
const MAX_USER_COUNT = 1000;
const DEFAULT_ATAR = "default.png";

// MAX_USER_COUNT = 2000; // 这行会报错，常量不能重新赋值

// 注意：const声明时必须赋值
// const temp; // 这样写会报错

我在源码（https://www.ebingou.cn/yuanma/）审核时经常看到有人滥用const，该用let的地方用了const，结果代码跑不通。记住一个原则：确定不会变的用const，会变的用let。

JavaScript变量的数据类型

变量可以存储不同类型的数据，JavaScript里主要的数据类型有：

// 字符串（String）：表示文本
let courseName = "JavaScript入门教程";
let siteSlogan = '代码号，学编程的好地方';

// 数字（Number）：整数和小数都行
let userCount = 5000;
let averageScore = 92.5;

// 布尔值（Boolean）：只有true和false两个值
let isVip = true;
let isLoggedIn = false;

// 未定义（Undefined）：声明了但没赋值
let tempValue;
console.log(tempValue); // 输出：undefined

// 空值（Null）：表示故意设置为空
let selectedUser = null;

// 对象（Object）：键值对
let userInfo = {
    name: "李四",
    age: 28,
    email: "lisi@example.com"
};

// 数组（Array）：一组值的
let courseList = ["HTML教程", "CSS教程", "JavaScript教程"];

变量的两种作用域

根据变量能访问的范围，可以分为局部变量和全局变量。这就像人的社交圈，有些人只在小圈子里活动，有些人则谁都认识。

局部变量

定义在函数或代码块内部的变量，只能在那个范围内使用。不同的函数里可以用同名的局部变量，互不干扰。

function showCodeSite() {
    // 这是局部变量，只能在showCodeSite函数内使用
    let siteName = "代码号";
    console.log("函数内部访问：", siteName);
}

function showCourseInfo() {
    // 可以和上面的局部变量同名，互不影响
    let siteName = "编程教程";
    console.log("另一个函数内部访问：", siteName);
}

showCodeSite(); // 输出：函数内部访问：代码号
showCourseInfo(); // 输出：另一个函数内部访问：编程教程

// console.log(siteName); // 报错，外部访问不到局部变量

局部变量用完后就会被系统回收，释放内存。这也是我推荐多用局部变量的原因，既能避免命名冲突，又能节省内存。

全局变量

定义在所有函数外部的变量，脚本里的任何地方都能访问和修改。

// 全局变量
let globalSiteName = "代码号";
let globalVisitorCount = 100;

function updateSiteInfo() {
    // 函数内部可以访问和修改全局变量
    globalVisitorCount += 1;
    console.log("网站名称：", globalSiteName);
    console.log("访问人数：", globalVisitorCount);
}

function checkSiteStatus() {
    // 另一个函数也能访问
    if (globalVisitorCount > 1000) {
        console.log("网站很火爆");
    }
}

updateSiteInfo();
checkSiteStatus();

// 外部也能修改全局变量
globalSiteName = "代码号学习社区";
console.log(globalSiteName);

全局变量用起来方便，但问题也很多。我在代码号的教学中一直强调：少用全局变量。因为全局变量容易被不小心修改，而且会一直占用内存直到页面关闭。

本节课程知识要点

基于这些年的编程和教学经验，总结几个变量使用的核心要点：

优先使用let和const，别用var

var的作用域问题容易引发bug，let和const的块级作用域更符合我们的思维习惯。

// 不推荐
var oldWay = "过时写法";

// 推荐
let modernWay = "现代写法";
const FIXED_VALUE = "固定值";
变量名要有意义
别用a、b、c这种毫无意义的命名，过两天你自己都看不懂。

javascript
// 不推荐
let a = "张三";
let b = 25;
let c = true;

// 推荐
let userName = "张三";
let userAge = 25;
let isVipMember = true;

使用驼峰命名法

JavaScript社区约定俗成的规范是小驼峰，第一个单词小写，后面单词首字母大写。

let firstName = "张";
let lastName = "三";
let userLoginCount = 15;
let isCourseCompleted = false;

常量用全大写

对于const声明的真正常量，习惯用全大写加下划线。

const MAX_LOGIN_ATTEMPTS = 5;
const DEFAULT_USER_ATAR = "https://www.ebingou.cn/images/default.png";
const API_BASE_URL = "https://api.ebingou.cn/v1";

变量声明放在代码块开头

这样能避免变量提升带来的问题，也让代码结构更清晰。

function processUserData() {
    // 所有变量声明集中放在开头
    let userName;
    let userScore;
    let isEligible;
    const MIN_SCORE = 60;
    
    // 然后才是具体的逻辑代码
    userName = "王五";
    userScore = 85;
    isEligible = userScore >= MIN_SCORE;
    
    // 后续处理...
}

能用局部变量就别用全局

全局变量就像公共厕所，谁都能进去，容易搞得一团糟。除非真的需要全局共享，否则都用局部变量。

// 不推荐：滥用全局变量
globalData = "some value";

function doSomething() {
    globalData = "modified value"; // 一不小心就改了别人的数据
}

// 推荐：封装在函数内部
function processData() {
    let localData = "some value";
    // 处理localData
    return localData;
}

实际开发中的变量使用经验

在编程教学和实际项目开发中，我发现不少初学者容易犯的错误，分享出来给大家参考：

变量未声明就使用

// 错误写法
userName = "张三"; // 没声明直接赋值，会变成全局变量

// 正确写法
let userName = "张三";

混淆赋值和比较

let score = 80;
// 错误
if (score = 100) { // 这是赋值，不是比较，永远为true
    console.log("满分");
}

// 正确
if (score === 100) {
    console.log("满分");
}

不注意变量类型转换

let count = "10";
let total = count + 5; // 结果是"105"而不是15，因为字符串拼接
console.log(total);

// 正确处理
let correctTotal = Number(count) + 5; // 结果是15

JavaScript变量看似简单，但真要掌握好也需要下点功夫。从声明方式的选择，到作用域的把控，再到命名规范，每个细节都影响着代码的质量。我的建议是：多用let和const，变量名起得有意义，能局部就别全局。把这些基础打牢了，后面的学习才能事半功倍。

本文标签：

JavaScript变量