javascript教程零基础如何高效掌握变量与函数用法

学 JavaScript 时是不是总被 “变量” 和 “函数” 这两个词绕晕？看教程时觉得 “哦，懂了”，一动手写代码就报错，要么变量不知道怎么存数据，要么函数调用了没反应？不少零基础的朋友跟我吐槽，这俩基础概念看着简单，实际用起来全是小坑。其实啊，变量和函数是 JS 的 “地基”，就像盖房子的砖和水泥，把它们吃透了，后面学再复杂的内容都轻松。今天兔子哥就用大白话讲透变量和函数，从概念到实战，再到学员踩过的坑，零基础也能高效掌握，跟着练，你写的代码也能顺顺当当跑起来！

一、先吃透变量：JS 里的 “储物盒”，数据存对了才不会乱

Q：“变量到底是啥？为啥写 JS 非得用它？”
A：变量就是用来存东西的 “盒子”—— 数字、文字、开关状态这些数据，都得放在变量里才能用。没有变量，数据用完就丢，代码根本跑不起来。就像你买菜得用袋子装，变量就是 JS 里的 “袋子”。

1. 变量怎么声明？记住这两种写法

声明变量用let或var，新手先认准let，不容易出问题：
javascript

// 声明变量并赋值let name = "小明"; // 存文字（字符串，得用引号包起来）let age = 20; // 存数字（不用引号）let isStudent = true; // 存真假（布尔值，只有true和false）// 先声明后赋值也可以let score;score = 95; // 后面再给值

避坑点：变量名不能瞎起！得用字母、数字、下划线，还不能用数字开头，也不能用 JS 自带的词（比如let function）。之前有个学员起名let，结果代码全报错，查了半天才发现问题，这点一定要注意。

2. 变量的 “数据类型”：存啥类型就得用啥格式

变量里存的数据分类型，不同类型用法不一样，弄错了就会报错：

• 字符串：文字类数据，必须用单引号或双引号包起来，比如"你好" 'JS'；
• 数字：整数、小数都行，直接写，不用引号，比如100 3.14；
• 布尔值：只有true（真）和false（假），用来做判断，比如let hasMoney = true；
• undefined：声明了变量没赋值，就是这个类型，比如let x; console.log(x); // 输出undefined。

Q：“类型搞错了会咋样？”
A：比如想算"5"+5，结果会是"55"（字符串拼接），而不是10（数字相加）。所以存数据时得想清楚类型，数字别加引号，文字别漏引号。

3. 实战小案例：用变量做个简单计算器

javascript

// 用变量存两个数字和结果let num1 = 10;let num2 = 5;let sum = num1 + num2; // 求和let diff = num1 - num2; // 求差console.log("和是：" + sum); // 输出“和是：15”console.log("差是：" + diff); // 输出“差是：5”

这个案例虽然简单，但能帮你理解变量怎么存数据、怎么参与计算。学员小王说：“刚开始总忘给变量赋值，结果算出来全是 NaN（不是数字），后来记住先赋值再用，就没错过！”

二、再学函数：JS 里的 “小工具”，重复代码不用写多遍

Q：“函数和变量有啥关系？为啥要有函数？”
A：变量存数据，函数存代码。一段代码要反复用，就打包成函数，想用的时候叫它一声就行，不用重复写。比如打招呼的代码，写一次函数，哪里需要哪里调用，超方便。

1. 函数怎么定义？三步就能搞定

定义函数就像造工具，得有名字、功能和用法：
javascript

// 定义函数：function 函数名() { 代码 }function sayHello() {// 函数里的代码：弹出打招呼窗口alert("你好，欢迎学习JS！");}

• function：声明函数的关键字，必须写；
• 函数名：自己起，规则和变量名一样；
• 大括号里：放要执行的代码。

2. 函数怎么用？调用一下就生效

定义好的函数不会自己跑，得 “调用” 它才行：
javascript

// 调用函数：函数名()sayHello(); // 弹出“你好，欢迎学习JS！”

就像你买了榨汁机（定义函数），得按开关（调用函数）才会工作。按钮点击、页面加载时都能调用函数，这就是网页交互的核心。

3. 带参数的函数：让函数更灵活

函数还能 “接收数据”，就像榨汁机可以放苹果、香蕉不同水果，参数就是函数的 “原材料入口”：
javascript

