Trong bài viết này, bạn sẽ xem cách in mảng trong javascript bằng vòng lặp for, bạn cũng sẽ xem xét các loại vòng lặp khác nhau để in mảng
4 cách in mảng trong javascript bằng vòng lặp for
Bất kể bạn đang lập trình, phát triển thứ gì đó hay trình bày dữ liệu trên trình duyệt, bạn liên tục cần in dữ liệu của mảng
Chúng ta đã thảo luận về 4 cách khác nhau để in mảng trong javascript
Mục lục
1. In mảng bằng vòng lặp for
Mỗi phần tử trong một mảng có một giá trị index xác định vị trí của một phần tử trong một mảng. Ví dụ: phần tử đầu tiên của mảng có giá trị chỉ số là 0, phần tử thứ hai là 1, phần tử thứ ba là 2, v.v.
Để truy cập phần tử đầu tiên, bạn có thể viết array_name[0] , cho phần tử thứ hai array_name . , and so on.
Bây giờ để in mảng bằng vòng lặp for, hãy chạy vòng lặp for nhiều lần dưới dạng một số phần tử trong mảng và sử dụng trình vòng lặp mỗi lần để truy cập phần tử mảng và in từng phần tử một
Đây là mã để in mảng trong javascript
Ví dụ
let arr = [1, 2, 3, 4, 5];
for [let i = 0; i < arr.length; i++] {
console.log[arr[i]]; // here i represents index
}▶ Dùng thử Chạy tại đây
2. In mảng bằng vòng lặp forEach
forEach[] là một phương thức javascript thực thi một hàm đã cho một lần cho mỗi phần tử của mảng.
Ở đây bạn muốn in mảng, vì vậy hãy cung cấp hàm để in mảng
Hàm chấp nhận phần tử mảng là mảng đầu tiên [đối với mỗi lần thực hiện cập nhật phần tử vòng lặp cho phần tử tiếp theo]. Vì vậy, bạn có thể in trực tiếp phần tử này
Đây là mã để in mảng trong javascript bằng vòng lặp forEach
Ví dụ
let arr = [1, 2, 3, 4, 5];
arr.forEach[element => {
console.log[element];
}]▶ Dùng thử Chạy tại đây
3. In mảng sử dụng cho. trong vòng lặp
Cái cho. trong vòng lặp được sử dụng để lặp qua các thuộc tính của một đối tượng, trong đó vòng lặp cung cấp một khóa cho từng thuộc tính của đối tượng.
Vì mảng cũng là một đối tượng trong javascript nên chúng ta có thể sử dụng mảng này để lặp qua từng phần tử và in nó. Ở đây khóa được cung cấp sẽ là chỉ mục của mảng
Bạn chỉ cần sử dụng khóa và truy cập phần tử mảng bằng cách array_name[key] .
Đây là đoạn mã để in mảng sử dụng for. trong vòng
Ví dụ
let arr = [1, 2, 3, 4, 5];
for[let key in arr]{
console.log[arr[key]];
}▶ Dùng thử Chạy tại đây
4. In mảng sử dụng for. của vòng lặp
Cái cho. of vòng lặp lặp qua một đối tượng có thể lặp lại như một mảng, chuỗi, bản đồ, tập hợp, các đối tượng giống như mảng, v.v.
Nó tạo một móc lặp tùy chỉnh thực thi cho từng thuộc tính riêng biệt của đối tượng. Ở đây đối tượng là mảng nên thuộc tính ở đây chính là phần tử
Bạn chỉ có thể in thuộc tính dưới dạng phần tử mảng. Đây là đoạn mã để in mảng sử dụng for. của vòng lặp
Mảng đối tượng hoặc mảng đối tượng là gì?
Tiếp theo, chúng ta sẽ thấy các tùy chọn để in một mảng đối tượng trong JavaScript
Sử dụng Phương thức stringify[] của Đối tượng JSON
Sau đây, chúng ta sẽ tìm hiểu cách xâu chuỗi đối tượng. Để hiển thị chính xác một mảng đối tượng, chúng ta cần định dạng mảng dưới dạng chuỗi JSON. JSON. stringify[] định dạng mảng và đưa ra bản in chính xác. Chúng ta có thể sử dụng một
tag to display the output.Users can follow the syntax below to use this.
Syntax
JSON.stringify[v,r,s]Trong cú pháp trên, hai tham số cuối cùng là tùy chọn
Thông số
- v − Đây là mảng các đối tượng
- r - Đây là bộ thay thế. Nó có thể thay đổi đầu ra bằng cách thay đổi hoặc loại bỏ các giá trị. Phương thức sẽ in tất cả các giá trị nếu giá trị r là null hoặc không xác định. Một hàm hoặc một mảng được sử dụng làm công cụ thay thế
- s - Đây là giá trị khoảng cách cho màn hình đầu ra. Nó dành cho mục đích dễ đọc. Không có gì, null, chuỗi hoặc 1-10 là các giá trị có thể có của tham số này. Nếu giá trị nhỏ hơn 1, bản in JSON sẽ không có khoảng trống. Nếu giá trị lớn hơn 10, thì chỉ 10 được lấy để thụt đầu dòng. Nếu giá trị là một chuỗi, chuỗi hoặc mười ký tự đầu tiên của chuỗi được xem xét để giãn cách
Ví dụ
Ở đây trong mã này, chúng tôi đang lấy một mảng các đối tượng. JSON. stringify[] được gọi trực tiếp với giá trị này. Ở đây, vết lõm là 1. Một điều kiện được đưa ra để chỉ hiển thị khóa tên từ đối tượng JSON. Đây là thông số thứ hai
Sử dụng bảng điều khiển. phương thức table[]
Sau đây chúng ta sẽ tìm hiểu cách giao diện điều khiển. phương thức table[] hoạt động. Phương pháp này thực sự cần một đầu vào. Đầu vào là một mảng hoặc một đối tượng. Phương thức này cũng xử lý các trường hợp lồng nhau của cả mảng và đối tượng. Tham số thứ hai là cột, là tùy chọn
Mỗi phần tử trong thuộc tính đếm được hoặc đầu vào được hiển thị dưới dạng hàng của bảng. Cột đầu tiên của bảng là chỉ số mảng. Trong Firefox, 1000 hàng là màn hình đầy đủ. Phương pháp này cho phép người dùng sắp xếp từng cột của bảng bằng cách nhấp vào nhãn
Tất cả các trình duyệt sử dụng bảng điều khiển tiêu chuẩn đều hỗ trợ phương pháp này và Internet Explorer không hỗ trợ phương pháp này
Người dùng có thể làm theo cú pháp bên dưới để sử dụng
cú pháp
console.table[d, c]Trong cú pháp trên, chúng ta cần cung cấp mảng đối tượng làm đầu vào đầu tiên
Thông số
- d − Một mảng các đối tượng
- c − Ở đây, chúng ta cần chỉ định tên khóa của đối tượng. Chỉ các cặp giá trị khóa chính được chỉ định sẽ được hiển thị trong đầu ra
Ví dụ
Chúng tôi đang tạo một mảng các đối tượng trong chương trình ví dụ này bằng phương thức mới. Dữ liệu này được cung cấp dưới dạng tham số đầu tiên cho bảng điều khiển. phương thức bảng[]
Ở đây, có ba đối tượng ở đầu vào. Nhưng chúng tôi đã hạn chế chỉ hiển thị hai trong định dạng bảng. Tên khóa của các đối tượng bắt buộc được cung cấp dưới dạng tham số thứ hai. Bàn điều khiển. log[] với tiêu đề chương trình trong tham số đầu tiên và các giá trị CSS làm tham số tiếp theo hiển thị tiêu đề theo kiểu trong đầu ra sau
Người dùng cần mở bảng điều khiển để xem đầu ra cho ví dụ bên dưới
Khi bạn mở Console và chạy lại chương trình trên, bạn sẽ thấy kết quả như ảnh chụp màn hình bên dưới
Hướng dẫn này đã giúp chúng tôi tìm hiểu về hai cách để in một mảng đối tượng. Chúng tôi sử dụng bảng điều khiển. dir[] thường để xác minh mảng đối tượng. Để hiển thị mảng đối tượng trên trang, JSON. stringify[] được sử dụng
Chúng ta có thể sử dụng bàn điều khiển nếu cần định dạng bảng của mảng đối tượng. phương thức bảng[]. Hạn chế duy nhất là một số bảng điều khiển không hỗ trợ phương pháp này. Một số bảng điều khiển hiển thị tên cột theo thứ tự tăng dần. Đó là, thứ tự khóa đối tượng thực tế bị mất
Nói tóm lại, cả hai phương pháp đều đơn giản. Người dùng có quyền lựa chọn bất kỳ phương pháp nào theo yêu cầu in của họ