当前位置：首页 > news >正文

前端零基础入门到上班:【Day8】JavaScript 基础语法入门

news 来源：原创 2025/4/29 7:04:59

前端零基础入门到上班:【Day8】JavaScript 基础语法入门（超全！！！）

- 一、JavaScript 简介
- 二、引入 JavaScript 的三种方式
- 三、变量与常量（var、let、const）
- - 3.1 var （传统方式）
  - 3.2 let （ES6新标准）
  - 3.3 const （常量）
- 四、数据类型
- - 4.1 基本类型（值类型）
  - 4.2 引用类型（对象类型）
- 五、运算符
- - 5.1 算术运算符
  - 5.2 赋值运算符
  - 5.3 比较运算符
  - 5.4 逻辑运算符
- 六、流程控制
- - 6.1 条件语句
  - - if-else
    - switch
  - 6.2 循环语句
  - - for
    - while
    - do-while
- 七、函数基础
- - 7.1 函数的定义
  - 7.2 带参数和返回值
  - 7.3 箭头函数（ES6新语法）
- 八、注释规则
- 九、小案例练习：判断奇偶数
第一小结
- 十、变量提升详解
- - 10.1 什么是变量提升？
  - 10.2 let 和 const 不存在变量提升
- 十一、let 和 const 的细节陷阱
- - 11.1 块级作用域
  - 11.2 const 声明引用类型的“对象”
- 十二、数据类型更深层
- - 12.1 typeof 返回值总结
  - 12.2 引用类型的比较
- 十三、运算符更深入
- - 13.1 短路运算
  - 13.2 三元运算符
- 十四、流程控制更深入
- - 14.1 break 和 continue
  - 14.2 嵌套循环
- 十五、函数更高级
- - 15.1 函数表达式
  - 15.2 匿名函数
  - 15.3 回调函数
- 十六、作用域和作用域链
- - 16.1 什么是作用域？
  - 16.2 什么是作用域链？
- 十七、闭包基础
- - 17.1 什么是闭包？
- 十八、小实战
- - 18.1 简易登录验证
  - 18.2 简易闹钟程序
- 十九、常见错误总结
第二小结
- 二十、switch 语句
- 二十一、数组遍历方法大全
- - 21.1 forEach 遍历数组
  - 21.2 for...in 遍历对象/数组
  - 21.3 for...of 遍历数组（ES6）
- 二十二、Math对象常用方法
- 二十三、Date 时间对象基础
- 二十四、字符串常用API
- 二十五、数组常用API
- 二十六、对象操作 (ES5)
- - 26.1 Object.keys()
  - 26.2 Object.values()
- 二十七、JSON基础操作
- 二十八、定时器 setTimeout / setInterval
- - 28.1 延迟执行
  - 28.2 循环执行
- 二十九、错误处理 try...catch
- 三十、小案例：猜数字游戏
- 三十一、小面试题整理（基础）
总结✅
感谢阅读

一、JavaScript 简介

JavaScript 是一门脚本语言，最初为了让网页动起来而诞生。
随着发展，它不仅能操作网页（DOM），还能做服务器开发（Node.js）、小程序开发、桌面应用、移动端应用等等。

特点总结：

解释型语言，无需编译，浏览器直接执行
弱类型语言（变量类型可以变化）
面向对象、函数式编程
主要运行在客户端（也能在服务器端运行）

💬 简单记忆：
JavaScript 让网页动起来 + 也能做服务器和 App！

二、引入 JavaScript 的三种方式

行内式（直接写在 HTML 标签的属性中）

<button onclick="alert('你好，世界！')">点我</button>

内部式（写在 <script> 标签内部）

<!DOCTYPE html>
<html>
<head><title>内部式示例</title>
</head>
<body><script>console.log('Hello World');</script>
</body>
</html>

外部式（写在单独的 .js 文件中，再用 <script src=""> 引入）

index.html：

<script src="main.js"></script>

main.js：

console.log('这是外部文件引入的 JS！');

🌟推荐使用外部式，方便管理代码，清晰整洁！

三、变量与常量（var、let、const）

3.1 var （传统方式）

var name = "Tom";
console.log(name);

特点：

可以重复声明
存在变量提升（会提前到作用域顶部）

console.log(a); // undefined
var a = 10;

3.2 let （ES6新标准）

let age = 18;
console.log(age);

特点：

不允许重复声明
有块级作用域（花括号内有效）
没有变量提升

3.3 const （常量）

const PI = 3.14;

特点：

