[英]Javascript for .. of loop (ECMAScript 6)
So new ECMAScript 6 has introduced for .. of
loop syntax. 因此,新的ECMAScript 6引入
for .. of
循环语法。
Unfortunately, there aren't many documentations out there that explains what this really does. 不幸的是,那里没有太多的文档可以解释它的真正作用。 As in how it differs from using
Array.prototype.forEach
or for .. in
loop. 与使用
Array.prototype.forEach
或for .. in
循环有何不同。
Is it just another imperative way to perform Array.prototype.forEach
? 这仅仅是执行
Array.prototype.forEach
另一种必要方法吗?
I've already read Mozilla's doc here . 我已经在这里阅读了Mozilla的文档。 But still the idea is too vague to me.
但是这个想法对我来说还是太模糊了。
Anyone cares to explain to this halfwit? 有人愿意向这个混蛋解释吗?
Quick hint 快速提示
for..of
takes the element. for..of
使用元素。
var a = ['a','b','c'];
for (let elem of a){
console.log(elem);
}
// output:
// 'a'
// 'b'
// 'c'
for..in
takes the index. for..in
获取索引。
var a = ['a','b','c'];
for (let i in a){
console.log(i);
}
// output:
// 0
// 1
// 2
.forEach
takes element and index (optional). .forEach
采用元素和索引(可选)。
var a = ['a','b','c'];
a.forEach(function(elem,i){
console.log(i + ': ' + elem);
});
// output:
// 0: 'a'
// 1: 'b'
// 2: 'c'
From mdn doc: 从mdn doc:
While for...in iterates over property names, for...of iterates over property values.
在for ...中遍历属性名称,在for ... of中遍历属性值。
What else need to be clear? 还有什么需要澄清的?
Take this example: 举个例子:
var items = ["a", "b", "c", "d"];
for (let item of items) {
console.log(item);
}
It's essentially equivalent to: 它本质上等效于:
var items = ["a", "b", "c", "d"];
for (var i = 0; i < items.length; i++) {
console.log(items[i]); // outputs: a, b, c, d
}
As you can see, for...of
iterates only over an iterable object's values while for...in
iterates over any object's property names . 如您所见,
for...of
for...in
仅对可迭代对象的值 for...in
迭代,而for...in
仅对任何对象的属性名 for...in
迭代。
Array.prototype.forEach() iterates each element in array but for...of loop iterates object using iterable protocol. Array.prototype.forEach()迭代数组中的每个元素,但是for ... of循环使用可迭代协议迭代对象。
For example when you override built-in array's iterator results could be different: 例如,当您覆盖内置数组的迭代器时,结果可能会不同:
const arr = ['a', 'b', 'c'];
arr[Symbol.iterator] = function*() {
yield 1;
yield 2;
yield 3;
}
for (let value of arr) {
console.log(value)
}
// output: 1, 2, 3
arr.forEach(value => console.log(value));
// output: a, b, c
I guess that the implement of Array.prototype.forEach is like this: 我猜想Array.prototype.forEach的实现是这样的:
Array.prototype.forEach = function(callback)
for(var index = 0; index < arrayObject.length; index++) [
callback(arrayObject[index], index, arrayObject);
}
}
That means, the execution of callback function in Array.prototype.forEach is asynchronous, but the progress in a for ... in loop is synchronized. 这意味着Array.prototype.forEach中的回调函数的执行是异步的,但是for ... in循环中的进度是同步的。
If I'm wrong, please rectify it. 如果我错了,请纠正。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.