ES12 中 for in 和 for of 用法的区别
在 JavaScript 中，for in 和 for of 结构都是循环遍历操作符，但是它们有着不同的用法。在 ES12 中，for in 和 for of 的用法有了一些升级和变化，因此我们需要了解它们之间的区别和使用方法。
一、for in
for in 用于遍历对象(包括数组)的属性，会遍历对象继承的属性和原型链上的属性。每次循环会将属性的名称赋值给变量，然后通过该变量查找对应的值。以下是 for in 的语法：
for (let key in object) {
//执行代码
}其中，key 为每一次循环时遍历到的属性名。
for in 的一个使用场景是检索对象内部属性，例如：
const obj = {name: '小明', age: 18, sex: '男'}
for (let key in obj) {
console.log(`${key}: ${obj[key]}`)
}
// 输出： name: 小明，age: 18，sex: 男另一个使用场景是查找数组中的索引，例如：
const arr = ['a', 'b', 'c'];
for (let index in arr) {
console.log(index)
}
// 输出： 0, 1, 2需要注意的是，for in 遍历的是对象的属性名，而不是属性值。因此，在 for in 循环中不应该用于数组的遍历。
二、for of
for of 用于遍历对象(包括数组)的属性值，不会遍历对象继承的属性和原型链上的属性。每次循环会将属性的值赋值给变量，然后通过该变量查找对应的属性值。以下是 for of 的语法：
for (let value of iterable) {
// 执行代码
}其中，value 为每一次循环时遍历到的属性值。
for of 的一个使用场景是遍历数组，例如：
const arr = ['a', 'b', 'c'];
for (let value of arr) {
console.log(value)
}
// 输出： a, b, c另一个使用场景是遍历字符串，例如：
const str = 'Hello, World!';
for (let character of str) {
console.log(character)
}
// 输出： H, e, l, l, o, ,, , W, o, r, l, d, !需要注意的是，for of 不支持对象遍历，只支持可迭代对象的遍历。
三、for in 和 for of 的区别
for in 遍历的是对象的属性名，for of 遍历的是对象的属性值。
for in 遍历对象时，循环变量遍历的是对象的键名(属性名)，for of 遍历可迭代对象时，循环变量遍历的是元素的值(属性值)。
for in 遍历的是所有可枚举属性(包括原型链上的属性)，for of 只遍历自有属性。
for in 可以遍历所有对象，包括原型和继承过来的属性，而 for of 只能遍历具有 Symbol.iterator 属性的对象，例如 Map、Set、Array 和字符串等。
四、结论
通过对 for in 和 for of 的详细介绍，我们可以得出以下结论：
如果要遍历对象的属性名，选择 for in。
如果要遍历对象的属性值，选择 for of。
如果要遍历数组或可迭代对象中的元素或值，选择 for of。
需要注意的是，for in 遍历对象时，可能遍历到原型中的属性，因此需要判断对象中是否具有该属性。
总的来说，在实际的开发中，需要根据实际情况选择合适的遍历操作符，以方便我们更好地处理数据，并能够提高程序的效率。
示例代码：
-- -------------------- ---- -------
-- --- --
----- --- - ------ ----- ---- --- ---- ----
--- ---- --- -- ---- -
-- ------------------------- -
-------------------- -------------
-
-
-- --- ----- ------- ------- -
----- --- - ----- ---- -----
--- ---- ----- -- ---- -
------------------
-
-- --- -- -- -
-- --- --
----- --- - ----- ---- -----
--- ---- ----- -- ---- -
------------------
-
-- --- -- -- -
----- --- - ------- --------
--- ---- --------- -- ---- -
----------------------
-
-- --- -- -- -- -- -- -- - -- -- -- -- -- -来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f26f0eedcc8a97c8cebbe