Tạo 1 mảng trong javascript

Nội dung chính Show

Tạo mảng trong JavaScript bằng cách định trực tiếp giá trị phần tử | cặp dấu []
Khai báo mảng trong JavaScript bằng cách định gián tiếp giá trị phần tử | biến trong JavaScript
Khai báo JavaScript bằng cách chỉ định biểu thức làm giá trị phần tử của mảng
Tạo mảng trong JavaScript bằng Array() constructor trong Array Object
Tổng kết

Hướng dẫn cách tạo mảng trong JavaScript. Bạn sẽ học được tất cả các cách tạo và khai báo mảng javascript sau bài học này.

Chúng ta có 4 phương pháp cơ bản để tạo và khai báo mảng trong JavaScript như sau:

Sử dụng cặp dấu []: chỉ định trực tiếp giá trị phần tử trong mảng
Sử dụng biến: chỉ định gián tiếp giá trị phần tử trong mảng
Sử dụng biểu thức: chỉ định biểu thức làm giá trị phần tử trong mảng
Sử dụng hàm tạo Array() constructor trong Array Object

Tạo mảng trong JavaScript bằng cách định trực tiếp giá trị phần tử | cặp dấu []

Để tạo mảng trong JavaScript, chúng ta chỉ định trực tiếp giá trị các phần tử bên trong cặp dấu [ ] và cách nhau bởi dấu , với cú pháp như sau:

[Phần tử 1, Phần tử 2, ...]

Các phần tử có thể là bất kỳ dạng dữ liệu nào mà JavaScript có thể xử lý, chẳng hạn như số và chuỗi.
Ví dụ:

let array1 = [10, 20, 30, 40, 50];
let array2 = ['Hanoi' , 'Saigon',  'Cantho'];

Bạn cũng có thể sử dụng nhiều kiểu dữ liệu khác nhau cho từng phần tử trong cùng một mảng.

let array3 = ['Kiyoshi', 30 , True];

Ngoài ra bạn cũng có thể sử dụng một mảng như là một phần tử trong một mảng khác, và chúng ta gọi đây là mảng trong mảng hay còn gọi là mảng đa chiều trong JavaScript. Ví dụ:

let array4 = ['Cam' , 'Táo' , ['Dâu xanh' , 'Dâu đỏ']];

Sau khi tạo mảng trong JavaScript, chúng ta có thể thêm cũng như là xóa phần tử từ trong mảng đã tạo. Bạn cũng có thể tạo mảng rỗng trong JavaScript với cách viết sau:

let empty_array = [];
console.log(empty_array);

Giống như ở trên thì sau khi tạo mảng, bạn có thể gán mảng đó vào một biến để sử dụng nhiều lần trong chương trình. Ví dụ:

let fruits = ['Cam' , 'Táo' , ['Dâu xanh' , 'Dâu đỏ']];
for (let i=0; i< fruits.length;i++){
  console.log(fruits[i]);
}

Kết quả

Cam
Táo
['Dâu xanh', 'Dâu đỏ']

Lưu ý là khác với các ngôn ngữ lập trình khác thì trong mảng JavaScript không yêu cầu bắt buộc các phần tử trong mảng phải liên tiếp nhau. Ví dụ trong một mảng tồn tại phần tử ở vị trí index thứ 1 và thứ 3, nhưng không nhất thiết phải tồn tại phần tử tại vị trí index thứ 2. Khi truy cập và lấy một phần tử không tồn tại trong mảng thì giá trị undefined sẽ được trả về mà không xảy ra lỗi.

Ví dụ:

let num_array = [11, , 13];

console.log(num_array);


console.log(num_array[1]);


console.log(num_array.length);

Bạn hãy chú ý ở đây không phải là phần tử trong mảng không chứa giá trị, mà là vốn phần tử đó không hề tồn tại tại vị trí chỉ định trong mảng. Nếu chúng ta sử dụng thuộc tính length để kiểm tra độ dài của mảng này thì giá trị trả về sẽ là số index trong mảng, nhưng điều đó không có nghĩa là số index này sẽ bằng số phần tử trong mảng.

let num_array = [11, , 13];
console.log(num_array.length);

