JavaScript 基础语法与核心知识点学习记录
在前端开发学习过程中，JavaScript（简称 JS）作为网页交互的核心语言，其基础语法和核心知识点至关重要。近期我对 JS 的一些基础内容进行了学习实践，下面将这些学习成果整
一、数组相关
数组是 JS 中存储多个数据的重要结构。我们可以通过简单的赋值来定义数组，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
// 定义数组
var arr = [5,7,4,2,0,3,1,6];
console.log(arr);// 打印数组
</script>
</body>
</html>
在浏览器的控制台中，能看到数组 [5,7,4,2,0,3,1,6] 被成功打印，这也验证了数组定义和打印的基本操作是可行的。
二、异常处理（try-catch-finally）
在程序运行过程中，可能会出现各种异常情况，JS 提供了 try-catch-finally 结构来处理异常。
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
try{
var i=4;
if(i>5){
throw"这里有一个错误";// 自定义异常抛出
}
console.log("---------");
}catch(e){
console.log("上面出现了错误");
}finally{
console.log("无论成功还是失败都会执行的代码块");
}
</script>
</body>
</html>
在这个例子中，因为 i = 4 不满足 i > 5，所以不会抛出异常，try 块内的 console.log("---------") 会执行，然后执行 finally 块内的代码。如果将 i 的值改为大于 5 的数，就会进入 catch 块处理异常，最后同样会执行 finally 块的代码，这体现了 finally 块 “无论是否发生异常都会执行” 的特性。
三、条件判断（if-else if-else）
通过 if-else if-else 可以根据不同条件执行不同的代码逻辑，比如根据年龄判断人群类别：
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
function test(age){
age = parseInt(age);// 将字符串转换为数字
if (typeof age==="number"){
if(age>60){
console.log("老年人")
}else if(age>40){
console.log("中年人")
}else if (age>20){
console.log("青年人")
}else {
console.log("少年")
}
}else{
console.log("参数不是数据类型的")
}
}
test("19")
</script>
</body>
</html>
调用 test("19") 时，先将字符串 "19" 转换为数字 19，然后根据条件判断输出 “少年”。
四、分支结构（switch-case）
switch-case 适用于多分支且条件值为固定值的情况，比如根据星期几进行不同的输出：
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
var date = new Date().getDay();
switch (date) {
case 0:
console.log("星期日");
break;
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
default:
console.log("信息错误");
break;
}
</script>
</body>
</html>
new Date().getDay() 获取当天是星期几（0 表示星期日，1 表示星期一，以此类推），然后 switch 语句根据这个值执行对应的 case 分支。
五、循环结构
1. do-while 循环
do-while 循环会先执行一次循环体，然后再判断条件是否满足：
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
var sum=0;
var i=0;
do {
sum +=i;
i++
}while (i<=100)
console.log(sum);
</script>
</body>
</html>
这里计算 0 到 100 的和，最后输出 5050，验证了 do-while 循环的执行逻辑。
2. for 循环及 continue、break
for 循环是常用的循环结构，continue 用于跳过本次循环剩余语句，进入下一次循环；break 用于终止整个循环。
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
for(var i = 0;i<10;i++){
for(var j = 0;j<5;j++){
console.log("当前i的值="+i);
if(i == 2){
continue;
}
}
}
</script>
</body>
</html>
这个嵌套循环中，当 i == 2 时，执行 continue，跳过当前内层循环剩余部分，进入下一次内层循环。
六、函数相关
1. 普通函数
可以定义带参数和返回值的普通函数：
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
function hello(name){
if(typeof name == 'string'){
return name+"你好";
}
}
var message = hello("admin");
alert(message);
</script>
</body>
</html>
调用 hello("admin") 会返回 “admin 你好”，并通过 alert 弹出
2. 匿名函数
匿名函数没有函数名，通常赋值给变量使用：
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
const anonymousFunction = function() {
console.log("这是一个匿名函数");
};
anonymousFunction();
</script>
</body>
</html>
调用 anonymousFunction() 会输出 “这是一个匿名函数”。
3. 局部函数
JS 中可以在函数内部定义局部函数，局部函数只能在所在的外部函数内部使用：
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
function test(){
function inner(){
// 局部函数逻辑
}
}
</script>
</body>
</html>七、JSON 相关
JSON（JavaScript Object Notation）是用于存储和交换数据的轻量级格式，以键值对形式组织数据。
<!DOCTYPE html>
<html>
<head>
<title>js学习</title>
</head>
<body>
<script>
// JSON 对象
var object = {"name":"京东","url":"www.jingdong.com"};
console.log(object.name);
console.log(object.url);
// JSON 数组
var jsonArray = [
{"name":"京东","url":"www.jingdong.com"},
{"name":"阿里巴巴","url":"www.alibaba.com"},
{"name":"腾讯","url":"www.tengxun.com"}
]
console.log(jsonArray[1].name);
</script>
</body>
</html>
对于 JSON 对象 object，可以通过 object.name、object.url 获取对应的值；对于 JSON 数组 jsonArray，可以通过索引（如 jsonArray[1]）结合键名（如 name）获取数组中指定对象的对应值。
通过对这些 JS 基础知识点的学习和实践，我对 JS 的核心语法有了更清晰的认识，这为后续更深入的前端开发学习奠定了基础。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
25
0- 0
已为社区贡献10条内容
所有评论(0)