首页 区块链 Solidity

# 入门 JavaScript 核心：变量、函数、循环、面向对象全拆解

作为 JavaScript 新手，想要快速搭建基础认知，核心要吃透「变量、函数、循环、对象 / 面向对象」这几大核心模块。本文用通俗的语言 + 极简案例，帮你从零掌握这些关键知识点。

# 一、变量：JS 的 “数据收纳盒”

变量就像给数据贴标签的收纳盒，用来存储和复用数字、文本、布尔值等数据。

# 1. 声明方式（3 种核心）

1
2
3
4
5
6
7
8
9
10
11
12
13
// 1. let：可修改的变量（最常用）

let age = 25; 

age = 26; // 合法

// 2. const：不可修改的常量（存储固定值）

const PI = 3.14; 

// 3. var：旧版声明方式（新手暂优先用let/const）

var name = "小明";

# 2. 核心规则

  • 变量名可由字母、数字、_、$ 组成，不能以数字开头；

  • 区分大小写（如 age 和 Age 是两个变量）；

  • 尽量用语义化命名（如 userAge 而非 a1 ）。

# 二、函数：JS 的 “功能工具包”

函数是封装可重复执行的代码块，像一个 “工具包”，调用就能完成特定功能。

# 1. 基础定义与调用

1
2
3
4
5
6
7
8
9
10
11
12
13
// 定义函数：计算两数之和

function add(num1, num2) {

  return num1 + num2; // 返回结果

}

// 调用函数：传入参数，获取结果

let result = add(3, 5); 

console.log(result); // 输出8

# 2. 简化写法：箭头函数

1
2
3
// 箭头函数简化版（常用在短逻辑）

const add = (num1, num2) => num1 + num2;

# 核心特点

  • 可接收参数（输入），通过 return 返回结果（输出）；

  • 函数可复用，避免重复写相同代码。

# 三、循环：JS 的 “重复执行器”

循环能让代码按规则重复执行，避免手动写多次相同操作，核心有 for 和 while 两种。

# 1. for 循环（已知执行次数）

1
2
3
4
5
6
7
// 循环输出1-5

for (let i = 1; i <= 5; i++) {

&#x20; console.log(i); // 依次输出1、2、3、4、5

}

# 2. while 循环（未知执行次数）

1
2
3
4
5
6
7
8
9
10
11
// 循环到num大于10停止

let num = 1;

while (num <= 10) {

&#x20; console.log(num);

&#x20; num++; // 变量自增，避免死循环

}

# 核心注意

  • 循环必须有 “终止条件”（如 i <= 5 ），否则会陷入死循环；

  • 常用场景：遍历列表、批量处理数据。

# 四、对象：JS 的 “复合数据容器”

对象是存储多个相关数据 / 功能的集合，像一个 “信息档案袋”，用 键值对（key: value） 组织数据。

# 1. 基础创建与使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 创建一个“用户对象”

const user = {

&#x20; name: "小明",

&#x20; age: 25,

&#x20; // 对象中的函数（方法）

&#x20; sayHello: function() {

&#x20;   console.log("你好，我是" + this.name);

&#x20; }

};

// 访问对象属性/方法

console.log(user.name); // 输出“小明”

user.sayHello(); // 输出“你好，我是小明”

# 2. 核心特点

  • key （键）是属性名， value （值）可以是任意数据（数字、字符串、函数等）；

  • 用 对象名.属性名 访问数据， 对象名.方法名() 调用方法。

# 五、面向对象：类与继承（批量创建对象的 “模板”）

面向对象的核心是 “类（Class）”，相当于创建对象的 “模板”，能批量生成结构相同的对象；继承则让子类复用父类的属性和方法。

# 1. 定义类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 定义“用户类”（模板）

class User {

&#x20; // 构造函数：初始化属性

&#x20; constructor(name, age) {

&#x20;   this.name = name;

&#x20;   this.age = age;

&#x20; }

&#x20; // 类的方法

&#x20; sayHello() {

&#x20;   console.log("你好，我是" + this.name);

&#x20; }

}

// 用类创建实例（具体对象）

const user1 = new User("小红", 22);

user1.sayHello(); // 输出“你好，我是小红”

# 2. 继承（子类复用父类功能）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 子类“学生”继承父类“User”

class Student extends User {

&#x20; constructor(name, age, grade) {

&#x20;   super(name, age); // 调用父类构造函数

&#x20;   this.grade = grade; // 子类新增属性

&#x20; }

&#x20; // 子类新增方法

&#x20; showGrade() {

&#x20;   console.log(this.name + "的年级是" + this.grade);

&#x20; }

}

// 创建学生实例

const stu1 = new Student("小李", 18, "高三");

stu1.sayHello(); // 复用父类方法，输出“你好，我是小李”

stu1.showGrade(); // 输出“小李的年级是高三”

# 核心总结

  • 类是对象的模板， new 类名() 生成具体对象；

  • extends 实现继承， super() 调用父类方法 / 属性；

  • 继承的核心：复用代码，减少冗余。

# 新手学习小 Tips

  1. 每个知识点配 1-2 个极简案例，敲代码而非只看；

  2. 先掌握基础（变量→函数→循环→对象），再学面向对象；

  3. 用小需求练手（如 “计算 1-100 的和”“创建 3 个用户对象”），巩固知识点。

以上就是 JS 核心基础的核心拆解，把这些知识点吃透，就能搭建起 JS 的基础框架，后续再结合实战不断细化即可～