// 带参数的函数：function 函数名(参数1, 参数2) { 代码 }function sayHiTo(name) { // name是参数，就像个变量alert("你好，" + name + "！");}// 调用时传数据：函数名(数据1, 数据2)sayHiTo("小明"); // 弹出“你好，小明！”sayHiTo("小红"); // 弹出“你好，小红！”

参数让函数能处理不同数据，不用为每个名字写一个函数。学员小李说：“之前写欢迎语，每个用户都要写一遍 alert，学了参数后，一个函数搞定所有用户，代码少了一半！”

4. 有返回值的函数：让函数 “出结果”

函数不仅能做事，还能返回结果，就像榨汁机出果汁一样，用return关键字：
javascript

// 有返回值的函数：计算两个数的和function add(a, b) {let result = a + b;return result; // 返回计算结果}// 调用函数并接收结果let total = add(3, 5); // total就是8console.log("3+5=" + total); // 输出“3+5=8”

返回值能让函数的结果被其他代码使用，比如计算器、数据处理都离不开它。

三、避坑指南：变量和函数最容易踩的 5 个坑

1. 变量未声明就用：报错 “is not defined”

javascript

// 错误：没声明直接用console.log(age); // 报错：age is not defined

解决：先声明再使用，let age = 18; console.log(age);

2. 函数名重复：后定义的会覆盖前面的

javascript

function sayHi() { alert("你好"); }function sayHi() { alert("再见"); } // 后面的覆盖前面的sayHi(); // 只会弹出“再见”

解决：函数名别重复，起名字时加区分，比如sayHiToFriend sayHiToTeacher。

3. 调用函数时漏写括号：不会执行

javascript

function doSomething() { alert("做事了"); }doSomething; // 漏了括号，函数不会执行，也不报错

解决：调用函数必须加括号，doSomething();

4. 参数数量不对：结果可能出错

javascript

function add(a, b) { return a + b; }add(1); // 只传一个参数，b会是undefined，结果是NaN

解决：调用时参数数量尽量和定义时一致，或在函数里加默认值：
javascript

function add(a, b = 0) { return a + b; } // b默认0add(1); // 结果是1+0=1，不会错了

5. 变量作用域搞错：函数外拿不到函数内的变量

javascript

function setName() {let username = "小明"; // 函数内的变量}setName();console.log(username); // 报错：username is not defined

解决：想在外面用的变量，声明在函数外；函数内的变量只能在函数里用。

四、高效练习方法：这样学变量和函数记得牢

1. 用 “生活场景” 类比，理解概念

• 变量 = 贴了标签的盒子（标签是变量名，盒子里是数据）；
• 函数 = 自动工具（参数是原材料，返回值是成品，调用是按开关）。
  这样想，抽象概念就变具体了。

2. 每天写 3 个小例子，量变引起质变

不用搞复杂项目，每天写几个变量声明、函数定义的小例子：

• 声明 3 个不同类型的变量，打印出来；
• 写一个带参数的函数，比如计算面积（长 × 宽）；
• 写一个有返回值的函数，比如判断数字是否偶数。
  坚持一周，手感自然就来了。

3. 抄代码→改代码→自己写，三步进阶

看到好例子先抄下来跑通，再改参数或逻辑（比如把加法函数改成减法），最后自己独立写一个类似的。学员小张说：“我抄了 5 个函数例子后，突然就会自己写了，改代码的过程比死记语法有用多了！”
兔子哥觉得，变量和函数是 JS 的 “基本功”，就像学英语的 26 个字母，看似简单，却是所有复杂内容的基础。很多人学不会 JS，不是因为难，是这两个基础没打牢，后面学 DOM、异步自然跟不上。
其实零基础学变量和函数，不用背太多规则，多动手敲代码，遇到报错别慌，对照避坑指南找问题，练着练着就熟了。之前有个学员连变量名规则都记不住，练了两周后，不仅能熟练声明变量，还能用函数做简单的计算器，这就是实践的力量。
现在就打开在线编辑器，从声明第一个变量、定义第一个函数开始，别害怕出错，每错一次就多懂一点。变量存对了，函数调用对了，你会发现 JS 入门真没那么难，甚至还挺有意思的，动手试试吧！

标签： console.log 储物盒