Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist der Unterschied zwischen for und foreach in es6?
Was ist der Unterschied zwischen for und foreach in es6?
- 青灯夜游Original
- 2022-10-21 17:32:541562Durchsuche
Unterschied: 1. forEach ist ein Iterator, der für das Durchlaufen (Array Set Map) iterierbarer Objekte verantwortlich ist, während for ein Schleifenmechanismus ist, der nur Arrays durchqueren kann. 2. Einige Interrupt-Verhaltensweisen werden in der for-Schleife verwendet, was sich gut zur Optimierung der Array-Durchquerung und -Suche eignet. Da forEach jedoch ein Iterator ist und nur der Reihe nach durchlaufen werden kann, unterstützt es kein Interrupt-Verhalten. 3. Der Startpunkt der forEach-Schleife kann nur 0 sein, und im Gegensatz zur for-Schleife ist kein menschlicher Eingriff möglich. Der Startpunkt der Schleife kann manuell gesteuert werden.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.
Der wesentliche Unterschied zwischen for-Schleife und forEach
for-Schleife ist eine Schleifenmethode, die es gibt, seit js vorgeschlagen wurde. for循环是js提出时就有的循环方法。
forEach是ES5提出的，挂载在可迭代对象原型上的方法，例如Array Set Map。
forEach是一个迭代器，负责遍历可迭代对象。
那么遍历，迭代，可迭代对象分别是什么呢。
遍历：指的对数据结构的每一个成员进行有规律的且为一次访问的行为。
迭代：迭代是递归的一种特殊形式，是迭代器提供的一种方法，默认情况下是按照一定顺序逐个访问数据结构成员。迭代也是一种遍历行为。
可迭代对象：ES6中引入了
iterable类型，ArraySetMapStringargumentsNodeList都属于iterable，他们特点就是都拥有[Symbol.iterator]方法，包含他的对象被认为是可迭代的iterable。
forEach 其实是一个迭代器，他与 for 循环本质上的区别是 forEach 是负责遍历（Array Set Map）可迭代对象的，而 for 循环是一种循环机制，只是能通过它遍历出数组。
什么是迭代器，当它被调用时就会生成一个迭代器对象（Iterator Object），它有一个 .next()方法，每次调用返回一个对象{value:value,done:Boolean}，value返回的是 yield 后的返回值，当 yield 结束，done 变为 true，通过不断调用并依次的迭代访问内部的值。
迭代器是一种特殊对象。ES6规范中它的标志是返回对象的 next() 方法，迭代行为判断在 done 之中。在不暴露内部表示的情况下，迭代器实现了遍历。看代码
let arr = [1, 2, 3, 4] // 可迭代对象
let iterator = arr[Symbol.iterator]() // 调用 Symbol.iterator 后生成了迭代器对象
console.log(iterator.next()); // {value: 1, done: false} 访问迭代器对象的next方法
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
我们看到了。只要是可迭代对象，调用内部的 Symbol.iterator 都会提供一个迭代器，并根据迭代器返回的next 方法来访问内部，这也是 for...of 的实现原理。
let arr = [1, 2, 3, 4]
for (const item of arr) {
console.log(item); // 1 2 3 4
}
把调用 next 方法返回对象的 value 值并保存在 item 中，直到 value 为 undefined 跳出循环，所有可迭代对象可供for...of消费。再来看看其他可迭代对象：
function num(params) {
console.log(arguments); // Arguments(6) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
let iterator = arguments[Symbol.iterator]()
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
}
num(1, 2, 3, 4)
let set = new Set('1234')
set.forEach(item => {
console.log(item); // 1 2 3 4
})
let iterator = set[Symbol.iterator]()
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
所以可迭代对象中的 Symbol.iterator 属性被调用时都能生成迭代器，而 forEach 也是生成一个迭代器，在内部的回调函数中传递出每个元素的值
<span style="font-size: 20px;">for</span>循环和<span style="font-size: 20px;">forEach</span>的语法区别
了解了本质区别，在应用过程中，他们到底有什么语法区别呢？
forEach的参数。forEach的中断。forEach删除自身元素，index不可被重置。for循环可以控制循环起点。
forEach 的参数
我们真正了解 forEach 的完整传参内容吗？它大概是这样：
arr.forEach((self,index,arr) =>{},this)
self： 数组当前遍历的元素，默认从左往右依次获取数组元素。
index： 数组当前元素的索引，第一个元素索引为0，依次类推。
arr： 当前遍历的数组。
this： 回调函数中this指向。
let arr = [1, 2, 3, 4];
arr.forEach(function (self, index, arr) {
console.log(`当前元素为${self}索引为${index},属于数组${arr}`);
}, person)
我们可以利用 arr
forEach ist eine von ES5 vorgeschlagene und auf dem Prototyp eines iterierbaren Objekts montierte Methode, wie z. B. Array Set Map Code >. 🎜🎜<code>forEach ist ein Iterator, der für das Durchlaufen iterierbarer Objekte verantwortlich ist. 🎜🎜Was sind also 🎜Traversal🎜, 🎜Iteration🎜 und 🎜iterierbares Objekt🎜? 🎜- 🎜🎜Traversal🎜: bezieht sich auf den regelmäßigen und einmaligen Zugriff auf jedes Mitglied der Datenstruktur. 🎜
- 🎜🎜Iteration🎜: Iteration ist eine spezielle Form der Rekursion und eine von Iteratoren bereitgestellte Methode. Standardmäßig wird auf Datenstrukturelemente einzeln in einer bestimmten Reihenfolge zugegriffen. Iteration ist auch ein Traversierungsverhalten. 🎜
- 🎜🎜Iterierbare Objekte🎜: Der Typ
iterablewurde in ES6 eingeführt,ArraySetMap <code>StringargumentsNodeListsind alleiterierbarund ihr Merkmal ist, dass sie alle[ Symbol.iterator ]-Methode wird das Objekt, das sie enthält, als iterierbaresiterablebetrachtet. 🎜
forEach ist eigentlich ein Iterator. Der wesentliche Unterschied zwischen ihm und der for-Schleife besteht darin, dass forEach ein Iterator ist Verantwortlich für Traverse (Array Set Map) iterierbarer Objekte, und die for-Schleife ist ein Schleifenmechanismus, der dies nur kann Durchlaufen Sie das Array. 🎜🎜Was ist ein 🎜Iterator🎜? Wenn er aufgerufen wird, generiert er ein Iteratorobjekt. Es verfügt über eine .next()-Methode und jeder Aufruf gibt ein Objekt {value:value) zurück ,done:Boolean, value gibt den Rückgabewert nach yield zurück. Wenn yield endet, done wird zu true und auf den internen Wert wird durch kontinuierliche Aufrufe und sequentielle Iterationen zugegriffen. 🎜🎜🎜Iterator🎜 ist eine besondere Art von Objekt. Sein Symbol in der ES6-Spezifikation ist die Methode next(), die das Objekt zurückgibt, und das Iterationsverhalten wird in done beurteilt. Iteratoren implementieren die Durchquerung, ohne die interne Darstellung offenzulegen. Wenn wir uns den Code ansehen 🎜let arr1 = [1, 2, 1, 3, 1];
let arr2 = [];
arr1.forEach(function (self, index, arr) {
arr.indexOf(self) === index ? arr2.push(self) : null;
});
console.log(arr2); // [1,2,3]🎜 sehen wir es. Solange es sich um ein iterierbares Objekt handelt, stellt der Aufruf des internen Symbol.iterator einen Iterator bereit und greift auf die Interna gemäß der vom Iterator zurückgegebenen Methode next zu auch das Implementierungsprinzip von for ...of. 🎜let arr = [1, 2, 3, 4],
i = 0,
length = arr.length;
for (; i < length; i++) {
console.log(arr[i]); //1,2
if (arr[i] === 2) {
break;
};
};
arr.forEach((self,index) => {
console.log(self);
if (self === 2) {
break; //报错
};
});
arr.forEach((self,index) => {
console.log(self);
if (self === 2) {
continue; //报错
};
});🎜Rufen Sie die next-Methode auf, um den value-Wert des Objekts zurückzugeben und speichern Sie ihn in item bis value Ist undefiniert, bricht die Schleife aus und alle iterierbaren Objekte stehen für die Verwendung durch for...of zur Verfügung. Werfen wir einen Blick auf andere iterierbare Objekte: 🎜try {
var arr = [1, 2, 3, 4];
arr.forEach(function (item, index) {
//跳出条件
if (item === 3) {
throw new Error("LoopTerminates");
}
//do something
console.log(item);
});
} catch (e) {
if (e.message !== "LoopTerminates") throw e;
};🎜Die Eigenschaft Symbol.iterator im iterierbaren Objekt kann also beim Aufruf einen Iterator generieren, und forEach generiert auch einen Iterator Syntaxunterschied zwischen 🎜🎜forEach🎜🎜 und 🎜🎜forEach🎜🎜 Nachdem wir nun die wesentlichen Unterschiede verstanden haben, was sind die grammatikalischen Unterschiede zwischen ihnen während der Anwendung? 🎜- Parameter von 🎜
forEach. 🎜 - 🎜
forEachs Interrupt. 🎜 - 🎜
forEachlöscht sein eigenes Element und der Index kann nicht zurückgesetzt werden. 🎜 - 🎜
for-Schleife kann den Startpunkt der Schleife steuern. 🎜
🎜forEachs Parameter🎜
🎜Wir verstehen die Vollständigkeit von forEachwirklich > Parameterinhalt übergeben? Es sieht wahrscheinlich so aus: 🎜let arr = [1, 2, 3, 4];
function find(array, num) {
array.forEach((self, index) => {
if (self === num) {
return index;
};
});
};
let index = find(arr, 2);// undefined
- 🎜🎜self: 🎜 Die Elemente, die derzeit vom Array durchlaufen werden, werden standardmäßig von links nach rechts abgerufen Rechts. 🎜
- 🎜🎜index: 🎜 Der Index des aktuellen Elements des Arrays, der Index des ersten Elements ist 0 und so weiter. 🎜
- 🎜🎜arr: 🎜 Das aktuell durchquerte Array. 🎜
- 🎜🎜this: 🎜 Dies verweist auf die Callback-Funktion. 🎜
let arr = [1,2,3,4]
arr.forEach((item, index) => {
console.log(item); // 1 2 3 4
index++;
});🎜Wir können arr verwenden, um eine Array-Deduplizierung zu erreichen:🎜let arr1 = [1, 2, 1, 3, 1];
let arr2 = [];
arr1.forEach(function (self, index, arr) {
arr.indexOf(self) === index ? arr2.push(self) : null;
});
console.log(arr2); // [1,2,3]
forEach 的中断
在js中有break return continue 对函数进行中断或跳出循环的操作，我们在 for循环中会用到一些中断行为，对于优化数组遍历查找是很好的，但由于forEach属于迭代器，只能按序依次遍历完成，所以不支持上述的中断行为。
let arr = [1, 2, 3, 4],
i = 0,
length = arr.length;
for (; i < length; i++) {
console.log(arr[i]); //1,2
if (arr[i] === 2) {
break;
};
};
arr.forEach((self,index) => {
console.log(self);
if (self === 2) {
break; //报错
};
});
arr.forEach((self,index) => {
console.log(self);
if (self === 2) {
continue; //报错
};
});
如果我一定要在 forEach 中跳出循环呢？其实是有办法的，借助try/catch：
try {
var arr = [1, 2, 3, 4];
arr.forEach(function (item, index) {
//跳出条件
if (item === 3) {
throw new Error("LoopTerminates");
}
//do something
console.log(item);
});
} catch (e) {
if (e.message !== "LoopTerminates") throw e;
};
若遇到 return 并不会报错，但是不会生效
let arr = [1, 2, 3, 4];
function find(array, num) {
array.forEach((self, index) => {
if (self === num) {
return index;
};
});
};
let index = find(arr, 2);// undefined
forEach 删除自身元素，index不可被重置
在 forEach 中我们无法控制 index 的值，它只会无脑的自增直至大于数组的 length 跳出循环。所以也无法删除自身进行index重置，先看一个简单例子：
let arr = [1,2,3,4]
arr.forEach((item, index) => {
console.log(item); // 1 2 3 4
index++;
});
index不会随着函数体内部对它的增减而发生变化。在实际开发中，遍历数组同时删除某项的操作十分常见，在使用forEach删除时要注意。
for 循环可以控制循环起点
如上文提到的 forEach 的循环起点只能为0不能进行人为干预，而for循环不同：
let arr = [1, 2, 3, 4],
i = 1,
length = arr.length;
for (; i < length; i++) {
console.log(arr[i]) // 2 3 4
};那之前的数组遍历并删除滋生的操作就可以写成
let arr = [1, 2, 1],
i = 0,
length = arr.length;
for (; i < length; i++) {
// 删除数组中所有的1
if (arr[i] === 1) {
arr.splice(i, 1);
//重置i，否则i会跳一位
i--;
};
};
console.log(arr); // [2]
//等价于
var arr1 = arr.filter(index => index !== 1);
console.log(arr1) // [2]
<span style="font-size: 18px;">for</span>循环和<span style="font-size: 18px;">forEach</span>的性能区别
在性能对比方面我们加入一个 map 迭代器，它与 filter 一样都是生成新数组。
对比 for forEach map 的性能在浏览器环境中都是什么样的：
性能比较：for > forEach > map 在chrome 62 和 Node.js v9.1.0环境下：for 循环比 forEach 快1倍，forEach 比 map 快20%左右。
原因分析for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。
forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。
map：map 最慢的原因是因为 map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销。
如果将map嵌套在一个循环中，便会带来更多不必要的内存消耗。
当大家使用迭代器遍历一个数组时，如果不需要返回一个新数组却使用 map 是违背设计初衷的。
【相关推荐：javascript视频教程、编程视频】
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen for und foreach in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!