tek4

Mảng đa chiều trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8308 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-100.png" alt="Mảng đa chiều trong JavaScript" width="691" height="443" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ t&igrave;m hiểu về mảng đa chiều trong JavaScript c&ugrave;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng.</p> <p>Trong b&agrave;i trước, ta đ&atilde; t&igrave;m hiểu về mảng trong JavaScript, nhưng mới chỉ xem x&eacute;t qua c&aacute;c mảng một chiều. C&aacute;c bạn c&oacute; thể xem b&agrave;i viết về mảng trong JavaScript tại đ&acirc;y.</p> <h1>Mảng đa chiều trong JavaScript</h1> <p>Trong b&agrave;i n&agrave;y, ta sẽ sử dụng thử một số mảng đa chiều. Mảng đa chiều l&agrave; một mảng m&agrave; chứa một hay nhiều mảng kh&aacute;c.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let ID = [[15, 23, 12], [53, 11, 16], [7, 8, 20]];</pre> <h2>Tạo một mảng đa chiều</h2> <p>Sau đ&acirc;y l&agrave; c&aacute;ch m&agrave; ta c&oacute; thể tạo mảng đa chiều trong JavaScript.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let ID = [[15, 23, 12], [53, 11, 16], [7, 8, 20]];</pre> <h2>Truy cập c&aacute;c phần tử của mảng đa chiều</h2> <p>Ta c&oacute; thể truy cập c&aacute;c phần tử của một mảng đa chiều bằng c&aacute;ch sử dụng c&aacute;c chỉ số (0, 1, 2&hellip;).</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Chỉ số cho phần tử đầu ti&ecirc;n của mảng sẽ bắt đầu từ gi&aacute; trị l&agrave; 0.</span></strong></p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = [["Nam",10],["Thanh",20],["Trung",56]]; console.log(sinh_vien[0]) console.log(sinh_vien[0][0])</pre> <p>Kết quả:</p> <pre>['Nam', 10] Nam</pre> <h2>Th&ecirc;m một phần tử v&agrave;o một mảng đa chiều</h2> <p>Ta c&oacute; thể sử dụng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">push()</code>hoặc k&yacute; hiệu chỉ số để th&ecirc;m c&aacute;c phần tử v&agrave;o một mảng đa chiều.</p> <p>V&iacute; dụ 1:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = [["Nam",10],["Thanh",20],["Trung",56]]; sinh_vien.push(["Trang",30]); console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>[['Nam', 10], ['Thanh', 20], ['Trung', 56], ['Trang', 30]]</pre> <p>V&iacute; dụ 2:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = [["Nam",10],["Thanh",20],["Trung",56]]; sinh_vien[0].push(30); console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>[['Nam', 10, 30], ['Thanh', 20], ['Trung', 56]]</pre> <p>V&iacute; dụ 3:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = [["Nam",10],["Thanh",20],["Trung",56]]; sinh_vien[0][2] = 100; console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>[['Nam', 10, 100], ['Thanh', 20], ['Trung', 56]]</pre> <h2>X&oacute;a một phần tử khỏi mảng đa chiều</h2> <p>Ta c&oacute; thể sử dụng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">pop()</code>để x&oacute;a phần tử khỏi mảng đa chiều.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = [["Nam",10],["Thanh",20],["Trung",56]]; sinh_vien.pop(); console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>[['Nam', 10], ['Thanh', 20]]</pre> <p>V&iacute; dụ 2:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = [["Nam",10],["Thanh",20],["Trung",56]]; sinh_vien[0].pop(); console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>[['Nam'], ['Thanh', 20], ['Trung', 56]]</pre> <h2>Duyệt qua c&aacute;c phần tử trong mảng đa chiều</h2> <p>Ta c&oacute; thể duyệt qua một mảng đa chiều bằng c&aacute;ch sử dụng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">forEach()</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = [["Nam",10],["Thanh",20],["Trung",56]]; sinh_vien.forEach((sv) =&gt; { &nbsp;&nbsp;&nbsp; sv.forEach((data) =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(data); &nbsp;&nbsp;&nbsp; }); });</pre> <p>Kết quả:</p> <pre>Nam 10 Thanh 20 Trung 56</pre> <p>Phương thức forEach() đầu ti&ecirc;n được sử dụng để lặp qua c&aacute;c phần tử của mảng b&ecirc;n ngo&agrave;i v&agrave; phương thức forEach() thứ hai được sử dụng để lặp qua c&aacute;c phần tử của mảng b&ecirc;n trong.</p> <p>Ta cũng c&oacute; thể sử dụng v&ograve;ng lặp <code class="EnlighterJSRAW" data-enlighter-language="generic">for...of</code>để duyệt qua mảng đa chiều.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = [["Nam",10],["Thanh",20],["Trung",56]]; for (let sv of sinh_vien) { &nbsp; for (let data of sv) { &nbsp;&nbsp;&nbsp; console.log(data); &nbsp; } }</pre> <p>Kết quả:</p> <pre>Nam 10 Thanh 20 Trung 56</pre> <p>Ta cũng c&oacute; thể sử dụng v&ograve;ng lặp <code class="EnlighterJSRAW" data-enlighter-language="generic">for</code>th&ocirc;ng thường để duyệt qua c&aacute;c phần tử tr&ecirc;n một mảng đa chiều.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = [["Nam",10],["Thanh",20],["Trung",56]]; for(let i = 0; i &lt; sinh_vien.length; i++){ &nbsp;&nbsp;&nbsp; let number = sinh_vien[i].length; &nbsp;&nbsp;&nbsp; for(let j = 0; j &lt; number; j++) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(sinh_vien[i][j]); &nbsp;&nbsp;&nbsp; } }</pre> <p>Kết quả:</p> <pre>Nam 10 Thanh 20 Trung 56</pre> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về mảng đa chiều trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i tiếp theo về lập tr&igrave;nh JavaScript tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; ủng hộ tek4!</p>