&nbsp;&nbsp;&nbsp;H&atilde;y xem x&eacute;t sự kh&aacute;c biệt giữa &lsquo;for&rsquo; v&agrave; &lsquo;forEach&rsquo; một c&aacute;ch chi tiết.
Đầu ti&ecirc;n h&atilde;y xem x&eacute;t m&ocirc;̣t s&ocirc;́ đi&ecirc;̉m kh&aacute;c biệt cơ bản:
V&ograve;ng lặp &lsquo;for&rsquo; đ&atilde; tồn tại từ thời kỳ đầu của JavaScript. &lsquo;ForEach&rsquo;, được giới thiệu trong ES5, gắn tr&ecirc;n nguy&ecirc;n mẫu của c&aacute;c đối tượng c&oacute; thể lặp lại, chẳng hạn như Array Set Map.
&lsquo;ForEach&rsquo; l&agrave; một tr&igrave;nh v&ograve;ng lặp chịu tr&aacute;ch nhiệm duyệt qua một đối tượng c&oacute; thể lặp lại. Vậy đối tượng duyệt, lặp v&agrave; c&oacute; thể lặp l&agrave; g&igrave;?
Biết rằng 'forEach' thực sự l&agrave; một iterator, sự kh&aacute;c biệt cơ bản giữa n&oacute; v&agrave; v&ograve;ng lặp 'for' l&agrave; 'forEach' chịu tr&aacute;ch nhiệm duyệt qua c&aacute;c đối tượng c&oacute; thể lặp (Array Set Map), trong khi v&ograve;ng lặp 'for' l&agrave; một cơ chế lặp, nhưng n&oacute; c&oacute; thể đi qua một mảng qua n&oacute;.
Giải th&iacute;ch: Iterator l&agrave; g&igrave;? Ở đ&acirc;y, m&aacute;y ph&aacute;t Generator được sử dụng l&agrave;m v&iacute; dụ. Khi n&oacute; được gọi, n&oacute; sẽ tạo ra một đối tượng v&ograve;ng lặp (Iterator Object). N&oacute; c&oacute; một phương thức .next () v&agrave; mỗi cuộc gọi trả về một đối tượng {value: value, done: Boolean}, gi&aacute; trị trả về gi&aacute; trị trả về sau khi lợi nhuận, khi lợi nhuận kết th&uacute;c, done trở th&agrave;nh true v&agrave; gi&aacute; trị nội bộ được truy cập bằng c&aacute;ch gọi v&agrave; lần lượt lặp lại.
Iterator l&agrave; một loại đối tượng đặc biệt. Trong đặc tả ES6, dấu hiệu của n&oacute; l&agrave; phương thức next () của đối tượng được trả về v&agrave; h&agrave;nh vi lặp lại được đ&aacute;nh gi&aacute; l&agrave; đ&atilde; xong. C&aacute;c iterator thực hiện vi&ecirc;̣c truyền tải m&agrave; kh&ocirc;ng để lộ c&aacute;c biểu diễn b&ecirc;n trong. Xem m&atilde;:
<pre class="language-python"><code>let arr = [4, 5, 6, 7]

let iterator = arr[Symbol.iterator]()

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());</code></pre>
Như ch&uacute;ng ta c&oacute; thể thấy ở tr&ecirc;n, miễn l&agrave; n&oacute; l&agrave; một đối tượng c&oacute; thể lặp lại, việc gọi Symbol.iterator nội bộ sẽ cung cấp một tr&igrave;nh v&ograve;ng lặp v&agrave; truy cập nội bộ theo phương thức tiếp theo được trả về bởi tr&igrave;nh v&ograve;ng lặp, đ&acirc;y cũng l&agrave; nguy&ecirc;n tắc triển khai của for &hellip;of.
<pre class="language-python"><code>let arr = [4, 5, 6, 7]

for (const item of arr) {

console.log(item);

}</code></pre>
Gọi phương thức tiếp theo để trả về gi&aacute; trị của đối tượng v&agrave; lưu n&oacute; trong mục cho đến khi thực hiện xong l&agrave; đ&uacute;ng để nhảy ra khỏi v&ograve;ng lặp v&agrave; tất cả c&aacute;c đối tượng c&oacute; thể lặp lại c&oacute; thể được sử dụng bởi for&hellip; of. H&atilde;y xem x&eacute;t c&aacute;c đối tượng c&oacute; thể lặp lại kh&aacute;c:
<pre class="language-python"><code>function num(params) {

console.log(arguments);

let iterator = arguments[Symbol.iterator]()

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

}

num(4, 5, 6, 7)

let set = new Set(&lsquo;4567&rsquo;)

set.forEach(item =&gt; {

console.log(item);

})

