tek4

Mảng trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8306 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-99.png" alt="Mảng trong JavaScript" width="701" height="443" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ t&igrave;m hiểu về mảng 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> <h1>Mảng trong JavaScript</h1> <p>Như đ&atilde; biết, một biến c&oacute; thể lưu trữ một phần tử duy nhất. Tuy nhi&ecirc;n, nếu ta cần lưu trữ nhiều phần tử c&ugrave;ng một l&uacute;c, ta c&oacute; thể sử dụng một mảng. Mảng l&agrave; một đối tượng c&oacute; thể lưu trữ nhiều phần tử.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = ['Nam', 'Thanh', 'Trang'];</pre> <h2>Tạo mảng</h2> <p>Ta c&oacute; thể tạo một mảng bằng hai c&aacute;ch:</p> <p><em>1. Sử dụng một k&yacute; tự mảng</em></p> <p>C&aacute;ch dễ nhất để tạo một mảng l&agrave; sử dụng một k&yacute; tự mảng [].</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = ['Nam', 'Thanh', 'Trang'];</pre> <p><em>2. Sử dụng từ kh&oacute;a new</em></p> <p>Ta cũng c&oacute; thể tạo một mảng bằng biểu thức <code class="EnlighterJSRAW" data-enlighter-language="generic">new Array()</code>trong JavaScript.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new Array("Nam", "Thanh");</pre> <p>Trong cả hai v&iacute; dụ tr&ecirc;n, ch&uacute;ng ta đ&atilde; tạo một mảng c&oacute; hai phần tử.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: N&ecirc;n sử dụng k&yacute; tự của mảng để tạo mảng.</span></strong></p> <p>Dưới đ&acirc;y l&agrave; c&aacute;c v&iacute; dụ kh&aacute;c về mảng.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const empty = [ ]; const num = [100, 202, 349, 490]; const str = ['143', '232', '313']; const mix = ['12', '23', 14, 25, false];</pre> <p>Ta cũng c&oacute; thể lưu trữ mảng, h&agrave;m v&agrave; c&aacute;c đối tượng kh&aacute;c b&ecirc;n trong một mảng.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const mix = [ &nbsp;&nbsp;&nbsp; {ID: 100}, &nbsp;&nbsp;&nbsp; [7, 9 , 20], &nbsp;&nbsp;&nbsp; function func() { console.log('Lập tr&igrave;nh')} ];</pre> <h2>Truy cập c&aacute;c phần tử của một mảng</h2> <p>Ta c&oacute; thể truy cập c&aacute;c phần tử b&ecirc;n trong một mảng bằng c&aacute;ch sử dụng c&aacute;c chỉ số (0, 1, 2&hellip;).</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = ['Nam', 'Thanh', 'Trang']; console.log(sinh_vien[0]); console.log(sinh_vien[1]);</pre> <p>Kết quả:</p> <pre>Nam Thanh</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Chỉ số của một mảng bắt đầu bằng gi&aacute; trị l&agrave; số 0.</span></strong></p> <h2>Th&ecirc;m một phần tử v&agrave;o mảng</h2> <p>Ta c&oacute; thể sử dụng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">push()</code>v&agrave; <code class="EnlighterJSRAW" data-enlighter-language="generic">unshift()</code>để th&ecirc;m một phần tử v&agrave;o một mảng.</p> <p><em>1. Phương thức push() th&ecirc;m một phần tử v&agrave;o cuối một mảng v&agrave; trả về độ d&agrave;i của một mảng mới.</em></p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = ['Nam', 'Thanh', 'Trang']; sinh_vien.push('Huy'); console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>['Nam', 'Thanh', 'Trang', 'Huy']</pre> <p><em>2. Phương thức unshift() th&ecirc;m một phần tử mới v&agrave;o đầu mảng v&agrave; trả về độ d&agrave;i mới của mảng.</em></p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = ['Nam', 'Thanh', 'Trang']; sinh_vien.unshift('Huy'); console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>['Huy', 'Nam', 'Thanh', 'Trang']</pre> <h2>Thay đổi c&aacute;c phần tử của mảng</h2> <p>Ta cũng c&oacute; thể th&ecirc;m phần tử hoặc thay đổi phần tử bằng c&aacute;ch truy cập gi&aacute; trị chỉ số.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = ['Nam', 'Thanh', 'Trang']; sinh_vien.unshift('Huy'); sinh_vien[1] = "Giang"; console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>['Huy', 'Giang', 'Thanh', 'Trang']</pre> <h2>X&oacute;a một phần tử khỏi mảng</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ử cuối c&ugrave;ng khỏi một mảng. Phương thức pop() sẽ trả về gi&aacute; trị được x&oacute;a khỏi mảng.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = ['Nam', 'Thanh', 'Trang']; sinh_vien.unshift('Huy'); console.log(sinh_vien); let a = sinh_vien.pop(); console.log(sinh_vien); console.log(a);</pre> <p>Kết quả:</p> <pre>['Huy', 'Nam', 'Thanh', 'Trang'] ['Huy', 'Nam', 'Thanh'] Trang</pre> <p>Nếu cần loại bỏ phần tử đầu ti&ecirc;n, ta c&oacute; thể sử dụng phương thức shift(). Phương thức shift() loại bỏ phần tử đầu ti&ecirc;n v&agrave; cũng trả về phần tử bị loại bỏ.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = ['Nam', 'Thanh', 'Trang']; sinh_vien.unshift('Huy'); console.log(sinh_vien); let a = sinh_vien.shift(); console.log(sinh_vien); console.log(a);</pre> <p>Kết quả:</p> <pre>['Huy', 'Nam', 'Thanh', 'Trang'] ['Nam', 'Thanh', 'Trang'] Huy</pre> <h2>T&igrave;m độ d&agrave;i của mảng</h2> <p>Ta c&oacute; thể t&igrave;m độ d&agrave;i của một mảng (số phần tử trong một mảng) bằng c&aacute;ch sử dụng thuộc t&iacute;nh <code class="EnlighterJSRAW" data-enlighter-language="generic">length</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = ['Nam', 'Thanh', 'Trang']; sinh_vien.unshift('Huy'); console.log(sinh_vien.length);</pre> <p>Kết quả:</p> <pre>4</pre> <p>Trong đoạn m&atilde; tr&ecirc;n, ban đầu c&oacute; 3 phần tử trong mảng sinh_vien. Nhưng v&igrave; ta đ&atilde; th&ecirc;m một phần tử nữa v&agrave;o trong mảng, do đ&oacute;, sau khi in ra độ d&agrave;i của mảng sẽ l&agrave; 4.</p> <h2>Một số phương thức của mảng</h2> <p>Trong JavaScript, nhiều phương thức của mảng gi&uacute;p thực hiện c&aacute;c ph&eacute;p t&iacute;nh tr&ecirc;n mảng dễ d&agrave;ng hơn.</p> <p>Một số phương thức của mảng trong JavaScript thường được sử dụng bao gồm:</p> <table style="width: 76.0995%; height: 322px;"> <tbody> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">Phương thức</td> <td style="text-align: center; height: 23px;">M&ocirc; tả</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">concat()</td> <td style="height: 23px;">Nối c&aacute;c mảng với nhau v&agrave; trả về kết quả.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">indexOf()</td> <td style="height: 23px;">T&igrave;m một phần tử của mảng v&agrave; trả về vị tr&iacute; của phần tử đ&oacute; trong mảng.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">find()</td> <td style="height: 23px;">Trả về gi&aacute; trị đầu ti&ecirc;n của phần tử trong mảng m&agrave; thỏa m&atilde;n điều kiện kiểm tra.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">findIndex()</td> <td style="height: 23px;">Trả về chỉ số đầu ti&ecirc;n của phần tử trong mảng m&agrave; thỏa m&atilde;n điều kiện kiểm tra.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">forEach()</td> <td style="height: 23px;">Thực hiện lời gọi h&agrave;m cho mỗi phần tử.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">includes()</td> <td style="height: 23px;">Kiểm tra phần tử c&oacute; trong mảng hay kh&ocirc;ng.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">push()</td> <td style="height: 23px;">Th&ecirc;m 1 phần tử v&agrave;o cuối mảng v&agrave; trả về độ d&agrave;i mới của mảng.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">unshift()</td> <td style="height: 23px;">Th&ecirc;m 1 phần tử v&agrave;o đầu mảng v&agrave; trả về độ d&agrave;i mới của mảng.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">pop()</td> <td style="height: 23px;">Lấy ra phần tử cuối c&ugrave;ng của mảng v&agrave; trả về phần tử được lấy.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">shift()</td> <td style="height: 23px;">Lấy ra phần tử đầu ti&ecirc;n của mảng v&agrave; trả về phần tử được lấy.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">sort()</td> <td style="height: 23px;">Sắp xếp c&aacute;c phần tử theo bảng chữ c&aacute;i đối với kiểu chuỗi v&agrave; theo chiều giảm dần.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">slice()</td> <td style="height: 23px;">Chọn một phần của mảng v&agrave; trả về mảng mới.</td> </tr> <tr style="height: 23px;"> <td style="text-align: center; height: 23px;">splice()</td> <td style="height: 23px;">Loại bỏ hoặc thay thế c&aacute;c phần tử hiện c&oacute; bằng c&aacute;c phần tử mới.</td> </tr> </tbody> </table> <h2>C&aacute;ch hoạt động của mảng trong JavaScript</h2> <p>Trong JavaScript, một mảng l&agrave; một đối tượng. V&agrave;, c&aacute;c chỉ số của mảng l&agrave; c&aacute;c kh&oacute;a của đối tượng. V&igrave; mảng l&agrave; c&aacute;c đối tượng n&ecirc;n c&aacute;c phần tử của mảng được lưu trữ bằng tham chiếu. Do đ&oacute;, khi một gi&aacute; trị mảng được sao ch&eacute;p, bất kỳ thay đổi n&agrave;o trong mảng được sao ch&eacute;p cũng sẽ phản &aacute;nh lại trong mảng gốc ban đầu.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = ['Nam', 'Thanh', 'Trang']; sinh_vien.unshift('Huy'); console.log(sinh_vien); let copy = sinh_vien; copy.pop(); console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>['Huy', 'Nam', 'Thanh', 'Trang'] ['Huy', 'Nam', 'Thanh']</pre> <p>Ta cũng c&oacute; thể lưu trữ c&aacute;c gi&aacute; trị bằng c&aacute;ch chuyển một kh&oacute;a được đặt t&ecirc;n trong một mảng.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let sinh_vien = ['Nam', 'Thanh']; sinh_vien.ten = 'Sinh vien'; console.log(sinh_vien); console.log(sinh_vien.ten); console.log(sinh_vien['ten']);</pre> <p>Kết quả:</p> <pre>['Nam', 'Thanh', ten: 'Sinh vien'] Sinh vien Sinh vien</pre> <p>Tuy nhi&ecirc;n, kh&ocirc;ng n&ecirc;n lưu trữ c&aacute;c gi&aacute; trị bằng c&aacute;ch truyền c&aacute;c t&ecirc;n t&ugrave;y &yacute; v&agrave;o một mảng.</p> <p>Do đ&oacute; trong JavaScript, ta n&ecirc;n sử dụng một mảng nếu c&aacute;c gi&aacute; trị nằm trong tập hợp c&oacute; thứ tự. Nếu kh&ocirc;ng, tốt hơn l&agrave; sử dụng đối tượng.</p> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về mảng 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; tin tưởng tek4!</p>