9 cách tạo Array JavaScript với độ dài và giá trị cho trước

Có thể nói Array là một trong những kiểu dữ liệu phổ biến nhất trong JavaScript. Và để tạo ra Array cũng có rất nhiều cách khác nhau. Vì vậy, bài viết này mình sẽ tổng hợp các cách tạo Array mà mình biết.

Mời bạn theo dõi bài viết!

Tạo Array với một giá trị cho trước

Bài toán

Khởi tạo một Array có N phần tử và giá trị của mỗi phần tử là 0.

Giải pháp

Sử dụng Array Literal

Trong trường hợp N có giá trị nhỏ (mức độ nào thì tuỳ người nhé) thì cách tốt nhất để tạo ra Array là sử dụng Array Literal.

const arr1 = [0, 0, 0]; // giả sử N = 3

Tuy nhiên, khi N có giá trị lớn thì cách làm trên lại không còn phù hợp nữa. Lúc này, bạn có thể thử xem xét một số cách làm sau đây.

Sử dụng Array Literal kết hợp với for loop và push()

const N = 5;
const arr2 = [];

for (let i = 0; i < N; i++) {
  arr2.push(0);
}

Cách này khá trực quan và đơn giản. Chắc ai cũng nghĩ đến cách này đầu tiên nhỉ?

Sử dụng Array.from()

Array.from() là phương thức cho phép tạo ra một Array từ một iterable object hoặc array-like object như dưới đây.

Sử dụng Array constructor:

const N = 5;
const arr3 = Array.from(new Array(N), () => 0);

Sử dụng Object với thuộc tính length:

const N = 5;
const arr4 = Array.from({ length: N }, () => 0);

Sử dụng một String đặc biệt:

const N = 5;
const arr5 = Array.from("0".repeat(N));

Sử dụng Array Constructor kết hợp với fill()

Array.prototype.fill() là phương thức giúp điền đầy một giá trị vào các phần tử của Array.

Để áp dụng phương thức này giải quyết bài toán thì bạn có thể làm như sau:

const N = 5;
const arr6 = new Array(N).fill(0);

Tạo Array với một khoảng các giá trị

Bài toán

Khởi tạo một Array có N phần tử và giá trị của mỗi phần tử lần lượt là từ 0 đến N - 1.

Giải pháp

Sử dụng Array Literal kết hợp với for loop và push()

const N = 5;
const arr7 = [];

for (let i = 0; i < N; i++) {
  arr7.push(i);
}

Sử dụng Array.from()

const N = 5;
const arr8 = Array.from(new Array(N), (x, i) => i);

Sử dụng Array.prototype.keys() kết hợp với spread operator

Array.prototype.keys() trả về một Array Iterator object với mỗi phần tử là chỉ số của các phần tử trong mảng.

Lấy kết quả trả về của phương thức trên kết hợp với Spread Operator sẽ thu được mảng theo yêu cầu.

const N = 5;
const arr9 = [...new Array(N).keys()]

Lời kết

Trên đây là tổng hợp các cách tạo Array mà mình biết. Còn bạn thì sao, bạn hay sử dụng cách nào để tạo ra Array giúp giải quyết bài toán trên? Để lại giải pháp bằng cách comment xuống phía dưới nhé!

Ngoài ra, dưới đây là hình ảnh minh họa khi mình so sánh tốc độ một số cách tạo Array JavaScript với độ dài và giá trị cho trước bên trên.

so sánh các cách tạo array javascript

Để viết thêm testcase, bạn có thể tham khảo tại Jsperf - Create Array JavaScript.

Xin chào và hẹn gặp bạn trong bài viết tiếp theo!

Xem thêm: Creating and filling Arrays of arbitrary lengths in JavaScript


★ Nếu bạn thấy bài viết này hay thì hãy ghé thăm Blog hoặc theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

☛ Blog: Complete JavaScript
☛ Facebook Fanpage: Complete JavaScript
☛ Facebook Group: Hỏi đáp JavaScript VN

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Lam Pham

28 bài viết.
71 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
32 13
Trước khi vào nội dung bài viết. Tôi xin đính chính giúp anh trả lời những câu hỏi chỉ là tựa đề của một bài hát tôi không có ý xưng hô là anh. Bài...
Lam Pham viết hơn 1 năm trước
32 13
White
16 4
JavaScript cung cấp nhiều cách khác nhau để convert String sang Number. Và trong bài viết này, mình sẽ tổng hợp lại một số cách mà mình đã biết. ...
Lam Pham viết 8 tháng trước
16 4
White
15 6
Có thể bạn thừa biết, JavaScript là một ngôn ngữ chạy (Link). Điều đó có nghĩa là nếu bạn thực hiện một tác vụ quá lớn trên giao diện chính thì khả...
Lam Pham viết hơn 1 năm trước
15 6
Bài viết liên quan
White
9 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết hơn 1 năm trước
9 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
28 bài viết.
71 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!