let iterator = set[Symbol.iterator]()

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());</code></pre>
Sau đ&oacute;, ch&uacute;ng ta cũng c&oacute; thể thấy rằng thuộc t&iacute;nh Symbol.iterator trong đối tượng c&oacute; thể lặp c&oacute; thể tạo ra một iterator khi n&oacute; được gọi v&agrave; forEach cũng tạo ra một iterator, truyền gi&aacute; trị của từng phần tử trong h&agrave;m gọi lại nội bộ.
M&ocirc; tả: Có th&ecirc;̉ n&oacute; l&agrave; iterator được gọi ở đ&acirc;y, gọi tiếp theo li&ecirc;n tục v&agrave; truyền c&aacute;c tham số cho h&agrave;m gọi lại.&nbsp;
Sự kh&aacute;c biệt về c&uacute; ph&aacute;p giữa v&ograve;ng lặp &lsquo;for&rsquo; v&agrave; &lsquo;forEach&rsquo;:
<ol style="text-align: justify;">
<li> C&aacute;c th&ocirc;ng số của forEach.</li>
<li> Sự gi&aacute;n đoạn của forEach.</li>
<li> forEach x&oacute;a phần tử của ch&iacute;nh n&oacute; v&agrave; kh&ocirc;ng thể đặt lại chỉ mục.</li>
<li> V&ograve;ng lặp for c&oacute; thể kiểm so&aacute;t điểm bắt đầu của v&ograve;ng lặp.</li>
</ol>
<h1 style="text-align: justify;">C&aacute;c th&ocirc;ng số cho forEach</h1>
H&atilde;y hiểu nội dung th&ocirc;ng số đầy đủ của forEach:
<pre class="language-python"><code>arr.forEach((self,index,arr) =&gt;{},this)</code></pre>
self: Phần tử hiện được duyệt qua bởi mảng. Theo mặc định, c&aacute;c phần tử mảng được lấy theo thứ tự từ tr&aacute;i sang phải.
index: Chỉ số của phần tử hiện tại của mảng, chỉ số của phần tử đầu ti&ecirc;n l&agrave; 0, v.v.
arr: Mảng hiện được duyệt qua.
this: Điều n&agrave;y đề cập đến hàm gọi lại.
<pre class="language-python"><code>let arr = [4, 5, 6, 7];

let person = {

name: &lsquo;BOb&rsquo;

};

arr.forEach(function (self, index, arr) {console.log(`${self} ${index}, ${arr}`);

console.log(this.name+=&rsquo;high&rsquo;);

}, person)</code></pre>
Ch&uacute;ng ta c&oacute; thể sử dụng arr để khử tr&ugrave;ng lặp mảng:
<pre class="language-python"><code>let arr1 = [4, 5, 4, 6, 4];

let arr2 = [];

arr1.forEach(function (self, index, arr) {

arr1.indexOf(self) === index ? arr2.push(self) : null;

});

console.log(arr2);</code></pre>
forEach interrupt
Trong JavaScript, break-return-continue giúp ngắt h&agrave;m hoặc nhảy ra khỏi v&ograve;ng lặp. Ch&uacute;ng ta sẽ sử dụng một số h&agrave;nh vi gián đoạn trong v&ograve;ng lặp for,hữu ích trong việc tối ưu h&oacute;a qu&aacute; tr&igrave;nh duyệt v&agrave; t&igrave;m kiếm mảng, nhưng v&igrave; forEach thuộc về c&aacute;c tr&igrave;nh v&ograve;ng lặp, n&ecirc;n n&oacute; chỉ c&oacute; thể được sắp xếp theo thứ tự ho&agrave;n th&agrave;nh truyền tải tuần tự, v&igrave; vậy h&agrave;nh vi gián đoạn ở tr&ecirc;n kh&ocirc;ng được hỗ trợ.
<pre class="language-python"><code>let arr = [4,5,6,7],

i = 0,

length = arr.length;

for (; i &lt; length; i++) {

console.log(arr[i]);

if (arr[i] === 5) {

break;

};

};




arr.forEach((self,index) =&gt; {

console.log(self);

if (self === 5) {

continue;

};

});</code></pre>
Điều g&igrave; sẽ xảy ra nếu bạn phải tho&aacute;t ra khỏi v&ograve;ng lặp trong forEach? Tr&ecirc;n thực tế, c&oacute; một c&aacute;ch, với sự trợ gi&uacute;p của try / catch:
<pre class="language-python"><code>try {

var arr = [4, 5, 6, 7];

arr.forEach(function (item, index) {

if (item ===6 ) {

throw new Error(&ldquo;LoopTerminates&rdquo;);

}




console.log(item);

});

} catch (e) {

if (e.message !== &ldquo;LoopTerminates&rdquo;) throw e;

};</code></pre>
Nếu gặp phải trường hợp trả lại, sẽ kh&ocirc;ng c&oacute; lỗi n&agrave;o được th&ocirc;ng b&aacute;o, nhưng sẽ kh&ocirc;ng c&oacute; hiệu lực:
<pre class="language-python"><code>let arr = [4, 5, 6, 7];

