本系列可作为前端学习系列的笔记,代码的运行环境是在HBuilder中,小编会将代码复制下来,大家复制下来就可以练习了,方便大家学习。
HTML和CSS系列文章 已经收录在前端专栏,有需要的宝宝们可以点击前端专栏查看!
点赞关注不迷路!您的点赞、关注和收藏是对小编最大的支持和鼓励!
系列文章目录
JavaScript- 1.1 行内、内部、外部三种引用方式
JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval
JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面
JavaScript- 4.1 DOM-document对象
目录
前言
小编作为新晋码农一枚,会定期整理一些写的比较好的代码,作为自己的学习笔记,会试着做一下批注和补充,如转载或者参考他人文献会标明出处,非商用,如有侵权会删改!欢迎大家斧正和讨论!
一、ECMA基本语法和控制流 详解
ECMAScript(简称 ES)是 JavaScript 的核心语言规范,定义了其基础语法和控制流等关键特性。以下将从基本语法和控制流两方面进行详细讲述。
1、ECMAScript 基本语法
1. 变量声明
var:函数作用域,存在变量提升现象。javascriptvar x = 10; console.log(x); // 10let:块级作用域,无变量提升,不可重复声明。javascriptlet y = 20; console.log(y); // 20const:块级作用域,声明常量,必须初始化且不可重新赋值(但对象属性可修改)。javascriptconst PI = 3.14; console.log(PI); // 3.14
2. 数据类型
- 原始类型:
Number、String、Boolean、Null、Undefined、Symbol(ES6 新增)、BigInt(ES2020 新增)。 - 引用类型:
Object(包括Array、Function、Date等)。
3. 运算符
- 算术运算符:
+、-、*、/、%。 - 比较运算符:
==(宽松相等)、===(严格相等)、>、<、>=、<=。 - 逻辑运算符:
&&(逻辑与)、||(逻辑或)、!(逻辑非)。 - 赋值运算符:
=、+=、-=、*=、/=。
4. 函数
- 函数声明:
javascriptfunction add(a, b) { return a + b; } - 箭头函数(ES6):
javascriptconst add = (a, b) => a + b;
5. 对象与数组
- 对象:
javascriptconst person = { name: "Alice", age: 25, greet: function() { console.log("Hello!"); } }; - 数组:
javascriptconst numbers = [1, 2, 3, 4, 5];
6. 模板字符串(ES6)
javascript
const name = "Alice";
console.log(`Hello, ${name}!`); // Hello, Alice!
7. 解构赋值(ES6)
- 数组解构:
javascriptconst [a, b] = [1, 2]; console.log(a, b); // 1 2 - 对象解构:
javascriptconst { name, age } = { name: "Alice", age: 25 }; console.log(name, age); // Alice 25
2、ECMAScript 控制流
1. 条件语句
if...else:javascriptif (x > 0) { console.log("Positive"); } else if (x < 0) { console.log("Negative"); } else { console.log("Zero"); }switch:javascriptswitch (x) { case 1: console.log("One"); break; case 2: console.log("Two"); break; default: console.log("Other"); }
2. 循环语句
for循环:javascriptfor (let i = 0; i < 5; i++) { console.log(i); }while循环:javascriptlet i = 0; while (i < 5) { console.log(i); i++; }do...while循环:javascriptlet i = 0; do { console.log(i); i++; } while (i < 5);for...in循环(遍历对象属性):javascriptconst obj = { a: 1, b: 2, c: 3 }; for (const key in obj) { console.log(key, obj[key]); }for...of循环(ES6,遍历可迭代对象):javascriptconst arr = [1, 2, 3]; for (const value of arr) { console.log(value); }
3. 跳转语句
break:跳出循环或switch语句。continue:跳过当前循环的剩余部分,进入下一次循环。return:从函数中返回。
4. 异常处理
try...catch...finally:javascripttry { // 可能出错的代码 const result = 10 / 0; } catch (error) { // 错误处理 console.error("An error occurred:", error); } finally { // 无论是否出错都会执行的代码 console.log("This always runs."); }
3、总结
ECMAScript 的基本语法和控制流是 JavaScript 开发的基础。掌握变量声明、数据类型、运算符、函数、对象与数组、模板字符串、解构赋值等基本语法,以及条件语句、循环语句、跳转语句和异常处理等控制流,能够帮助开发者编写高效、可维护的代码。随着 ECMAScript 版本的更新(如 ES6+),新增的特性(如箭头函数、模板字符串、解构赋值等)进一步简化了代码的编写,提升了开发效率。
二、代码实践
代码如下:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECMA基本语法和控制流</title>
</head>
<body>
<script type="text/javascript">
var a=[1,2,3];
var sum=0;
for (var i=0;i<a.length;i++) {
sum +=a[i]
}
console.log(sum);
document.write(sum);
</script>
</body>
</html>
代码运行如下:

总结
以上就是今天要讲的内容,本文简单记录了ECMA基本语法和控制流,仅作为一份简单的笔记使用,大家根据注释理解
1366

被折叠的 条评论
为什么被折叠?