Khai báo mảng trong JavaScript bằng cách định gián tiếp giá trị phần tử | biến trong JavaScript

Thay vì chỉ định trực tiếp giá trị của phần tử, chúng ta sẽ chỉ định gián tiếp giá trị phần tử thông qua biến, bằng cách gán giá trị vào biến và sử dụng biến đó để khởi tạo mảng.

Ví dụ, chúng ta gán các giá trị phần tử vào biến x, y và sử dụng các biến này để tạo mảng JavaScript như sau:

let x = 10;
let y = 15;
let num_array = [x, y];
console.log(num_array);


let num_array_2 = [20, y]
console.log(num_array_2);

Ở đây cần lưu ý là chúng ta chỉ sử dụng giá trị của biến để khởi tạo giá trị phần tử khi tạo mảng, chứ không tạo ra một mối quan hệ tham chiếu giữa biến và các phần tử trong mảng.

Do đó, sau khi tạo xong mảng, nếu chúng ta thay đổi giá trị của biến, thì giá trị của phần tử trong mảng cũng sẽ không bị thay đổi theo biến.

Ví dụ, giá trị các phần tử trong mảng không bị thay đổi dù giá trị các biến x, y sử dụng để tạo nó đã bị thay đổi.

let x = 10;
let y = 15;
let num_array = [x, y];
console.log(num_array);


x = 20;
y = 25;
console.log(num_array);

Khai báo JavaScript bằng cách chỉ định biểu thức làm giá trị phần tử của mảng

Khi tạo ra mảng trong JavaScript chúng ta có thể sử dụng trực tiếp các biểu thức tính toán làm giá trị trong mảng. Trong trường hợp này thì không phải biểu thức tính toán mà chính kết quả của biểu thức sẽ được sử dụng làm phần tử trong mảng.

Ví dụ cụ thể, chúng ta sử dụng biểu thức tính toán với các số làm giá trị trong mảng như sau:

let num_array = [1 + 2, 10 * 3];
console.log(num_array);

Tương tự thì chúng ta cũng có thể sử dụng biểu thức tính toán với các biến để tạo mảng trong JavaScript như sau:

let x = 10;
let num_array = [x + 2, x - 3];
console.log(num_array);

Tuy nhiên chúng ta cần lưu ý khi sử dụng giá trị thuộc kiểu chuỗi trong các biểu thức tính toán này. Tùy thuộc vào toán tử sử dụng mà biểu thức tính toán có thể trả về đúng kết quả mong muốn hay không. Ví dụ chúng ta có thể sử dụng toán tử cộng nhưng không thể dùng toán tử trừ giữa chuỗi và số như sau:

let x = "a";
let num_array = [];

num_array = [x + 2, x +3];
console.log(num_array);

num_array = [x + "b", x +3];
console.log(num_array);


num_array = [x + 2, x -3];
console.log(num_array2);

Giống như ví dụ NG ở trên thì kết quả giữa phép trừ một chuỗi với một số sẽ trả về NaN, và đây là điều chúng ta không mong muốn khi tạo mảng trong JavaScript.

Tạo mảng trong JavaScript bằng Array() constructor trong Array Object

Array Object là đối tượng được chuẩn bị sẵn trong JavaScript để làm việc với mảng. Chúng ta có thể sử dụng hàm tạo (Array() constructor) trong Array Object để tạo mảng trong JavaScript với cú pháp sau đây:

new Array( phần tử 1, phần tử 2, phần tử 3, ...)

Ví dụ, chúng ta có thể tạo cùng một mảng trong JavaScript với 2 cách sau đây:

let colors1 = ['red', 'orange'];
let colors2 = new Array ('red', 'orange');

Ngoài ra, chúng ta có thể chỉ độ dài của mảng khi tạo mảng trong JavaScript bằng Array() constructor với cú pháp như sau:

new Array(arrayLength)

Kết quả trả về sẽ là một mảng mới có độ dài bằng length đã chỉ định, nhưng không chứa phần tử trong đó. Ví dụ, chúng ta có thể kiểm tra chiều dài của mảng được tạo, cũng như xem có phần tử tại vị trí index bất kỳ trong mảng hay không như sau:

