{"id":9412,"date":"2025-04-16T14:34:36","date_gmt":"2025-04-16T07:34:36","guid":{"rendered":"https:\/\/mb668s.com\/cam-nang-7mb66-xoc-dia\/?p=9412"},"modified":"2025-04-16T14:34:37","modified_gmt":"2025-04-16T07:34:37","slug":"foreach-javascript-la-gi","status":"publish","type":"post","link":"https:\/\/mb668s.com\/cam-nang-7mb66-xoc-dia\/tu-van-nghe-nghiep\/foreach-javascript-la-gi","title":{"rendered":"forEach JavaScript l\u00e0 g\u00ec? So s\u00e1nh, v\u00ed d\u1ee5 v\u00e0 \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf"},"content":{"rendered":"\n
L\u1eadp tr\u00ecnh v\u1edbi JavaScript kh\u00f4ng ch\u1ec9 l\u00e0 vi\u1ebft ra nh\u1eefng d\u00f2ng l\u1ec7nh ho\u1ea1t \u0111\u1ed9ng, m\u00e0 c\u00f2n l\u00e0 l\u1ef1a ch\u1ecdn \u0111\u00fang c\u00f4ng c\u1ee5 \u0111\u1ec3 m\u00e3 ngu\u1ed3n tr\u1edf n\u00ean r\u00f5 r\u00e0ng v\u00e0 hi\u1ec7u qu\u1ea3 h\u01a1n. Trong qu\u00e1 tr\u00ecnh x\u1eed l\u00fd m\u1ea3ng, c\u00e2u h\u1ecfi forEach JavaScript l\u00e0 g\u00ec<\/strong> th\u01b0\u1eddng xu\u1ea5t hi\u1ec7n nh\u01b0 m\u1ed9t c\u00e1ch m\u1edf \u0111\u1ea7u cho vi\u1ec7c t\u00ecm hi\u1ec3u c\u00e1c ph\u01b0\u01a1ng ph\u00e1p thao t\u00e1c d\u1eef li\u1ec7u tr\u1ef1c quan h\u01a1n. C\u00f9ng kh\u00e1m ph\u00e1 qua b\u00e0i vi\u1ebft sau nh\u00e9.<\/p>\n\n\n\n forEach() l\u00e0 m\u1ed9t ph\u01b0\u01a1ng th\u1ee9c c\u00f3 s\u1eb5n trong \u0111\u1ed1i t\u01b0\u1ee3ng m\u1ea3ng (Array) c\u1ee7a JavaScript, d\u00f9ng \u0111\u1ec3 l\u1eb7p qua t\u1eebng ph\u1ea7n t\u1eed trong m\u1ea3ng v\u00e0 th\u1ef1c thi m\u1ed9t h\u00e0m callback cho m\u1ed7i ph\u1ea7n t\u1eed \u0111\u00f3.<\/strong><\/p>\n<\/blockquote>\n\n\n\n \u0110\u00e2y l\u00e0 m\u1ed9t c\u00e1ch vi\u1ebft ng\u1eafn g\u1ecdn v\u00e0 r\u00f5 r\u00e0ng thay th\u1ebf cho v\u00f2ng l\u1eb7p for truy\u1ec1n th\u1ed1ng, \u0111\u1eb7c bi\u1ec7t khi b\u1ea1n ch\u1ec9 mu\u1ed1n th\u1ef1c hi\u1ec7n m\u1ed9t h\u00e0nh \u0111\u1ed9ng n\u00e0o \u0111\u00f3 tr\u00ean t\u1eebng ph\u1ea7n t\u1eed m\u00e0 kh\u00f4ng c\u1ea7n t\u1ea1o ra gi\u00e1 tr\u1ecb m\u1edbi hay tr\u1ea3 v\u1ec1 k\u1ebft qu\u1ea3.<\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y kh\u00f4ng thay \u0111\u1ed5i m\u1ea3ng g\u1ed1c v\u00e0 kh\u00f4ng tr\u1ea3 v\u1ec1 gi\u00e1 tr\u1ecb (lu\u00f4n tr\u1ea3 v\u1ec1 undefined). forEach() th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c t\u00e1c v\u1ee5 nh\u01b0 hi\u1ec3n th\u1ecb danh s\u00e1ch, ghi log, thao t\u00e1c DOM ho\u1eb7c th\u1ef1c thi logic \u0111\u01a1n gi\u1ea3n cho t\u1eebng ph\u1ea7n t\u1eed trong m\u1ea3ng.<\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c Ph\u01b0\u01a1ng th\u1ee9c forEach() c\u00f3 c\u00fa ph\u00e1p nh\u01b0 sau:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n array.forEach(function callback(currentValue, index, array) {<\/p>\n\n\n\n \/\/ thao t\u00e1c v\u1edbi ph\u1ea7n t\u1eed<\/p>\n\n\n\n }, thisArg);<\/p>\n\n\n\n Trong \u0111\u00f3:<\/p>\n\n\n\n array l\u00e0 m\u1ea3ng b\u1ea1n mu\u1ed1n duy\u1ec7t qua.<\/p>\n\n\n\n callback l\u00e0 h\u00e0m s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi cho m\u1ed7i ph\u1ea7n t\u1eed trong m\u1ea3ng.<\/p>\n\n\n\n thisArg (t\u00f9y ch\u1ecdn) l\u00e0 gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng l\u00e0m this khi th\u1ef1c thi callback.<\/p>\n\n\n\n currentValue: Ph\u1ea7n t\u1eed hi\u1ec7n t\u1ea1i \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd trong m\u1ea3ng.<\/p>\n\n\n\n index: Ch\u1ec9 s\u1ed1 (v\u1ecb tr\u00ed) c\u1ee7a ph\u1ea7n t\u1eed hi\u1ec7n t\u1ea1i trong m\u1ea3ng.<\/p>\n\n\n\n array: Ch\u00ednh m\u1ea3ng \u0111ang \u0111\u01b0\u1ee3c g\u1ecdi forEach() tr\u00ean \u0111\u00f3.<\/p>\n\n\n\n thisArg (tu\u1ef3 ch\u1ecdn)<\/em>: M\u1ed9t gi\u00e1 tr\u1ecb s\u1ebd \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng l\u00e0m this trong qu\u00e1 tr\u00ecnh th\u1ef1c thi h\u00e0m callback, th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng khi c\u1ea7n tham chi\u1ebfu \u0111\u1ebfn \u0111\u1ed1i t\u01b0\u1ee3ng b\u00ean ngo\u00e0i.<\/p>\n\n\n\n L\u01b0u \u00fd: T\u1ea5t c\u1ea3 c\u00e1c tham s\u1ed1 tr\u1eeb thisArg \u0111\u1ec1u \u0111\u01b0\u1ee3c t\u1ef1 \u0111\u1ed9ng truy\u1ec1n v\u00e0o callback theo th\u1ee9 t\u1ef1.<\/p>\n\n\n\n D\u01b0\u1edbi \u0111\u00e2y l\u00e0 v\u00ed d\u1ee5 \u0111\u01a1n gi\u1ea3n s\u1eed d\u1ee5ng forEach() \u0111\u1ec3 in ra t\u1eebng ph\u1ea7n t\u1eed trong m\u1ea3ng:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n const numbers = [1, 2, 3, 4, 5];<\/p>\n\n\n\n numbers.forEach(function(number, index) {<\/p>\n\n\n\n console.log(`Ph\u1ea7n t\u1eed th\u1ee9 ${index}: ${number}`);<\/p>\n\n\n\n });<\/p>\n\n\n\n K\u1ebft qu\u1ea3:<\/p>\n\n\n\n less<\/p>\n\n\n\n Ph\u1ea7n t\u1eed th\u1ee9 0: 1<\/p>\n\n\n\n Ph\u1ea7n t\u1eed th\u1ee9 1: 2<\/p>\n\n\n\n Ph\u1ea7n t\u1eed th\u1ee9 2: 3<\/p>\n\n\n\n Ph\u1ea7n t\u1eed th\u1ee9 3: 4<\/p>\n\n\n\n Ph\u1ea7n t\u1eed th\u1ee9 4: 5<\/p>\n\n\n\n Ho\u1eb7c v\u1edbi m\u1ea3ng chu\u1ed7i:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n const fruits = [“T\u00e1o”, “Chu\u1ed1i”, “Cam”];<\/p>\n\n\n\n fruits.forEach((fruit) => {<\/p>\n\n\n\n console.log(`T\u00f4i th\u00edch \u0103n ${fruit}`);<\/p>\n\n\n\n });<\/p>\n\n\n\n K\u1ebft qu\u1ea3:<\/p>\n\n\n\n css<\/p>\n\n\n\n T\u00f4i th\u00edch \u0103n T\u00e1o <\/p>\n\n\n\n T\u00f4i th\u00edch \u0103n Chu\u1ed1i <\/p>\n\n\n\n T\u00f4i th\u00edch \u0103n Cam<\/p>\n\n\n\n Sau khi \u0111\u00e3 n\u1eafm \u0111\u01b0\u1ee3c c\u00e1ch s\u1eed d\u1ee5ng c\u01a1 b\u1ea3n, b\u1ea1n c\u00f3 th\u1ec3 khai th\u00e1c forEach() m\u1ed9t c\u00e1ch linh ho\u1ea1t h\u01a1n trong nh\u1eefng t\u00ecnh hu\u1ed1ng n\u00e2ng cao. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c v\u00ed d\u1ee5 th\u1ef1c t\u1ebf gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 c\u00e1ch v\u1eadn d\u1ee5ng forEach() trong nhi\u1ec1u ng\u1eef c\u1ea3nh kh\u00e1c nhau.<\/p>\n\n\n\n Thay v\u00ec d\u00f9ng function truy\u1ec1n th\u1ed1ng, b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft ng\u1eafn g\u1ecdn h\u01a1n v\u1edbi arrow function:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n const names = [“An”, “B\u00ecnh”, “Chi”];<\/p>\n\n\n\n names.forEach((name, index) => {<\/p>\n\n\n\n console.log(`${index + 1}. ${name}`);<\/p>\n\n\n\n });<\/p>\n\n\n\n K\u1ebft qu\u1ea3:<\/p>\n\n\n\n markdown<\/p>\n\n\n\n 1. An <\/p>\n\n\n\n 2. B\u00ecnh <\/p>\n\n\n\n 3. Chi<\/p>\n\n\n\n \u27a1\ufe0f Vi\u1ec7c s\u1eed d\u1ee5ng arrow function gi\u00fap m\u00e3 ng\u1eafn g\u1ecdn h\u01a1n v\u00e0 d\u1ec5 \u0111\u1ecdc, \u0111\u1eb7c bi\u1ec7t khi logic x\u1eed l\u00fd \u0111\u01a1n gi\u1ea3n.<\/p>\n\n\n\n B\u1ea1n c\u00f3 th\u1ec3 truy\u1ec1n m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng l\u00e0m thisArg \u0111\u1ec3 s\u1eed d\u1ee5ng trong h\u00e0m callback:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n const counter = {<\/p>\n\n\n\n prefix: “Item”,<\/p>\n\n\n\n };<\/p>\n\n\n\n const items = [10, 20, 30];<\/p>\n\n\n\n items.forEach(function (value, index) {<\/p>\n\n\n\n console.log(`${this.prefix} ${index + 1}: ${value}`);<\/p>\n\n\n\n }, counter);<\/p>\n\n\n\n K\u1ebft qu\u1ea3:<\/p>\n\n\n\n yaml<\/p>\n\n\n\n Item 1: 10 <\/p>\n\n\n\n Item 2: 20 <\/p>\n\n\n\n Item 3: 30<\/p>\n\n\n\n \u27a1\ufe0f \u0110\u00e2y l\u00e0 c\u00e1ch hi\u1ec7u qu\u1ea3 khi b\u1ea1n mu\u1ed1n t\u00e1i s\u1eed d\u1ee5ng m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng ho\u1eb7c tham chi\u1ebfu t\u1edbi this b\u00ean ngo\u00e0i trong callback.<\/p>\n\n\n\n forEach() r\u1ea5t ti\u1ec7n l\u1ee3i khi thao t\u00e1c v\u1edbi m\u1ea3ng c\u00e1c object:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n const users = [<\/p>\n\n\n\n { name: “Mai”, age: 25 },<\/p>\n\n\n\n { name: “H\u00f9ng”, age: 30 },<\/p>\n\n\n\n { name: “Linh”, age: 22 },<\/p>\n\n\n\n ];<\/p>\n\n\n\n users.forEach((user) => {<\/p>\n\n\n\n console.log(`${user.name} n\u0103m nay ${user.age} tu\u1ed5i.`);<\/p>\n\n\n\n });<\/p>\n\n\n\n K\u1ebft qu\u1ea3:<\/p>\n\n\n\n css<\/p>\n\n\n\n Mai n\u0103m nay 25 tu\u1ed5i. <\/p>\n\n\n\n H\u00f9ng n\u0103m nay 30 tu\u1ed5i. <\/p>\n\n\n\n Linh n\u0103m nay 22 tu\u1ed5i.<\/p>\n\n\n\n \u27a1\ufe0f \u0110\u00e2y l\u00e0 m\u1ed9t trong nh\u1eefng c\u00e1ch ph\u1ed5 bi\u1ebfn nh\u1ea5t \u0111\u1ec3 hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u trong \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf.<\/p>\n\n\n\n Khi m\u1ea3ng ch\u1ee9a c\u00e1c m\u1ea3ng con, b\u1ea1n c\u00f3 th\u1ec3 l\u1ed3ng nhi\u1ec1u v\u00f2ng forEach() \u0111\u1ec3 duy\u1ec7t:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n const matrix = [<\/p>\n\n\n\n [1, 2],<\/p>\n\n\n\n [3, 4],<\/p>\n\n\n\n [5, 6],<\/p>\n\n\n\n ];<\/p>\n\n\n\n matrix.forEach((row, rowIndex) => {<\/p>\n\n\n\n row.forEach((value, colIndex) => {<\/p>\n\n\n\n console.log(`Ph\u1ea7n t\u1eed t\u1ea1i [${rowIndex}][${colIndex}] = ${value}`);<\/p>\n\n\n\n });<\/p>\n\n\n\n });<\/p>\n\n\n\n K\u1ebft qu\u1ea3:<\/p>\n\n\n\n Ph\u1ea7n t\u1eed t\u1ea1i [0][0] = 1 <\/p>\n\n\n\n Ph\u1ea7n t\u1eed t\u1ea1i [0][1] = 2 <\/p>\n\n\n\n Ph\u1ea7n t\u1eed t\u1ea1i [1][0] = 3 <\/p>\n\n\n\n Ph\u1ea7n t\u1eed t\u1ea1i [1][1] = 4 <\/p>\n\n\n\n Ph\u1ea7n t\u1eed t\u1ea1i [2][0] = 5 <\/p>\n\n\n\n Ph\u1ea7n t\u1eed t\u1ea1i [2][1] = 6<\/p>\n\n\n\n \u27a1\ufe0f C\u00e1ch l\u00e0m n\u00e0y r\u1ea5t ph\u00f9 h\u1ee3p khi l\u00e0m vi\u1ec7c v\u1edbi ma tr\u1eadn, b\u1ea3ng d\u1eef li\u1ec7u ho\u1eb7c d\u1eef li\u1ec7u t\u1ed5 ch\u1ee9c d\u1ea1ng ph\u00e2n c\u1ea5p.<\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c forEach() th\u01b0\u1eddng xuy\u00ean \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c t\u00e1c v\u1ee5 t\u01b0\u01a1ng t\u00e1c v\u1edbi giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (DOM) ho\u1eb7c x\u1eed l\u00fd d\u1eef li\u1ec7u t\u1eeb API tr\u1ea3 v\u1ec1 d\u1ea1ng JSON. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 hai v\u00ed d\u1ee5 ti\u00eau bi\u1ec3u:<\/p>\n\n\n\n \u2714\ufe0f V\u00ed d\u1ee5 1: Th\u00eam danh s\u00e1ch m\u1ee5c v\u00e0o giao di\u1ec7n HTML<\/p>\n\n\n\n html<\/p>\n\n\n\n <ul id=”fruits-list”><\/ul><\/p>\n\n\n\n javascript<\/p>\n\n\n\n const fruits = [“T\u00e1o”, “Chu\u1ed1i”, “D\u01b0a h\u1ea5u”];<\/p>\n\n\n\n const list = document.getElementById(“fruits-list”);<\/p>\n\n\n\n fruits.forEach((fruit) => {<\/p>\n\n\n\n const li = document.createElement(“li”);<\/p>\n\n\n\n li.textContent = fruit;<\/p>\n\n\n\n list.appendChild(li);<\/p>\n\n\n\n });<\/p>\n\n\n\n \u27a1\ufe0f M\u1ed7i ph\u1ea7n t\u1eed trong m\u1ea3ng s\u1ebd \u0111\u01b0\u1ee3c chuy\u1ec3n th\u00e0nh m\u1ed9t th\u1ebb <li> v\u00e0 hi\u1ec3n th\u1ecb l\u00ean tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\n \u2714\ufe0f V\u00ed d\u1ee5 2: Duy\u1ec7t qua d\u1eef li\u1ec7u JSON t\u1eeb API<\/p>\n\n\n\n Gi\u1ea3 s\u1eed b\u1ea1n nh\u1eadn \u0111\u01b0\u1ee3c d\u1eef li\u1ec7u ng\u01b0\u1eddi d\u00f9ng t\u1eeb API nh\u01b0 sau:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n const response = [<\/p>\n\n\n\n { id: 1, name: “Lan” },<\/p>\n\n\n\n { id: 2, name: “Minh” },<\/p>\n\n\n\n { id: 3, name: “Ph\u00fac” }<\/p>\n\n\n\n ];<\/p>\n\n\n\n response.forEach((user) => {<\/p>\n\n\n\n console.log(`ID: ${user.id}, T\u00ean: ${user.name}`);<\/p>\n\n\n\n });<\/p>\n\n\n\n \u27a1\ufe0f forEach() gi\u00fap b\u1ea1n x\u1eed l\u00fd t\u1eebng object trong m\u1ea3ng m\u1ed9t c\u00e1ch tr\u1ef1c quan, thu\u1eadn ti\u1ec7n \u0111\u1ec3 hi\u1ec3n th\u1ecb, l\u1ecdc ho\u1eb7c thao t\u00e1c s\u00e2u h\u01a1n trong \u1ee9ng d\u1ee5ng web.<\/p>\n\n\n\n
<\/figure>\n\n\n\nforEach JavaScript l\u00e0 g\u00ec?<\/h2>\n\n\n\n
\n
C\u00fa ph\u00e1p v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng c\u01a1 b\u1ea3n c\u1ee7a forEach JavaScript<\/h2>\n\n\n\n
forEach()<\/code> trong JavaScript \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 l\u1eb7p qua t\u1eebng ph\u1ea7n t\u1eed c\u1ee7a m\u1ea3ng v\u00e0 th\u1ef1c thi m\u1ed9t h\u00e0m callback v\u1edbi m\u1ed7i ph\u1ea7n t\u1eed \u0111\u00f3. \u0110\u00e2y l\u00e0 c\u00e1ch th\u1ee9c l\u1eb7p ph\u1ed5 bi\u1ebfn nh\u1edd c\u00fa ph\u00e1p ng\u1eafn g\u1ecdn, d\u1ec5 \u0111\u1ecdc v\u00e0 ph\u00f9 h\u1ee3p v\u1edbi l\u1eadp tr\u00ecnh h\u00e0m (functional programming).<\/p>\n\n\n\nC\u00fa ph\u00e1p chu\u1ea9n: array.forEach(callback, thisArg)<\/h3>\n\n\n\n
Gi\u1ea3i th\u00edch c\u00e1c tham s\u1ed1<\/h3>\n\n\n\n
V\u00ed d\u1ee5 c\u01a1 b\u1ea3n: l\u1eb7p m\u1ea3ng s\u1ed1, m\u1ea3ng chu\u1ed7i<\/h3>\n\n\n\n
V\u00ed d\u1ee5 n\u00e2ng cao khi s\u1eed d\u1ee5ng forEach JavaScript<\/h2>\n\n\n\n
S\u1eed d\u1ee5ng arrow function v\u1edbi forEach()<\/h3>\n\n\n\n
Truy\u1ec1n thisArg \u0111\u1ec3 t\u00f9y bi\u1ebfn ng\u1eef c\u1ea3nh<\/h3>\n\n\n\n
L\u1eb7p qua m\u1ea3ng object<\/h3>\n\n\n\n
forEach() v\u1edbi m\u1ea3ng l\u1ed3ng nhau<\/h3>\n\n\n\n
\u1ee8ng d\u1ee5ng th\u1ef1c t\u1ebf trong thao t\u00e1c DOM, d\u1eef li\u1ec7u JSON<\/h3>\n\n\n\n
\n