Day 2｜JavaScript 入门：数据类型、运算符、条件循环与函数
前言
在开始学习 JavaScript 之前，很多新手可能会先联想到 Java，但需要明确的是：Java 与 JavaScript 并没有直接关系。JavaScript（简称 JS）是一门被广泛用于前端开发的脚本语言，能够用于开发网页交互、各种小程序、移动端应用（Android/iOS）甚至 Windows 桌面应用等。更重要的是，在 Node.js 的加持之下，JS 也可以作为后端语言使用，从而让开发者具备“前后端一体”的能力。
因此，学习 JS 的意义不仅是“会写网页脚本”，更是为后续构建完整的全栈开发能力打基础。本篇作为 Day 2 学习记录，将按照学习顺序梳理：数据类型、运算符、条件与循环语句、函数，并配合简单示例进行理解。
一、数据类型
1.1 在 HTML 中引入 JavaScript（script 标签）
最直接的方式是在 body 内部添加 <script> 标签，并在其中定义变量。此处我们使用 let 声明变量，并通过 console.log() 在浏览器控制台输出结果。
<body>
<script>
let str="sj中文dns";
let num="1234";
let bool1=true;
console.log(str,num,bool1);
</script>
</body>
打开浏览器开发者工具（F12）→ Console，即可看到变量输出。变量也可以后续直接修改，例如：
str='修改后的内容';
num="3213";
1.2 对象（Object）
除了基本类型外，JavaScript 还支持更复杂的数据结构，其中最常用的一类是对象（Object）。对象使用“键值对（key-value）”组织数据，适合用来描述一个实体的多个属性。对象的属性可以被修改、新增，也可以被删除。
<script>
let obj={
name:'新手小白',
age:18,
bool:true
}
obj.name='小白';
obj.male=true;
delete obj.name;
console.log(obj);
</script>
上面的代码包含了对象的三类典型操作：
obj.name=‘小白’：修改已有属性
obj.male=true：新增属性
delete obj.name：删除属性
1.3 数组（Array）
数组用于存放有序数据，并支持通过下标访问元素。需要注意：数组下标从 0 开始。数组常见操作包括修改元素、在末尾添加、在开头添加、在任意位置插入等。
<script>
let arr=[1,2,3,4,5,6,7]
arr[0]=88 // 注意数组下标从0开始
arr.push(999) // 在数组最后一位添加
arr.unshift(888) // 在数组第一位添加
arr.splice(2,0,'new element') // 在任意位置添加（从下标2开始，删除0个，插入新元素）
console.log(arr);
</script>
二、运算符
2.1 加减乘除以及字符串拼接
JavaScript 支持基础四则运算（加减乘除），同时也可以用 + 来进行字符串拼接。在编写输出时，console.log()是最常用的调试方式之一。
<script>
let num1=4;
let num2=2;
console.log(num1+num2);
console.log(num1–num2);
console.log(num1*num2);
console.log(num1/num2);
let str1='hello';
let str2='world';
console.log(str1+' '+str2);
</script>
2.2 特殊运算符（自增 & 自减）
自增运算符 ++ 的关键区别在于前置与后置：
num++：先使用当前值，再加 1；
++num：先加 1，再使用。
<script>
let num=1;
console.log(num++); // 先使用再加一，打印结果为1
console.log(num); // 打印结果为2
console.log(++num); // 先加一，再使用
console.log(num); // 打印结果为3
</script>
自减运算符 – 同理：num– 与 –num 的差别也是“先使用还是先变化”。
2.3 比较运算符
比较运算符的输出结果一定是布尔值（true 或 false）。其中最容易混淆的是 == 与 ===：
==：只比较“值”是否相等（可能发生类型转换）
===：严格比较，“值”和“类型”都必须相等
在实际开发中，更推荐使用 ===，以避免隐式类型转换带来的歧义。
2.4 逻辑运算符
逻辑与（&&）、逻辑或（||）以及逻辑非（!）常用于条件判断与筛选逻辑：
<script>
console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false
console.log(true || true); // true
console.log(true || false); // true
console.log(false || false); // false
console.log(!true); // false
console.log(!false); // true
</script>
三、条件 & 循环语句
3.1 if…else 语句
if (false){
console.log('你好');
}else{
console.log('hi');
}
3.2 for 循环
for 循环适用于重复执行某段逻辑，或对数组进行遍历。最基础的形式如下：
for (let i=0; i<3; i++){
console.log('你好');
}
遍历数组示例如下，其中循环次数通常由 arr.length 决定：
let arr=['你','好','世','界','123'];
for (let i=0; i<arr.length; i++){
console.log(arr[i]);
}
四、函数
4.1 函数的定义与调用
函数用于封装可复用的逻辑，语法形式与 C/C++ 等语言较为相近。本阶段先掌握“定义 + 调用”的基本模式即可。
function add(){
console.log('你好');
console.log('hi');
}
add();
add();
add();
后续在 DOM 事件处理、表单交互以及 Vue 组件方法中，函数会成为最核心的组织方式之一。
总结
本篇完成了 Day 2 的 JavaScript 基础学习：掌握了变量与常见数据类型（字符串、布尔、对象、数组），理解了运算符体系（四则运算、自增自减、比较与逻辑），并学习了条件判断、循环以及函数的基本用法。这些内容构成了 JS 的核心基础，也是后续实现 Todo-App “新增/删除/完成态切换”等交互功能的前置知识。
下一篇 Day 3 将开始学习 Vue，进入组件化与数据驱动的开发方式。