声明后不能改变值
必须赋初值

const name = "张三";
// name = "李四"; ❌ 错误，不能修改

四、数据类型

JavaScript 有两大类数据类型：

4.1 基本类型（值类型）

Number：数字
String：字符串
Boolean：布尔值
Null：空
Undefined：未定义
Symbol（ES6）
BigInt（ES2020）

示例：

let num = 100;
let str = "前端";
let flag = true;
let empty = null;
let notDefined;

4.2 引用类型（对象类型）

Object（对象）
Array（数组）
Function（函数）
Date（日期）

示例：

let person = { name: "小明", age: 20 };
let hobbies = ["打球", "看电影"];
let sayHi = function() { alert("Hi!"); }

五、运算符

5.1 算术运算符

运算符	说明	示例
+	加	1 + 2
-	减	5 - 3
*	乘	4 * 6
/	除	8 / 2
%	取余	9 % 4

5.2 赋值运算符

运算符	说明	示例
=	赋值	x = 5
+=	加后赋值	x += 3 等价于 x = x + 3

其他：-=, *=, /=, %=

5.3 比较运算符

运算符	说明
==	等于（会进行类型转换）
===	全等（值和类型都要相同）✅ 推荐使用
!=	不等于
!==	不全等
>, <, >=, <=	大小比较

示例：

console.log(5 == "5");  // true
console.log(5 === "5"); // false

5.4 逻辑运算符

运算符	说明	示例
&&	与（and）	true && false -> false
\|\|	或（or）	true \|\| false -> true
!	非（not）	!true -> false

六、流程控制

6.1 条件语句

if-else

let score = 85;
if (score >= 90) {console.log("优秀");
} else if (score >= 60) {console.log("及格");
} else {console.log("不及格");
}

switch

let day = 3;
switch(day) {case 1:console.log("星期一");break;case 2:console.log("星期二");break;case 3:console.log("星期三");break;default:console.log("未知");
}

6.2 循环语句

for

for (let i = 1; i <= 5; i++) {console.log(i);
}

while

let i = 1;
while (i <= 5) {console.log(i);i++;
}

do-while

let j = 1;
do {console.log(j);j++;
} while (j <= 5);

七、函数基础

7.1 函数的定义

function greet() {console.log("你好！");
}
greet();

7.2 带参数和返回值

function add(x, y) {return x + y;
}
let result = add(3, 5);
console.log(result); // 8

7.3 箭头函数（ES6新语法）

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6

八、注释规则

单行注释：//
多行注释：/* */

示例：

// 这是单行注释/*
这是
多行
注释
*/

九、小案例练习：判断奇偶数

练习题目：输入一个数字，判断是奇数还是偶数。

示例代码：

let num = prompt("请输入一个数字");
if (num % 2 == 0) {alert("这是一个偶数");
} else {alert("这是一个奇数");
}

（prompt() 是浏览器弹窗输入框）

第一小结

我们学习了掌握了变量、数据类型、运算符、条件循环、函数等知识。

十、变量提升详解

10.1 什么是变量提升？

变量声明（var 声明的变量）和函数声明会被提升到作用域顶部。

示例：

console.log(name); // undefined
var name = "小王";

解析：
实际上浏览器会这样理解你的代码：

var name;
console.log(name); // undefined
name = "小王";

注意：只提升声明，不会提升赋值！

10.2 let 和 const 不存在变量提升

console.log(age); // 报错：ReferenceError
let age = 18;

原因：
let 和 const 在声明之前是“暂时性死区”，不能访问。

十一、let 和 const 的细节陷阱

11.1 块级作用域

let/const 声明的变量只在它所在的代码块 {} 内有效。

{let a = 10;
}
console.log(a); // 报错：a is not defined

11.2 const 声明引用类型的“对象”

对象的属性可以改动，但对象的引用地址不能变。

const person = { name: "张三" };
person.name = "李四";  // ✅ 可以改属性
// person = {};  ❌ 错误，不能整体赋值新对象

十二、数据类型更深层

12.1 typeof 返回值总结

数据	typeof 返回
number	“number”
string	“string”
boolean	“boolean”
undefined	“undefined”
null	“object” （注意！）
array	“object”
object	“object”
function	“function”

重点注意：

typeof null 返回 "object" —— 这是历史遗留的设计错误！

如果要判断数组可以用：

Array.isArray(arr); // true

12.2 引用类型的比较

引用类型（如对象、数组、函数）比较的是地址而不是内容！

