Hướng dẫn can i make an array of images in javascript? - tôi có thể tạo một mảng hình ảnh trong javascript không?

Trong JavaScript, như trong các ngôn ngữ lập trình khác, các mảng là các đối tượng cho phép bạn lưu trữ nhiều hơn một mục dữ liệu dưới một tên biến duy nhất.

Mỗi mục dữ liệu bạn lưu trữ trong một mảng được gán một chỉ mục duy nhất, một số cho biết chính xác vị trí trong mảng mà mục dữ liệu được lưu trữ, nếu bạn sẽ bắt đầu với 0 (mục đầu tiên có chỉ mục là 0, chỉ số thứ hai của 1, thứ ba và chỉ số của 3, v.v.).

Khi bạn đã lưu trữ các mục dữ liệu trong mảng của bạn, sau đó bạn có thể sử dụng thư viện phương thức rộng lớn của JavaScript để làm việc với chúng. Ví dụ: bạn có thể tìm thấy và lọc các giá trị trong một mảng, tham gia các mục trong một mảng và biến chúng thành một chuỗi, nối hai mảng với nhau và nhiều mục, nhiều người khác.

Với một chút trí tưởng tượng và sự khéo léo, bạn cũng có thể tạo ra các mảng hình ảnh trên mạng cho tất cả các loại trường hợp sử dụng trên mặt trận.

Cách các mảng hình ảnh hoạt động

Bạn có thể lưu trữ các tệp hình ảnh trong JavaScript. Vì vậy, mảng hình ảnh của bạn thực sự sẽ là một loạt các tham chiếu đến hình ảnh được lưu trữ ở nơi khác.

Mảng hình ảnh đơn giản

Cách đơn giản nhất, đơn giản nhất để tạo một mảng hình ảnh là khai báo một đối tượng mảng và đẩy các URL vào hình ảnh của bạn vào nó.

// Declare an array object for our array of images
let arrayOfImages = [];

// Push the URLs to three images to arrayOfImages
arrayOfImages.push('https://site.com/image-1.jpeg');
arrayOfImages.push('https://site.com/image-2.jpeg');
arrayOfImages.push('https://site.com/image-3.jpeg');

// Output arrayOfImages to the console
console.log(arrayOfImages);

Bạn có thể thử điều này ngay bây giờ bằng cách mở bảng điều khiển trình duyệt của bạn, sao chép/dán mã trên vào nó và nhấn phím enter enter trên bàn phím của bạn.

Nếu bạn làm như vậy, bạn sẽ quan sát các đầu ra sau:

Giả sử bạn muốn lưu trữ nhiều hơn chỉ URL cho mỗi hình ảnh. Bạn có thể tạo các mảng lồng nhau lưu trữ siêu dữ liệu tùy ý như tiêu đề, chiều cao và chiều rộng của hình ảnh.

// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);

Nếu bạn sao chép/dán mã trên vào bảng điều khiển trình duyệt của bạn và chạy nó, bạn sẽ thấy một danh sách hình ảnh có cấu trúc trong đối tượng mảng

// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);

Miễn là bạn luôn lưu trữ các URL trong INDEX 0, các tiêu đề trong INDEX 1 và chiều cao trong INDEX 2 và chiều rộng trong INDEX 3, bạn sẽ có một loạt các hình ảnh mà bạn có thể tham khảo, đột biến và gán lại khi cần thiết.

Mảng hình ảnh với hàm tạo hình ảnh ()

Nếu bạn đang thực hiện việc này cho một ứng dụng Frontend và mục tiêu cuối cùng của bạn là hiển thị những hình ảnh này trên màn hình, hãy xem xét sử dụng hàm tạo JavaScript,

// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);

Cú pháp của hàm tạo hình ảnh () chỉ giới hạn ở chiều rộng và chiều cao của hình ảnh của bạn:

// Create HTMLImageElement
let myImage = new Image(width, height);

Sau đó, bạn có thể gán

// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);

// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);

// Create HTMLImageElement
let myImage = new Image(width, height);

// Assign it an src attribute
myImage.src = 'https://site.com/example-1.jpeg';

Khi bạn đã tạo đối tượng hình ảnh của mình, sau đó bạn có thể đẩy nó đến

// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);

// Declare an array object for our array of images
let arrayOfImages = [];

// Create image object and assign width and height
let myImage = new Image('1024','768');
// Assign src attribute to image object
myImage.src = 'https://site.com/example-1.jpeg';

// Push image object to arrayOfImages
arrayOfImages.push(myImage);

// Output arrayOfImages to the console
console.log(arrayOfImages);

Mỗi khi bạn sử dụng hàm tạo

// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);

// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);

// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);

Khi bạn đã tạo các đối tượng hình ảnh của mình và lưu trữ chúng trong một mảng, việc chèn chúng vào tài liệu HTML của bạn cũng đơn giản như sử dụng phương thức bạn cần và tham khảo đúng chỉ mục:

// Append an 
Đẩy URL hình ảnh vào mảng bằng Array.Push ()
Nếu bạn nên lưu trữ hình ảnh trong các chỉ số cụ thể hoặc bạn muốn ghi đè lên siêu dữ liệu cho một hình ảnh mà Lọ đã lưu trữ trong mảng của bạn, bạn có thể sử dụng phương pháp sau:
Array[index] = value;
Giả sử chúng ta muốn ghi đè lên URL của hình ảnh thứ hai từ ví dụ của chúng ta ở trên với hình ảnh cập nhật. Mã của chúng tôi sau đó sẽ trông như thế này:
// Declare an array object for our array of images
arrayOfImages = [];

// Push the URL of two images to arrayOfImages
arrayOfImages.push('https://site.com/image-1.jpeg', 'https://site.com/image-2.jpeg');

// Update the URL of the second image
arrayOfImages[1] = 'https://site.com/image-2-final.jpeg';

console.log(arrayOfImages);
Lo và kìa, URL hình ảnh thứ hai hiện được cập nhật:
Cập nhật các giá trị của hình ảnh hiện có bằng cách sử dụng 
// Create HTMLImageElement
let myImage = new Image(width, height);
1
Làm sạch mảng
Bạn có thể xóa các mục riêng lẻ khỏi mảng. Ví dụ: mã bên dưới sẽ trống rỗng chỉ số 1 của 
// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);
1:
// Delete index 1 of arrayOfImages
arrayOfImages[1] = '';
Hoặc bạn có thể xóa tất cả các phần tử khỏi mảng hoàn toàn bằng cách phân bổ lại nó thành một mảng trống:
// Declare an array object for our array of images
let arrayOfImages = [];

arrayOfImages.push(['https://site.com/image-1.jpeg','Title 1','768px','1024px']);
arrayOfImages.push(['https://site.com/image-2.jpeg','Title 2','720px','1280px']);
arrayOfImages.push(['https://site.com/image-3.jpeg','Title 3','1080px','1920px']);

// Output arrayOfImages to the console
console.log(arrayOfImages);
0
Điều quan trọng cần lưu ý là bạn không thể tái cấu trúc hoặc gán lại hằng số, vì vậy mảng hình ảnh của bạn phải được khai báo bằng cách sử dụng câu lệnh 
// Create HTMLImageElement
let myImage = new Image(width, height);
3 (cho phạm vi chức năng) hoặc câu lệnh 
// Create HTMLImageElement
let myImage = new Image(width, height);
4 (cho phạm vi khối) để bạn có thể đặt lại.
Hình ảnh lịch sự của ArchideAphoto /Depositphotos