在前端开发中，我们经常需要获取对象的长度，例如数组的长度。而在 JavaScript 中，我们可以使用 length 属性来获取数组的长度。但是对于对象来说，我们通常使用 Object.keys(obj).length 或者 Object.values(obj).length 来获取对象的长度。但是这种方式只能获取对象属性的数量，而不能获取对象的真实长度，因为一个对象可能会有一些被隐藏的属性或者方法，这些属性和方法并不会被 Object.keys 或者 Object.values 所获取到。那么如何获取一个对象的真实长度呢？今天我们来介绍一种黑科技：Iterable。
Iterable 是什么？
在 ECMAScript 2015 中，引入了一种新的数据类型：Iterable。Iterable（可迭代对象）是具有 Symbol.iterator 属性的对象，该属性指向一个返回迭代器的函数。迭代器是一个具有 next() 方法的对象，该方法返回包含 value 和 done 属性的对象。value 属性为当前迭代的值，done 属性表示迭代是否结束。我们可以通过 for...of 循环来遍历 Iterable 对象中的元素。
-- -------------------- ---- ------- --- -------- - --- -- --- --- ---- ----- -- --------- - ------------------- - -- ------- -- - -- - -- -展开代码
在 ECMAScript 2021 中，Iterable 被扩展用于创建一些新的内置对象，其中包括 Object、String 和 TypedArray。
如何获取对象的真实长度？
在 ECMAScript 2021 中，Object 对象被扩展成了一个 Iterable，可以用于获取对象的真实长度。
let obj = { name: 'Jack', age: 20, gender: 'male' }; console.log([...obj].length); // 3
上面的代码中，我们将 obj 对象转换成一个数组，然后获取数组的长度。由于 Object 对象是一个 Iterable，所以我们可以将其转换成一个数组。这种方式可以获取对象的所有属性和方法的数量，包括那些被隐藏的属性和方法。
如果你使用的是旧版的 JavaScript，你也可以使用类似的方式来获取对象的真实长度。
-- -------------------- ---- ------- --- --- - - ----- ------- ---- --- ------- ------ -- --- ---- - ----------------- --- ------ - ------------------- --- ---------- - --------- ----------- ------------------------------- -- -展开代码
上面的代码中，我们分别使用 Object.keys 和 Object.values 获取对象的键和值，然后将它们合并成一个数组。由于这个数组也包括了对象隐藏的属性和方法，所以它的长度就是对象的真实长度。
Iterable 的其他用途
除了用于获取对象的真实长度之外，Iterable 还有其他很多用途。我们可以将它用于循环、遍历以及数组的操作中。
-- -------------------- ---- ------- --- --- - --- -- --- --- ---- ----- -- ---- - ----------------- - --- - -- ------- -- - -- - -- - --- ------- - -------------------- -- ----- - --- --------------------- -- --- -- --展开代码
上面的代码中，我们将数组 arr 转换成了一个 Iterable，然后使用 for...of 循环遍历数组中的元素，将每个元素乘以 2 并输出。我们还将数组 arr 转换成了一个数组，然后使用 map 方法将数组中的每个元素乘以 2，并返回一个新的数组。
小结
通过本文的学习，我们知道了如何使用 Iterable 来获取对象的真实长度。Iterable 还有很多其他的用途，可以用于循环、遍历以及数组的操作中。在实际开发中，我们可以根据需要使用 Iterable 来简化代码并提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6795e273504e4ea9bdc1dfb3
