JavaScript 入门精要：从变量到对象，构建稳固基础-EW帮帮网

本文系统梳理 JavaScript 核心概念，涵盖数据类型、变量声明、对象操作等基础知识，助你打下坚实 JS 基础。

一、代码书写位置与基本语法

在浏览器环境中，JavaScript 代码有两种书写方式：

<!-- 方式1：直接写在script标签中 -->
<script>
  console.log("这是内部JS代码");
</script>

<!-- 方式2：引用外部JS文件（推荐） -->
<script src="script.js"></script>

推荐使用外部文件的原因在于代码分离原则：内容（HTML）、样式（CSS）、功能（JS）三者分离，更易于维护和阅读。

注意：

页面中可以存在多个 script 元素，执行顺序为从上到下
若 script 元素引用了外部文件，其内部不能再书写任何代码
type 属性为可选属性，用于指定代码类型

基本语法规则

// 语句以分号结束（非强制但建议）
let name = "张三";

// 大小写敏感
let age = 20;
let Age = 30; // 这是不同的变量

// 代码从上到下执行
console.log("第一行");
console.log("第二行");

输入输出语句

需要注意的是，所有的输入输出语句都不是 ES 标准。

// 输出语句示例
document.write("这是页面输出"); // 输出到页面
alert("这是弹窗提示"); // 弹窗显示
console.log("这是控制台输出"); // 输出到控制台

// 输入语句示例
let userAge = prompt("请输入你的年龄"); // 获取用户输入
console.log("用户年龄是：" + userAge);

注释的使用

注释是提供给代码阅读者使用的，不会参与执行。

// 这是单行注释

/*
  这是多行注释
  可以跨越多行
*/

// 实际代码
let score = 100; // 设置分数为100

VScode 快捷键：

Ctrl + /: 快速添加/取消单行注释
Alt + Shift + A: 快速添加/取消多行注释

二、数据类型与字面量

数据是指有用的信息，数据类型则是数据的分类。

原始类型（基本类型）

原始类型指不可再细分的类型：

// 1. 数字类型 (number)
let integer = 100; // 整数
let float = 3.14; // 浮点数
let hex = 0xff; // 十六进制：255
let octal = 0o10; // 八进制：8
let binary = 0b1100; // 二进制：12

// 2. 字符串类型 (string)
let str1 = 'Hello'; // 单引号
let str2 = "World"; // 双引号
let str3 = `Hello 
World`; // 模板字符串，可以换行

// 转义字符
let escaped = "这是第一行\n这是第二行\t这里有一个制表符";

// 3. 布尔类型 (boolean)
let isTrue = true; // 真
let isFalse = false; // 假

// 4. undefined 类型
let notDefined; // 值为undefined
console.log(notDefined); // 输出: undefined

// 5. null 类型
let empty = null; // 表示空值

引用类型

// 对象 (Object)
let person = {
  name: "张三",
  age: 25,
  isStudent: false
};

// 函数 (Function)
function sayHello() {
  console.log("Hello!");
}

获取数据类型

使用 typeof 运算符可以获取数据的类型。

console.log(typeof 100); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (注意这是JS的著名特性)

注意：typeof null 得到的是 Object，这是 JavaScript 的一个著名特性（或称为 bug）。

字面量（常量）

直接书写的具体数据称为字面量。

// 数字字面量
123
3.14

// 字符串字面量
"Hello"
'World'

// 布尔字面量
true
false

// 对象字面量
{ name: "张三", age: 25 }

// 数组字面量
[1, 2, 3, 4]

三、变量的声明与使用

变量是一块内存空间，用于保存数据。

变量的使用步骤

声明变量

var message; // 使用var声明（旧方式）
let count; // 使用let声明（推荐）
const PI = 3.14; // 使用const声明常量

变量声明后，其值为 undefined。

变量赋值

let name; // 声明
name = "张三"; // 赋值

let age = 25; // 声明并赋值

声明与赋值合并
```
let name = "张三", age = 25, isStudent = true; // 多个变量声明
```
这是语法糖——仅为方便代码书写或记忆，不会有实质性改变。

变量命名规范（标识符）

标识符是需要自行命名的位置，遵循以下规范：

// 合法标识符
let userName;
let _privateData;
let $element;
let data2023;

// 不合法标识符
// let 123abc; // 不能以数字开头
// let user-name; // 不能包含连字符
// let let; // 不能使用关键字

驼峰命名法：

大驼峰：每个单词首字母大写 UserName
小驼峰：除第一个单词外，首字母大写 userName

目前常用的是小驼峰命名法。

重要特性

