条件判断语句
if...else...
if语句中，指定的条件为真，会指定if后面的语句；如果条件为假，则执行另一段语句。
语法
if (condition1)
statement1
[else if (condition2)
statement2
...]
[else
statementn]
参数：
- condition1：值为真或假的表达式。
- statement：前面的表达式为真，执行的语句块。
注意事项：条件表达式中，false、undefined、null、0、NaN或空字符串（""）表示为假，其余的情况为真。
三元表达式（简略的if..else语句）
condition ? trueBlock : falseBlock;
condition为真，执行trueBlock；为假执行falseBlock
switch
switch语句评估一个表达式，将表达式的值与case子句匹配，并执行与该情况相关联的语句。
语法
switch(expression) {
case value1:
// 当expression的结果与value1匹配时，执行此语句
[break;]
case value2:
// 当expression的结果与value2匹配时，执行此语句
[break;]
...
[default:
// 如果expression与上面的value值都不匹配，执行此语句
[break;]
]
}
参数：
- expression：与case子句匹配的表达式。
- case valueN：用于匹配expression的case子句；执行后，直到遇到
break;。 - default：与所有的case语句都不匹配时执行。
注意事项： - case中进行判断的时候，使用的是严格运算符
=== - expression和case语句都可以使用表达式
迭代语句
for
for语句用于创建一个循环，包含三个可选表达式，这三个表达式被包围在圆括号之后，使用分号进行分割，后跟一个用在循环中执行的语句。
语法
for ([init]; condition; final-expression)
statement
参数：
- init：进行变量的声明
- condition：确定每一次循环是否能执行。如果为真，执行statement，之后执行final-expression；否则执行final-expression。【如果该语句被忽略时，表示用于为真】
- final-expression：每次循环最后都要执行的表达式。
注意： - for循环具有块作用域，使用let、var、const声明变量有差异。
- 使用break语句终止本层循环体
- 使用continue语句终止本次执行。
while
while语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。
语法
while (condition)
statement
参数：
- condition：条件表达式，在每次循环之前执行。值为真，执行；否则跳出while循环。
- statement：条件表达式为真的时候执行。
注意： - 使用break语句终止本层循环体
- 使用continue语句终止本次执行。
do...while
do...while语句创建一个执行指定语句的循环，直到条件为假。执行完语句之后才去检测条件，所有循环体至少执行一次。
语法
do {
statement;
} while (condition);
参数：
- condition：条件表达式，在每次循环之后执行。值为真，执行；否则跳出while循环。
- statement：条件表达式为真的时候执行。
注意： - 使用break语句终止本层循环体
- 使用continue语句终止本次执行。
for...in
for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
语法
for (varialbe in obj) {
statement
}
参数：
- varible：在每次迭代是，variable会被赋值为不同的属性名。
- object：非Symbol类型的可枚举属性被迭代的对象。
注意 - for...in：不应该用于迭代一个关注属性顺序的数组。
- 如果你只考虑对象本身的属性，而不是它的原型，那么使用
getOwnPropertyNames()或执行hasOwnProperty()来确定某属性是否是对象本身的属性。 - 可以使用break和continue关键字
for...in的好处
for...in是为遍历对象属性而构建的，不建议与数组一起使用。数组可以使用Array.prototype.forEach()和for...of。
for...in最常用的地方应该是用于调试，可以更方便的去检查对象属性。我们在处理有key-value数据（属性作为键），需要检查其中的任何键是否为某值的情况时，推荐使用for...in
<!DOCTYPE html>
<html>
<head>
<title>迭代器</title>
</head>
<body>
<script>
"use strict"
var obj = {
a: 1,
b: 2,
c: 3
};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
//obj.a = 1
//obj.b = 2
//obj.c = 3
var arr = ["a", "b", "c"]
for (var index in arr) {
console.log("arr[" + index + "]=" + arr[index])
}
//arr[0]=a
//arr[1]=b
//arr[2]=c
</script>
</body>
</html>
for...of
for...of语句在可迭代对象（包括arguments、String、Array、Map、Set等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
语法
for (variable of iterable) {
statement;
}
参数：
- variable：在每次迭代中，将不同属性的值分配给变量。
- iterable：被迭代枚举其属性的对象。
注意事项 - for...of底层是用迭代器事项，可以使用break、throw、continue或return关闭迭代器
<!DOCTYPE html>
<html>
<head>
<title>迭代器</title>
</head>
<body>
<script>
"use strict"
let iterablearr = [10, 20, 30];
for (let value of iterablearr) {
console.log(value);
}
// 10
// 20
// 30
let iterablestr = "boo";
for (let value of iterablestr) {
console.log(value);
}
// "b"
// "o"
// "o"
</script>
</body>
</html>
for...of VS for...in
for...in和for...of语句都是迭代一些东西，它们之间主要的区别是它们的迭代方式。
| for...in | for...of | |
|---|---|---|
| 以任意顺序迭代对象的可枚举属性[属性的设置] | 遍历可迭代对象定义的要迭代的数据 |
分别使用for...in和for...of迭代数组
<!DOCTYPE html>
<html>
<head>
<title>迭代器</title>
</head>
<body>
<script>
"use strict"
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
let iterable = [3, 5, 7];
iterable.foo = 'hello';
for (let i in iterable) {
console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i of iterable) {
console.log(i); // 3, 5, 7
}
</script>
</body>
</html>
异常控制语句
throw
throw语句用来抛出一个用户自定义的异常，当前函数的执行将被停止（throw之后的语句将不会执行），并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch语句块，程序将被终止。
语法
throw expression;
使用throw语句来抛出一个异常。当抛出异常时，expression执行了异常的内容。
try...catch
try...catch语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。【捕获异常】
语法
try {
// 尝试的语句块
} [catch( exception1 ) {
// 抛出exception1时执行的语句
}]
...
[catch( exception1 ) {
// 抛出exception1时执行的语句
}]
[finally {
// try语句块之后执行的语句块。无论是否有异常抛出或捕获，该语句块都会执行。
}]
catch子句包含try块中抛出异常时要执行的语句。即我们在尝试运行一些内容，如果运行失败，我们想要控制接下来的操作，我们就可以在catch语句中实现。如果try语句块中抛出异常，则立即转向catch语句块，否则会跳过catch语句块。
finally子句在try块和catch块之后执行，无论是否有异常抛出或捕获它，finally语句块总是执行。
控制关键字
break
break语句终止当前循环体。
语法
break [label];
参数：
- label：与语句标签相关联的标识符。如果brea语句不在循环体或
switch语句中，该选项是必须的。
注意事项
- break语句不能在function函数体中直接使用，break语句应嵌套在要中断的当前循环、switch或label语句中。
continue
continue终止本次 循环或标记循环的当前迭代中的语句执行，并在下一次迭代时继续执行循环。
语法
continue [label];
参数：
- label：标识标号关联的语句。
与break语句的区别：continue并不会终止循环的迭代，而是：
1、在while循环中，控制流跳转回条件判断。
2、在for循环中，控制流跳转到更新语句。
debugger
debugger语句调用任何可用的调试功能，例如设置断点。如果没有调试功能可用，此语句不起作用。
语法
debugger;
其他控制
export
在创建JavaScript模块时，export语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过import语句使用它们。无论是否声明，导出的模块都处于严格模式。
语法
两种导出的方式：
1、命名导出（每个模块包含任意数量）
2、默认导出（每个模块包含一个）
// 导出单个特性
// 声明时导出
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}
// 导出列表
// 声明和导出分开，必须使用语句块进行导出
export { name1, name2, …, nameN };
// 重命名导出【重命名之前 as 重命名之后】
export { variable1 as name1, variable2 as name2, …, nameN };
// 解构导出并重命名【属性名 : 重命名后的属性名】
export const { name1, name2: bar } = o;
// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
// 导出模块合集
export * from "src"; // does not set the default export
export * as name1 from "src"; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from "src";
export { import1 as name1, import2 as name2, …, nameN } from "src";
export { default } from "src";
注意事项：
1、导出的是默认值，且为变量时，不能边声明边导出
2、声明和导出分开，必须使用语句块进行导出
import
静态的import语句用于导入由另一个模块导出的绑定。导入的模块都运行在严格模式。在浏览器中，import语句只能在声明了type ="moduel"的<script>标签中使用。【初始化加载依赖项】
动态的import()，他不需要依赖type="moduel"的<script>标签。【按需加载模块】
语法
import defaultExport from "module-name"; // 导入默认值
import * as name from "module-name"; // 获取所有导出的内容，并进行重命名【作为命令空间使用】
import { export } from "module-name"; // 获取命名导出的内容
import { export as alias } from "module-name"; // 获取命名导出的内容，并进行重命名
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name"; // 导入默认值和命名值，default导入必须首先声明
import "module-name"; // 副作用导入，实际上不导入模块中的任何内容
var promise = import("module-name");//这是一个处于第三阶段的提案。
注意事项：
1、注意导出后重命名，导入时应该按照重命名后的进行信息读取。
2、默认导出和命名导出可以合并，默认导出在语句块外面，命名导出在语句块里面。