let empty_array = new Array(10);


console.log(empty_array.length);


console.log(empty_array[3]);

Có thể thấy giá trị undefined được trả về, chứng tỏ ở vị trí index đó không tồn tại phần tử.

Tổng kết

Trên đây Kiyoshi đã trình bày các cách khai báo và tạo mảng trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành với các ví dụ ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#450808;background-color:#d899f5" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a>&nbsp;và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#450808;background-color:#d899f5" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://laptrinhcanban.com/ezossp/https/images.dmca.com/Badges/DMCABadgeHelper.min.js?screx=1&sxcb=2a" async type="text/ez-screx"></p><h3 style="font-size:15px">Bài viết liên quan</h3><ul class="popular-posts"><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/array-filter-trong-javascript/" title="Array filter trong JavaScript" rel="bookmark">Array filter trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/array-map-trong-javascript/" title="Array map trong JavaScript" rel="bookmark">Array map trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/array-reduce-trong-javascript/" title="Array reduce trong JavaScript" rel="bookmark">Array reduce trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/cat-mang-trong-javascript/" title="Cắt mảng trong JavaScript (slice)" rel="bookmark">Cắt mảng trong JavaScript (slice)</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/chuyen-mang-thanh-chuoi-trong-javascript/" title="Chuyển mảng thành chuỗi trong javascript" rel="bookmark">Chuyển mảng thành chuỗi trong javascript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/concat-trong-javascript/" title="Phương thức concat() trong JavaScript" rel="bookmark">Phương thức concat() trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/dao-nguoc-mang-javascript/" title="Đảo ngược mảng trong JavaScript" rel="bookmark">Đảo ngược mảng trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/dem-so-lan-xuat-hien-phan-tu-trong-mang-javascript/" title="Đếm số lần xuất hiện phần tử trong mảng JavaScript" rel="bookmark">Đếm số lần xuất hiện phần tử trong mảng JavaScript</a></h3></div></li></ul></div><div id="keugoi"><span>Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!</span></div><section class="icon-bar-2" style="border-bottom:dotted grey .3px!important"><a target="_blank" title="chia sẻ qua facebook" rel="noopener noreferrer" href="https://www.facebook.com/sharer/sharer.php?u=https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/tao-mang-trong-javascript/" class="facebook"><i class="fa fa-facebook"></i></a><a target="_blank" rel="noopener noreferrer" href="https://twitter.com/intent/tweet?url=https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/tao-mang-trong-javascript/" title="chia sẻ qua twitter" class="twitter"><i class="fa fa-twitter"></i></a><a target="_blank" rel="noopener noreferrer" href="https://getpocket.com/edit?url=https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/tao-mang-trong-javascript/" title="chia sẻ qua pocket" class="pocket"><i class="fa fa-get-pocket"></i></a><span class="zalo-share-button" title="chia sẻ qua zalo" style="margin-left:18px;margin-bottom:-3px" data-href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/tao-mang-trong-javascript/" data-oaid="579745863508352884" data-layout="3" data-color="blue" data-customize="false"></span></section><p class="ico-folder"><a target="_blank" href="https://laptrinhcanban.com/"><span itemprop="HOME">HOME</span></a><span class="sya"></span> <span class="sya"> ›</span> <a target="_blank" class="article-category-link" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/">học javascript - lập trình javascript cơ bản</a>>><a target="_blank" class="article-category-link" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/">04. mảng trong javascript</a></p><nav id="article-nav"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/chuoi-trong-javascript/chen-ky-tu-vao-chuoi-trong-javascript/" id="article-nav-older" class="article-nav-link-wrap" style="float:left;text-align:right;padding-right:20px"><strong class="article-nav-caption">Bài sau</strong><div class="article-nav-title">Chèn ký tự vào chuỗi trong JavaScript</div></a><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/truy-cap-phan-tu-trong-mang-javascript-bang-index/" id="article-nav-newer" class="article-nav-link-wrap" style="float:right;text-align:left;padding-left:20px"><strong class="article-nav-caption">Bài tiếp</strong><div class="article-nav-title">Index trong JavaScript và cách truy cập phần tử trong mảng JavaScript</div></a><span id="ezoic-pub-ad-placeholder-611" class="ezoic-adpicker-ad"></span></nav><div id="recent_posts_down"><div class="widget_athemes_tabs"><ul id="widget-tab" class="clearfix widget-tab-nav"><li class="active">Bài viết mới nhất</li></ul><div class="widget"><ul><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-chuoi-trong-php/"><img width="60px" height="60px" loading="lazy" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" aria-label="Tách chuỗi trong PHP (explode, preg_split)" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban45.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-chuoi-trong-php/">Tách chuỗi trong PHP (explode, preg_split)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/cat-chuoi-trong-php/"><img width="60px" height="60px" loading="lazy" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" aria-label="Cắt chuỗi trong PHP (substr, mb_substr)" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban21.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/cat-chuoi-trong-php/">Cắt chuỗi trong PHP (substr, mb_substr)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-chuoi-thanh-mang-trong-php/"><img width="60px" height="60px" loading="lazy" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" aria-label="Tách chuỗi thành mảng trong PHP (explode)" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban57.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-chuoi-thanh-mang-trong-php/">Tách chuỗi thành mảng trong PHP (explode)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tim-kiem-chuoi-trong-php/"><img width="60px" height="60px" loading="lazy" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" aria-label="Tìm kiếm chuỗi trong PHP (strpos)" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban43.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tim-kiem-chuoi-trong-php/">Tìm kiếm chuỗi trong PHP (strpos)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/dem-so-lan-xuat-hien-cua-ky-tu-trong-chuoi-php/"><img width="60px" height="60px" loading="lazy" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" aria-label="Đếm số lần xuất hiện của ký tự và chuỗi trong chuỗi PHP (substr_count)" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban52.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/dem-so-lan-xuat-hien-cua-ky-tu-trong-chuoi-php/">Đếm số lần xuất hiện của ký tự và chuỗi trong chuỗi PHP (substr_count)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-tung-ky-tu-trong-chuoi-php/"><img width="60px" height="60px" loading="lazy" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" aria-label="Tách từng ký tự trong chuỗi PHP (substr, preg_split)" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban47.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/tach-tung-ky-tu-trong-chuoi-php/">Tách từng ký tự trong chuỗi PHP (substr, preg_split)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/chuyen-chuoi-thanh-mang-trong-php/"><img width="60px" height="60px" loading="lazy" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" aria-label="Chuyển chuỗi thành mảng trong PHP (str_split, mb_str_split)" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban17.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/chuyen-chuoi-thanh-mang-trong-php/">Chuyển chuỗi thành mảng trong PHP (str_split, mb_str_split)</a></span> <span>tháng 9 17, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/xoa-ky-tu-trong-chuoi-php/"><img width="60px" height="60px" loading="lazy" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" aria-label="Xóa ký tự trong chuỗi PHP" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban15.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/php/nhap-mon-lap-trinh-php/chuoi-trong-php/xoa-ky-tu-trong-chuoi-php/">Xóa ký tự trong chuỗi PHP</a></span> <span>tháng 9 15, 2022</span></div></li></ul></div></div></div><footer class="entry-meta entry-footer"></footer><hr class="entry-footer-hr"></div><span class="ezoic-autoinsert-ad ezoic-longest_content"></span><span style="clear:both;display:block" id="ez-clearholder-leader-1"></span><span class="ezoic-ad ezoic-at-0 leader-1 leader-1560 adtester-container adtester-container-560" data-ez-name="laptrinhcanban_com-leader-1"><span id="div-gpt-ad-laptrinhcanban_com-leader-1-0" ezaw="300" ezah="250" style="position:relative;z-index:0;display:inline-block;padding:0;min-height:250px;min-width:300px" class="ezoic-ad"><script data-ezscrex="false" data-cfasync="false" style="display:none">if(typeof ez_ad_units!='undefined'){ez_ad_units.push([[300,250],'laptrinhcanban_com-leader-1','ezslot_15',560,'0','0'])};__ez_fad_position('div-gpt-ad-laptrinhcanban_com-leader-1-0');

Profile