차이점: 1. forEach는 반복 가능한 객체 순회(Array Set Map)를 담당하는 반복자이고, for는 배열만 순회할 수 있는 루프 메커니즘입니다. 2. for 루프에는 일부 인터럽트 동작이 사용되는데 이는 배열 순회 및 검색을 최적화하는 데 좋습니다. 그러나 forEach는 반복자이고 순서대로만 순회할 수 있으므로 인터럽트 동작을 지원하지 않습니다. 3. forEach 루프의 시작점은 0만 가능하며 사람의 개입이 불가능합니다. for 루프와 달리 루프의 시작점은 수동으로 제어할 수 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
for 루프와 forEach
for
루프의 본질적인 차이점은 js가 제안되었을 때부터 있었던 루프 방식입니다. for
循环是js提出时就有的循环方法。
forEach
是ES5提出的,挂载在可迭代对象原型上的方法,例如Array
Set
Map
。
forEach
是一个迭代器,负责遍历可迭代对象。
那么遍历,迭代,可迭代对象分别是什么呢。
遍历:指的对数据结构的每一个成员进行有规律的且为一次访问的行为。
迭代:迭代是递归的一种特殊形式,是迭代器提供的一种方法,默认情况下是按照一定顺序逐个访问数据结构成员。迭代也是一种遍历行为。
可迭代对象:ES6中引入了 iterable
类型,Array
Set
Map
String
arguments
NodeList
都属于 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
는 ES5에서 제안한 방법으로 Array
Set
Map과 같은 반복 가능한 객체의 프로토타입에 탑재됩니다. 코드>. 🎜🎜<code>forEach
는 반복 가능한 객체 순회를 담당하는 반복자입니다. 🎜🎜그럼 🎜traversal🎜, 🎜iteration🎜, 🎜iterable object🎜은 각각 무엇인가요? 🎜iterable
유형은 ES6, Array
Set
Map <code>문자열
인수
NodeList
는 모두 반복 가능
이며 특징은 모두 [ Symbol.iterator ]
메서드를 포함하는 객체는 반복 가능한 iterable
로 간주됩니다. 🎜
forEach
는 실제로 반복자입니다. for
루프와 근본적인 차이점은 forEach
가 Traverse(Array
Set
Map
) 반복 가능한 객체를 담당하며 for
루프는 다음 작업만 수행할 수 있는 루프 메커니즘입니다. 배열을 반복합니다. 🎜🎜🎜Iterator🎜란 무엇인가요? 호출되면 Iterator 객체가 생성됩니다. 여기에는 .next()
메서드가 있으며 각 호출은 {value:value' 객체를 반환합니다. ,done:Boolean}
, value
는 yield
이후의 반환 값을 반환합니다. yield
가 끝나면 done
는 true
가 되고, 지속적인 호출과 순차 반복을 통해 내부 값에 액세스됩니다. 🎜🎜🎜Iterator🎜는 특별한 종류의 객체입니다. ES6 사양의 기호는 객체를 반환하는 next()
메서드이며 반복 동작은 done
에서 판단됩니다. 반복자는 내부 표현을 노출하지 않고 순회를 구현합니다. 코드를 보면 🎜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]🎜 보입니다. 반복 가능한 객체인 한 내부
Symbol.iterator
를 호출하면 반복자가 제공되고 반복자가 반환한 next
메서드에 따라 내부에 액세스합니다. ...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; //报错 }; });🎜
next
메서드를 호출하여 개체의 value
값을 반환하고 value
까지 item
에 저장합니다. 정의되지 않음은 루프에서 벗어나며 모든 반복 가능한 객체는 for...of
에서 사용할 수 있습니다. 다른 반복 가능한 객체를 살펴보겠습니다. 🎜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; };🎜따라서 반복 가능한 객체의
Symbol.iterator
속성은 호출될 때 반복자를 생성할 수 있으며 forEach
도 반복자를 생성합니다. 루프와 🎜🎜forEach🎜
🎜🎜🎜🎜🎜의 구문 차이 이제 본질적인 차이점을 이해했으므로 적용하는 동안 이들 사이의 문법적 차이점은 무엇입니까? 🎜forEach
의 매개변수. 🎜forEach
의 인터럽트입니다. 🎜forEach
는 자체 요소를 삭제하며 색인을 재설정할 수 없습니다. 🎜for
루프는 루프의 시작점을 제어할 수 있습니다. 🎜forEach
의 매개변수🎜forEach
의 완전성을 정말로 이해하고 있습니다. > 매개변수 내용을 전달하시겠습니까? 아마도 다음과 같을 것입니다: 🎜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
let arr = [1,2,3,4] arr.forEach((item, index) => { console.log(item); // 1 2 3 4 index++; });🎜
arr
를 사용하여 배열 중복 제거를 달성할 수 있습니다.🎜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视频教程、编程视频】
위 내용은 es6의 for와 foreach의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!