变量提升: var变量的声明会自动提升到代码最顶部（但不超越脚本块）

// 变量提升示例
console.log(x); // undefined (不会报错)
var x = 5;
console.log(x); // 5

// 注意：let和const不存在变量提升
// console.log(y); // 报错
let y = 10;

// 重复声明
var z = 1;
var z = 2; // 允许重复声明
console.log(z); // 2

let w = 1;
// let w = 2; // 报错，不能重复声明

任何可以书写数据的地方都可以书写变量
使用未声明的变量会导致错误（例外：typeof 未声明的变量得到 undefined）
变量提升: 所有使用var声明的变量会自动提升到代码最顶部（但不超越脚本块）
JS 允许使用var定义多个同名变量（提升后会合并为一个）

四、变量与对象操作

在变量中存放对象

// 创建对象
let person = {
  name: "张三",
  age: 25,
  "favorite-color": "blue" // 属性名包含特殊字符
};

// 1. 读取对象属性
console.log(person.name); // "张三"
console.log(person.age); // 25
console.log(person.hobby); // undefined (属性不存在)
// console.log(nullObj.name); // 报错 (对象不存在)

// 2. 更改对象属性
person.age = 26; // 修改属性
person.hobby = "读书"; // 添加新属性

// 3. 删除属性
delete person.age;
console.log(person.age); // undefined

// 4. 属性表达式
console.log(person["name"]); // "张三"
let propName = "age";
console.log(person[propName]); // 26 (动态访问属性)
console.log(person["favorite-color"]); // "blue" (访问含特殊字符的属性)

注意: JS 对属性名的命名不严格，属性可以是任何形式的名字，但属性名只能是字符串（数字会自动转换为字符串）。

全局对象

// 浏览器环境中
console.log(window); // 全局对象

// 开发者定义的变量会成为window对象的属性
var globalVar = "我是全局变量";
console.log(window.globalVar); // "我是全局变量"

// 但使用let/const声明的变量不会添加到window对象
let localVar = "我是局部变量";
console.log(window.localVar); // undefined

浏览器环境中，全局对象为 window（表示整个窗口）
全局对象的所有属性可直接使用，无需写上全局对象名
使用var定义的变量实际上会成为 window 对象的属性
使用let/const定义的变量不会添加到window对象

五、引用类型的深层理解

// 原始类型存放具体值
let a = 10;
let b = a; // b是a的值副本
a = 20;
console.log(a); // 20
console.log(b); // 10 (值不变)

// 引用类型存放内存地址
let obj1 = { value: 10 };
let obj2 = obj1; // obj2和obj1指向同一对象
obj1.value = 20;
console.log(obj1.value); // 20
console.log(obj2.value); // 20 (值也跟着变了)

// 对象字面量每次都会创建新对象
let o1 = {};
let o2 = {}; // 这是两个不同的对象
console.log(o1 === o2); // false

原始类型变量存放的是具体值
引用类型变量存放的是内存地址
凡是出现对象字面量的位置（两个大括号），都会在内存中创建一个新对象

拓展知识：垃圾回收

JavaScript 拥有自动垃圾回收机制：

function createObject() {
  let obj = { value: 100 }; // 对象被创建
  return obj;
}

let myObj = createObject(); // 对象被引用，不会被回收
myObj = null; // 对象不再被引用，将成为垃圾被回收

垃圾回收器会定期发现内存中无法访问的对象
这些对象被称为垃圾
垃圾回收器会在合适的时间释放它们占用的内存

结语

掌握 JavaScript 的基础概念是成为优秀开发者的第一步。从变量声明到对象操作，从数据类型到内存管理，这些基础知识构成了 JavaScript 编程的基石。建议初学者多加练习，深入理解每个概念背后的原理，为后续学习更高级的 JavaScript 特性打下坚实基础。

学习建议：多动手实践，尝试不同的代码组合，使用控制台查看结果，加深对每个知识点的理解。

// 实践示例：创建一个简单的个人信息对象
let person = {
  name: prompt("请输入你的姓名"),
  age: parseInt(prompt("请输入你的年龄")),
  hobbies: ["读书", "运动", "音乐"]
};

console.log("姓名:", person.name);
console.log("年龄:", person.age);
console.log("爱好数量:", person.hobbies.length);

// 动态添加新属性
let newHobby = prompt("请添加一个新爱好");
person.hobbies.push(newHobby);

console.log("更新后的爱好:", person.hobbies);

通过这样的实践，你可以更好地理解JavaScript对象和变量的工作方式。

JavaScript 入门精要：从变量到对象，构建稳固基础