let obj1 = { a: 1 };
let obj2 = { a: 1 };
console.log(obj1 == obj2); // false
console.log(obj1 === obj2); // false

即使内容一模一样，它们也是两个不同的对象！

十三、运算符更深入

13.1 短路运算

&&（与运算）：第一个为 false，返回第一个；否则返回第二个。
||（或运算）：第一个为 true，返回第一个；否则返回第二个。

示例：

console.log(0 && 5);   // 0
console.log(3 && 5);   // 5
console.log(0 || 5);   // 5
console.log(3 || 5);   // 3

常用于设置默认值：

let name = userInput || "默认值";

13.2 三元运算符

条件表达式 ? 表达式1 : 表达式2;

示例：

let age = 20;
let result = age >= 18 ? "成年人" : "未成年人";
console.log(result); // 成年人

十四、流程控制更深入

14.1 break 和 continue

break：立即跳出整个循环
continue：跳过本次循环，进入下一次

示例：

for (let i = 1; i <= 5; i++) {if (i === 3) {continue; // 跳过 i==3}console.log(i);
}

输出：

14.2 嵌套循环

for (let i = 1; i <= 3; i++) {for (let j = 1; j <= 3; j++) {console.log(`i=${i}, j=${j}`);}
}

十五、函数更高级

15.1 函数表达式

const add = function(x, y) {return x + y;
};
console.log(add(2, 3));

特点：函数可以赋值给变量。

15.2 匿名函数

没有名字的函数：

setTimeout(function() {console.log('延迟2秒输出');
}, 2000);

15.3 回调函数

把一个函数作为参数传给另一个函数。

function greeting(name) {alert('Hello ' + name);
}function processUserInput(callback) {let name = prompt('请输入你的名字');callback(name);
}processUserInput(greeting);

十六、作用域和作用域链

16.1 什么是作用域？

作用域就是变量生效的范围。

全局作用域
函数作用域
块级作用域（let、const）

16.2 什么是作用域链？

如果当前作用域找不到变量，就会向外层作用域查找，直到全局。

示例：

let a = 10;
function outer() {let b = 20;function inner() {console.log(a); // 10 （向外找到了）console.log(b); // 20}inner();
}
outer();

十七、闭包基础

17.1 什么是闭包？

闭包是：函数内部返回一个函数，并且这个返回的函数仍然可以访问外部函数的变量。

示例：

function outer() {let count = 0;return function() {count++;console.log(count);}
}
let counter = outer();
counter(); // 1
counter(); // 2

闭包应用场景：

延长局部变量的生命周期
封装私有变量

十八、小实战

18.1 简易登录验证

let username = prompt("请输入用户名");
let password = prompt("请输入密码");if (username === "admin" && password === "123456") {alert("登录成功！");
} else {alert("用户名或密码错误！");
}

18.2 简易闹钟程序

setTimeout(function() {alert("时间到啦！");
}, 5000); // 5秒后弹出

十九、常见错误总结

错误情况	原因
使用未声明变量	使用变量前必须声明
忘记加分号	JS 会自动补全，但可能出错
if/for 后忘记加 `{}`	建议始终加上花括号
区分 == 和 ===	推荐永远用 ===
忘记 break 导致 switch 穿透	每个 case 后加 break

第二小结

✅ 本篇巨细无遗地讲完了 JavaScript 基础语法（加强版）
✅ 帮你打下了扎实的地基
✅ 还穿插了小案例帮助理解

二十、switch 语句

switch 语句用来基于不同的值执行不同的代码块，适合多条件判断。

let color = "green";switch (color) {case "red":console.log("红色");break;case "green":console.log("绿色");break;case "blue":console.log("蓝色");break;default:console.log("未知颜色");
}

注意：

每个 case 后面通常需要 break。
没有 break 会继续往下执行（case 穿透）。

二十一、数组遍历方法大全

21.1 forEach 遍历数组

let arr = [1, 2, 3];
arr.forEach(function(item, index) {console.log(index, item);
});

特点：

遍历数组每一项
无法中途跳出循环（break 不起作用）

21.2 for…in 遍历对象/数组

let person = {name: "小明", age: 18};
for (let key in person) {console.log(key, person[key]);
}

注意：

for...in 是遍历对象的属性名
遍历数组时可能顺带遍历原型链上的属性（一般不用它遍历数组）

21.3 for…of 遍历数组（ES6）

let arr = ["a", "b", "c"];
for (let item of arr) {console.log(item);
}

特点：

直接拿到数组的每一项
不适合对象遍历

二十二、Math对象常用方法

JavaScript 提供了 Math 对象，封装了数学运算常用方法。

console.log(Math.PI); // 圆周率
console.log(Math.round(4.5)); // 四舍五入 5
console.log(Math.floor(4.9)); // 向下取整 4
console.log(Math.ceil(4.1));  // 向上取整 5
console.log(Math.random());   // 0~1随机小数
console.log(Math.max(1, 99, 88)); // 最大值
console.log(Math.min(1, 99, 88)); // 最小值

👉 常见应用：生成随机整数

let rand = Math.floor(Math.random() * 100); // 0-99随机整数
console.log(rand);

二十三、Date 时间对象基础

获取当前时间：

let now = new Date();
console.log(now);

常用方法：

console.log(now.getFullYear()); // 年
console.log(now.getMonth() + 1); // 月（注意：0~11）
console.log(now.getDate());     // 日
console.log(now.getHours());    // 小时
console.log(now.getMinutes());  // 分钟
console.log(now.getSeconds());  // 秒

格式化输出（自己拼接）：

let dateStr = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
console.log(dateStr);

二十四、字符串常用API

let str = "hello world";console.log(str.length);     // 长度
console.log(str.toUpperCase()); // 转大写
console.log(str.toLowerCase()); // 转小写
console.log(str.indexOf("world")); // 查找子串位置
console.log(str.slice(0, 5));     // 截取字符串
console.log(str.replace("world", "JavaScript")); // 替换内容
console.log(str.split(" "));  // 按空格分割成数组

二十五、数组常用API

let arr = [1, 2, 3];// 添加/删除
arr.push(4);  // 尾部添加
arr.pop();    // 尾部删除
arr.unshift(0); // 头部添加
arr.shift();   // 头部删除// 拼接新数组
let arr2 = arr.concat([5,6]);// 截取部分
let part = arr.slice(1,3);// 遍历映射
let newArr = arr.map(function(item){return item * 2;
});

二十六、对象操作 (ES5)

26.1 Object.keys()

返回对象所有可枚举属性名数组：

let obj = {a:1, b:2};
console.log(Object.keys(obj)); // ["a", "b"]

26.2 Object.values()

返回对象所有属性值数组：

console.log(Object.values(obj)); // [1, 2]

二十七、JSON基础操作

JavaScript 原生支持 JSON：

对象转字符串：JSON.stringify
字符串转对象：JSON.parse

let person = {name: "Tom", age: 20};let str = JSON.stringify(person);
console.log(str); // '{"name":"Tom","age":20}'let obj = JSON.parse(str);
console.log(obj.name); // Tom

二十八、定时器 setTimeout / setInterval

28.1 延迟执行

setTimeout(function(){console.log("3秒后执行");
}, 3000);

28.2 循环执行

let timer = setInterval(function(){console.log("每隔2秒执行一次");
}, 2000);// 停止循环
clearInterval(timer);

二十九、错误处理 try…catch

异常捕获机制，防止程序直接崩溃。

try {let x = y + 1; // y未定义，报错
} catch(error) {console.log("出错啦：" + error.message);
}

三十、小案例：猜数字游戏

let answer = Math.floor(Math.random() * 100) + 1;
let guess;while (true) {guess = parseInt(prompt("猜一个1到100的数字："));if (guess > answer) {alert("太大了！");} else if (guess < answer) {alert("太小了！");} else {alert("恭喜你，猜对了！");break;}
}

三十一、小面试题整理（基础）

题目	简答
typeof null 是什么？	“object”（历史Bug）
var、let、const 区别？	var 有提升，let/const 有块级作用域
== 和 === 区别？	== 会类型转换，=== 不会
什么是闭包？	函数内部返回函数并引用外部变量
怎么判断数组？	Array.isArray(arr)

总结✅

经过今天【Day8】的系统学习，我们已经完成了 JavaScript 入门阶段最关键的一步：

✅ 理解了 JavaScript 的基本数据类型与变量声明。
✅ 掌握了流程控制（条件判断、循环）与函数定义调用。
✅ 理解了数组、对象的基础操作和遍历方式。
✅ 学习了内置对象（Math、Date、JSON）和常用API。
✅ 初步掌握了定时器、异常处理、基础案例练习。
✅ 同时，还补充了常见面试题，夯实基础。

这一套内容，既覆盖了理论知识，又贯穿了实战技巧，可以说打下了非常扎实的基础。
JavaScript入门，已经可以小试牛刀了！