function find(array, num) {

array.forEach((self, index) =&gt; {

if (self === num) {

return index;

};

});

};

let index = find(arr, 5);</code></pre>
forEach x&oacute;a phần tử của ch&iacute;nh n&oacute;, kh&ocirc;ng thể đặt lại chỉ mục
Trong forEach, ch&uacute;ng ta kh&ocirc;ng thể kiểm so&aacute;t gi&aacute; trị của chỉ mục, n&oacute; sẽ chỉ tăng một c&aacute;ch v&ocirc; &yacute; cho đến khi lớn hơn độ d&agrave;i của mảng v&agrave; nhảy ra khỏi v&ograve;ng lặp. Do đ&oacute;, kh&ocirc;ng thể tự x&oacute;a để đặt lại chỉ mục. H&atilde;y xem một v&iacute; dụ đơn giản:
<pre class="language-python"><code>let arr = [4,5,6,7]

arr.forEach((item, index) =&gt; {

console.log(item);

index++;

});</code></pre>
chỉ mục kh&ocirc;ng thay đổi khi n&oacute; được th&ecirc;m hoặc bớt từ b&ecirc;n trong th&acirc;n h&agrave;m. Trong thực tế ph&aacute;t triển, việc duyệt một mảng v&agrave; x&oacute;a một mục c&ugrave;ng một l&uacute;c l&agrave; rất phổ biến. Vì th&ecirc;́ bạn n&ecirc;n ch&uacute; &yacute; khi sử dụng forEach để x&oacute;a.
v&ograve;ng lặp for c&oacute; thể kiểm so&aacute;t điểm bắt đầu của v&ograve;ng lặp
Như đ&atilde; n&oacute;i ở tr&ecirc;n, điểm bắt đầu của v&ograve;ng lặp forEach chỉ c&oacute; thể l&agrave; 0 nếu kh&ocirc;ng c&oacute; sự can thiệp của con người, nhưng v&ograve;ng lặp for th&igrave; kh&aacute;c.
Hoạt động trước đ&oacute; của việc duyệt qua mảng v&agrave; x&oacute;a phần nh&acirc;n giống c&oacute; thể được viết như sau:
<pre class="language-python"><code>let data = [];

let data2 = [1,2,3];

data2.map(item=&gt;data.push(item));</code></pre>
Đi&ecirc;̉m khác nhau về hiệu suất giữa v&ograve;ng lặp for v&agrave; forEach
Khi so sánh v&ecirc;̀ hiệu suất, ch&uacute;ng ta th&ecirc;m một map iterator, giống như bộ lọc, tạo ra một mảng mới. Ch&uacute;ng ta so s&aacute;nh hiệu suất của forEach map trong m&ocirc;i trường tr&igrave;nh duyệt:
So s&aacute;nh hiệu suất: for&gt; forEach&gt; map
Trong m&ocirc;i trường chrome 62 v&agrave; Node.js v9.1.0: v&ograve;ng lặp for nhanh hơn forEach 1 lần v&agrave; forEach nhanh hơn map khoảng 20%.
Ph&acirc;n t&iacute;ch nguy&ecirc;n nh&acirc;n
for: V&ograve;ng lặp for kh&ocirc;ng c&oacute; ngăn xếp lệnh gọi h&agrave;m v&agrave; ngữ cảnh bổ sung, v&igrave; vậy việc triển khai n&oacute; l&agrave; đơn giản nhất.
forEach: Đối với forEach, chữ k&yacute; h&agrave;m của n&oacute; chứa c&aacute;c tham số v&agrave; ngữ cảnh, v&igrave; vậy hiệu suất sẽ thấp hơn v&ograve;ng lặp for.
map: L&yacute; do tại sao map chạy chậm nhất l&agrave; v&igrave; map trả về một mảng mới, v&agrave; việc tạo v&agrave; g&aacute;n c&aacute;c mảng sẽ dẫn đến kh&ocirc;ng gian bộ nhớ al__cpLocation, v&igrave; vậy n&oacute; sẽ mang lại hiệu suất lớn. Nếu bản đồ được lồng trong một v&ograve;ng lặp, n&oacute; sẽ chi&ecirc;́m nhiều bộ nhớ kh&ocirc;ng cần thiết hơn.
Khi bạn sử dụng một iterator để duyệt qua một mảng, việc sử dụng bản đồ m&agrave; kh&ocirc;ng trả về một mảng mới l&agrave; tr&aacute;i với mục đ&iacute;ch thiết kế.
Cảm ơn bạn đ&atilde; dành thời gian đọc. Hãy ti&ecirc;́p tục theo dõi và ủng h&ocirc;̣ các bài vi&ecirc;́t ti&ecirc;́p theo của <a href="https://tek4.vn/">Tek4.vn</a> nhé!

dev1_account1

99% người mới bắt đầu không hiểu sự khác nhau giữa vòng lặp ‘for’ và ‘forEach’

Cùng tác giả

dev1_account1

Có liên quan