From 7e2b9d433a22ff6ebf425aa75f4582a332bdcccd Mon Sep 17 00:00:00 2001 From: PinkR1ver <3180102330@zju.edu.cn> Date: Fri, 29 Mar 2024 17:20:10 +0800 Subject: [PATCH] Add note --- .../coding_knowledge/js/for_loop.md | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 content/computer_sci/coding_knowledge/js/for_loop.md diff --git a/content/computer_sci/coding_knowledge/js/for_loop.md b/content/computer_sci/coding_knowledge/js/for_loop.md new file mode 100644 index 000000000..149b67616 --- /dev/null +++ b/content/computer_sci/coding_knowledge/js/for_loop.md @@ -0,0 +1,76 @@ +--- +title: for...in, for...of, forEach +tags: + - coding-language + - basic + - javascript +date: 2024-03-29 +--- +在 JavaScript 中,**for...in**、**for...of** 和 **forEach** 都是用于遍历对象的循环语句。但是,它们之间存在一些关键的区别。 + +## 遍历对象类型 + +- **for...in**:用于遍历对象的 **可枚举属性**,包括原型链上的属性。 +- **for...of**:用于遍历 **可迭代对象**,包括数组、字符串、Set、Map 等。 +- **forEach**:只能用于遍历 **数组**。 + +## 遍历顺序 + +- **for...in**:遍历对象的属性的 **键名** 顺序。 +- **for...of**:遍历对象的 **元素值** 顺序。 +- **forEach**:遍历数组的 **元素值** 顺序。 + +## 终止循环 + +- **for...in**:可以使用 **break** 语句终止循环。 +- **for...of**:可以使用 **break** 语句终止循环。 +- **forEach**:**不能** 使用 **break** 语句终止循环。 + +## 回调函数 + +- **for...in**:没有回调函数。 +- **for...of**:没有回调函数。 +- **forEach**:需要传入一个回调函数,该函数会在每个元素上调用一次。 + +## 总结 + +|循环语句|遍历对象类型|遍历顺序|终止循环|回调函数| +|---|---|---|---|---| +|**for...in**|可枚举属性|键名|支持|无| +|**for...of**|可迭代对象|元素值|支持|无| +|**forEach**|数组|元素值|不支持|支持| + +**示例** + +JavaScript + +```js +// 遍历对象的可枚举属性 +const obj = { + a: 1, + b: 2, + c: 3, +}; + +for (const key in obj) { + console.log(key); // a, b, c +} + +// 遍历数组的元素值 +const arr = [1, 2, 3]; + +for (const value of arr) { + console.log(value); // 1, 2, 3 +} + +// 遍历数组的元素值,并对每个元素执行操作 +arr.forEach((value) => { + console.log(value * 2); // 2, 4, 6 +}); +``` + +## 使用建议 + +- **for...in**:适合遍历对象的属性名或键。 +- **for...of**:适合遍历可迭代对象的元素值。 +- **forEach**:适合遍历数组并对每个元素执行相同操作。 \ No newline at end of file