Mảng trong JavaScript | JS ARRAY

Trong hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu về Mảng (Hay còn gọi là Array), cách tạo và thao tác với Mảng trong JavaScript.

Tóm Tắt

Mảng là gì ? Array là gì ?

Bạn đang đọc: Mảng trong JavaScript | JS ARRAY

Học về Mảng trong Javascript

Mảng (một kiểu dữ liệu) là các biến phức tạp cho phép chúng ta lưu trữ nhiều hơn một giá trị hoặc một nhóm các giá trị dưới một tên biến duy nhất.

Tham khảo: Các kiểu dữ liệu trong Javascript

Mảng trong JavaScript hoàn toàn có thể tàng trữ bất kể giá trị hợp lệ nào, gồm có chuỗi, số, đối tượng người dùng, hàm và thậm chí còn những mảng khác .

Do đó làm cho nó hoàn toàn có thể tạo những cấu trúc tài liệu phức tạp hơn như một mảng những đối tượng người dùng hoặc một mảng những mảng .

Giả sử bạn muốn tàng trữ tên màu trong code JavaScript của mình. Lưu trữ những tên màu từng cái một trong một biến hoàn toàn có thể trông giống như thế này :

var color1 = "Đỏ";
var color2 = "Vàng";
var color3 = "Xanh";

Nhưng điều gì xảy ra nếu bạn cần tàng trữ tên những tỉnh, thành phố của một vương quốc theo những biến ?

Lúc này không phải là số lượng 3 nữa mà là hàng trăm .

Lưu mỗi giá trị trong một biến khác nhau sẽ mất nhiều thời hạn .

Ngoài ra, sử dụng rất nhiều biến số đồng thời thì rất khó theo dõi .

Vì thế, Mảng ở đây để xử lý yếu tố này bằng cách phân phối một cấu trúc có trật tự để tàng trữ nhiều giá trị hoặc một nhóm những giá trị .

Tạo một Mảng trong Javascript

Cách đơn giản nhất để tạo một mảng trong JavaScript là kèm theo danh sách các giá trị được phân tách bằng dấu phẩy trong ngoặc vuông ([ ]), như được hiển thị trong cú pháp sau:

var myArray = [phantu0, phantu1, ..., phantuN];

Mảng cũng có thể được tạo bằng cách sử dụng hàm tạo Array() như được hiển thị trong cú pháp sau.

Tuy nhiên, vì mục tiêu đơn thuần, mình khuyến nghị bạn sử dụng cú pháp bên trên .

var myArray = new Array(phantu0, phantu1, ..., phantuN);

Dưới đây là một số ít ví dụ về mảng được tạo bằng cú pháp mảng :

var colors = ["Đỏ", "Vàng", "Xanh"]; 
var fruits = ["Táo", "Chuối", "Cam", "Ổi", "Nho"];
var cities = ["Hà Nội", "Hải Phòng", "Đà Nẵng"];
var school = ["NIIT", "ICT Hà Nội", 17];

Lưu ý: Một mảng là một tập hợp các giá trị được sắp xếp. Mỗi giá trị trong một mảng được gọi là một phần tử và mỗi phần tử có một vị trí trong một mảng, được gọi là chỉ mục (index) của nó.

Truy cập phần tử của mảng trong Javascript

Các thành phần mảng hoàn toàn có thể được truy vấn bởi chỉ mục ( index ) của chúng bằng cách sử dụng ký hiệu ngoặc vuông ” [ ] ” .

Index là một số ít đại diện thay mặt cho vị trí của một thành phần trong một mảng .

Index được đếm từ 0 .

Điều này có nghĩa là index tiên phong của một mảng được tàng trữ ở chỉ số 0, không phải 1, mục thứ hai được tàng trữ ở chỉ mục 1, v.v.

Minh họa về chỉ số index trong Mảng

Các index của mảng mở màn từ 0 và đi lên đến số thành phần trừ đi 1 .

Vì vậy, mảng 5 thành phần sẽ có những chỉ mục ( index ) từ 0 đến 4 .

Ví dụ sau đây sẽ cho bạn thấy làm thế nào để có được thành phần mảng riêng không liên quan gì đến nhau theo index của chúng .

var fruits = ["Táo", "Chuối", "Cam", "Ổi", "Nho"];
 
document.write(fruits[0]); // Kết quả: Táo
document.write(fruits[1]); // Kết quả: Chuối
document.write(fruits[2]); // Kết quả: Cam
document.write(fruits[fruits.length - 1]); // Kết quả: Nho

Lưu ý: Trong JavaScript, mảng thực sự chỉ là một loại đối tượng đặc biệt có index là key. Toán tử typeof sẽ trả về ‘object’ cho mảng.

Lấy độ dài của Mảng trong Javascript

Thuộc tính length trả về độ dài của một mảng, là tổng số phần tử có trong mảng. Độ dài mảng luôn lớn hơn index của bất kỳ phần tử nào của nó.

var fruits = ["Táo", "Chuối", "Cam", "Ổi", "Nho"];
document.write(fruits.length); // Kết quả: 5

Lặp qua các phần tử của Mảng

Bạn có thể sử dụng vòng lặp for để truy cập từng phần tử của một mảng theo thứ tự tuần tự, như thế này:

var fruits = ["Táo", "Chuối", "Cam", "Ổi", "Nho"];
 
// Lặp qua các phần tử của mảng
for(var i = 0; i < fruits.length; i++) {    
    document.write(fruits[i] + "
");
}

Kết quả :

Táo Chuối Cam Ổi Nho

ECMAScript 6 đã giới thiệu một cách đơn giản hơn để lặp qua phần tử của mảng, đó là vòng lặp for-of.

Trong vòng lặp này, bạn không phải khởi tạo và theo dõi biến đếm vòng lặp (i).

Đây là ví dụ tựa như được viết lại bằng vòng lặp for-of :

var fruits = ["Táo", "Chuối", "Cam", "Ổi", "Nho"];

for (var f of fruits){
    document.write(f + "
");
}

Bạn cũng có thể lặp lại các thành phần mảng bằng vòng lặp for-in, như thế này:

var fruits = ["Táo", "Chuối", "Cam", "Ổi", "Nho"];

for (var i in fruits){
    document.write(fruits[i] + "
");
}

Lưu ý : Không nên sử dụng vòng lặp for-in để lặp qua một mảng trong đó thứ tự chỉ mục là quan trọng. Vòng lặp for-in được tối ưu hóa để tái diễn những thuộc tính của đối tượng người tiêu dùng, tốt hơn bạn nên sử dụng vòng lặp for với chỉ số index hoặc vòng lặp for-of .

Thêm các phần tử mới vào một Mảng

Để thêm một phần tử mới vào cuối một mảng, chỉ cần sử dụng phương thức push(), như sau:

var colors = ["Đỏ", "Vàng", "Xanh"]; 
colors.push("Tím");
 
document.write(colors); // Kết quả: Đỏ,Vàng,Xanh,Tím
document.write(colors.length); // Kết quả: 4

Bạn cũng có thể thêm nhiều phần tử cùng một lúc bằng các phương thức push() và unshift(), như thế này:

var colors = ["Đỏ", "Vàng", "Xanh"];
colors.push("Tím", "Hồng");
colors.unshift("Đen", "Cam");
 
document.write(colors);

Kết quả :

Đen,Cam,Đỏ,Vàng,Xanh,Tím,Hồng

Như bạn đã thấy :

+ Phương thức push ( ) thêm thành phần vào cuối mảng
+ Phương thức unshift ( ) thêm thành phần vào đầu mảng

Thử kiểm tra số thành phần của mảng sau khi thêm thành phần .

document.write(colors.length); // Kết quả: 7

Loại bỏ phần tử từ một Mảng

Để loại bỏ phần tử cuối cùng khỏi một mảng, bạn có thể sử dụng phương thức pop(). Phương thức này trả về giá trị đã được đẩy ra.

Đây là một ví dụ :

var colors = ["Đỏ", "Vàng", "Xanh"];
var last = colors.pop();
 
document.write(last); // Kết quả: Xanh
document.write(colors.length); // Kết quả: 2

Tương tự, bạn có thể loại bỏ phần tử đầu tiên khỏi một mảng bằng phương thức shift().

Phương thức này cũng trả về giá trị đã được đẩy ra .

Đây là một ví dụ :

var colors = ["Đỏ", "Vàng", "Xanh"];
var first = colors.shift();
 
document.write(first); // Kết quả: Đỏ
document.write(colors.length); // Kết quả: 2

Lưu ý : Các phương pháp push ( ) và pop ( ) chạy nhanh hơn unshift ( ) và shift ( ). Bởi vì những phương pháp push ( ) và pop ( ) chỉ đơn thuần là thêm và xóa những thành phần ở cuối một mảng, do đó những thành phần không vận động và di chuyển vị trí, trong khi unshift ( ) và shift ( ) thêm và xóa những thành phần ở đầu mảng nhu yếu lập chỉ mục lại hàng loạt mảng .

Thêm hoặc Xóa các phần tử ở bất kỳ vị trí nào trong Mảng

Phương thức splice() là một phương thức mảng rất linh hoạt cho phép bạn THÊM hoặc XÓA các phần tử từ bất kỳ chỉ số index nào, sử dụng cú pháp:

Array.splice(startIndex, removeCount, phantu1, ..., phantuN).

Phương thức này có ba tham số:

Xem thêm: Cách đổi pass modem Wifi trên máy tính, laptop dễ dàng, nhanh chóng

+ Tham số tiên phong là chỉ mục để mở màn vô hiệu thành phần ( * bắt buộc )
+ Tham số thứ hai là số thành phần cần vô hiệu ( sử dụng 0 nếu bạn không muốn xóa bất kể thành phần nào ), ( Đây là tùy chọn )
+ Tham số thứ ba là một tập hợp những thành phần thay thế sửa chữa, ( Đây là tùy chọn ) .

Ví dụ sau đây cho bạn thấy phương pháp hoạt động giải trí của nó :

var colors = ["Đỏ", "Vàng", "Xanh"];
var removed = colors.splice(0,1); // Loại bỏ phần tử đầu tiên
 
document.write(colors); // Kết quả: Vàng,Xanh
document.write(removed); // Kết quả: Đỏ (Mảng 1 phần tử)
document.write(removed.length); // Kết quả: 1

// Chèn 2 phần tử vào vị trí 1
removed = colors.splice(1, 0, "Tím", "Hồng");
document.write(colors); // Prints: Vàng,Tím,Hồng,Xanh
document.write(removed); // Mảng trống
document.write(removed.length); // Kết quả: 0

// Chèn 2 phần tử, loại bỏ 1 phần tử
removed = colors.splice(1, 1, "Đen", "Cam");
document.write(colors); // Kết quả: Vàng,Đen,Cam,Hồng,Xanh
document.write(removed); // Kết quả: Tím (Mảng 1 phần tử)
document.write(removed.length); // Kết quả: 1

Phương thức splice ( ) trả về một mảng những thành phần bị xóa hoặc một mảng trống nếu không có thành phần nào bị xóa, như bạn hoàn toàn có thể thấy trong ví dụ trên .

Nếu đối số thứ hai bị bỏ qua, tất cả các phần tử từ đầu đến cuối mảng sẽ bị xóa. Không giống như các phương thức slice() và concat(), phương thức splice() sửa đổi mảng mà nó được gọi trên đó.

Tạo một chuỗi từ một Mảng

Có thể có những trường hợp mà bạn chỉ muốn tạo một chuỗi bằng cách nối những thành phần của một mảng với nhau .

Tham khảo: Chuỗi trong Javascript

Để làm điều này, bạn có thể sử dụng phương thức join().

Phương thức này lấy một tham số tùy chọn là một chuỗi phân tách được thêm vào giữa mỗi phần tử.

Nếu bạn bỏ lỡ dấu phân làn, thì JavaScript sẽ sử dụng dấu phẩy (, ) theo mặc định .

Ví dụ sau đây cho thấy phương pháp hoạt động giải trí của nó :

var colors = ["Đỏ", "Vàng", "Xanh"];
 
document.write(colors.join()); // Kết quả: Đỏ,Vàng,Xanh
document.write(colors.join("")); // Kết quả: ĐỏVàngXanh
document.write(colors.join("-")); // Kết quả: Đỏ-Vàng-Xanh
document.write(colors.join(", ")); // Kết quả: Đỏ, Vàng, Xanh

Bạn cũng có thể chuyển đổi một mảng thành một chuỗi được phân tách bằng dấu phẩy bằng cách sử dụng toString().

Phương thức này không chấp nhận tham số dấu phân cách như join().

Đây là một ví dụ :

var colors = ["Đỏ", "Vàng", "Xanh"];
document.write(colors.toString()); // Kết quả: Đỏ,Vàng,Xanh

Trích xuất một phần của một Mảng trong JS

Nếu bạn muốn trích xuất một phần của một mảng (tức là phân đoạn nhỏ) nhưng vẫn giữ nguyên mảng ban đầu, bạn có thể sử dụng phương thức slice().

Cú pháp :

Array.slice(startIndex, endIndex)

Phương thức slice ( ) có 2 tham số :

+ Chỉ mục mở màn ( chỉ mục khởi đầu trích xuất )
+ Chỉ mục kết thúc ( tùy chọn ) ( Không gồm có )

Ví dụ :

var fruits = ["Táo", "Chuối", "Cam", "Ổi", "Nho"];
var subarr = fruits.slice(1, 3);
document.write(subarr); // Kết quả: Chuối,Cam

Nếu tham số endIndex bị bỏ lỡ, toàn bộ những thành phần từ startIndex đến cuối mảng sẽ được trích xuất .

Bạn cũng có thể chỉ định các chỉ mục hoặc sử dụng chỉ mục âm trong phương thức slice() trích xuất các phần tử đếm từ cuối một mảng, thay vì từ đầu.

Ví dụ :

var fruits = ["Táo", "Chuối", "Cam", "Ổi", "Nho"];

document.write(fruits.slice(2)); // Kết quả: Cam,Ổi,Nho
document.write(fruits.slice(-2)); // Kết quả: Ổi,Nho
document.write(fruits.slice(2, -1)); // Kết quả: Cam,Ổi

Hợp nhất 2 mảng với nhau trong JS

Phương thức concat() có thể được sử dụng để hợp nhất hoặc kết hợp hai hoặc nhiều mảng.

Phương thứ này không biến hóa những mảng hiện có, thay vào đó nó trả về một mảng mới .

Hợp nhất 2 mảng bằng phương thức concat() trong Javascript

Hợp nhất 2 mảng bằng phương pháp concat ( ) trong Javascript

Code :

var pets = ["Mèo", "Chó", "Gà"];
var wilds = ["Hổ", "Sói", "Gấu"];
 
// Tạo một mảng mới từ 2 mảng đã cho
var animals = pets.concat(wilds); 
document.write(animals); // Kết quả: Mèo,Chó,Gà,Hổ,Sói,Gấu

Phương thức concat ( ) hoàn toàn có thể lấy bất kể số lượng đối số nào, thế cho nên bạn hoàn toàn có thể tạo một mảng từ rất nhiều mảng .

Ví dụ :

var pets = ["Mèo", "Chó", "Gà"];
var wilds = ["Hổ", "Sói", "Gấu"];
var bugs = ["Kiến", "Ong"]
 
// Tạo một mảng mới từ 3 mảng đã cho
var animals = pets.concat(wilds, bugs); 
document.write(animals);
// Kết quả: Mèo,Chó,Gà,Hổ,Sói,Gấu,Kiến,Ong

Tìm kiếm trong một Mảng

Nếu bạn muốn tìm kiếm một giá trị cụ thể trong mảng Javascript, bạn chỉ cần sử dụng indexOf() và lastIndexOf().

Nếu giá trị được tìm thấy, cả hai phương thức đều trả về một chỉ số index đại diện cho phần tử đó.

Nếu không tìm thấy giá trị, nó trả về – 1 .

Phương thức indexOf() trả về phần tử đầu tiên được tìm thấy, trong khi phương thức lastIndexOf() trả về phần tử cuối cùng được tìm thấy.

var fruits = ["Táo", "Chuối", "Cam", "Ổi", "Nho"];

document.write(fruits.indexOf("Táo")); // Prints: 0
document.write(fruits.indexOf("Chuối")); // Prints: 1
document.write(fruits.indexOf("Dứa")); // Prints: -1

Cả hai phương pháp này cũng đồng ý một tham số là số nguyên tùy chọn từ chỉ mục chỉ định chỉ mục trong mảng khởi đầu tìm kiếm .

Tham khảo: Số trong Javascript

Đây là một ví dụ :

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
// Tìm kiếm từ Trái sang Phải, bắt đầu từ 1
document.write(arr.indexOf(1, 2)); // Kết quả: 3
 
// Tìm kiếm từ Phải sang Trái, bắt đầu từ 1
document.write(arr.lastIndexOf(1, 2)); // Kết quả: 0

Bạn cũng có thể sử dụng phương thức includes() để tìm xem một mảng có chứa một phần tử nào đó hay không.

Phương thức này có cùng tham số như phương thức indexOf() và lastIndexOf(), nhưng nó trả về true hoặc false, thay vì chỉ số index.

Ví dụ :

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
document.write(arr.includes(1)); // Kết quả: true
document.write(arr.includes(6)); // Kết quả: false
document.write(arr.includes(1, 2)); // Kết quả: true
document.write(arr.includes(3, 4)); // Kết quả: false

Nếu bạn muốn tìm kiếm một mảng dựa trên điều kiện nhất định thì bạn có thể sử dụng phương thức find() mới được giới thiệu trong ES6.

Tham khảo: 15 Phương thức thao tác với Mảng trong Javascript (ES6)

Phương thức này trả về giá trị của thành phần tiên phong trong mảng thỏa mãn nhu cầu hàm kiểm tra .

Nếu không, nó trả lại undefined.

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Kết quả: 5

Cũng có một phương thức tương tự như phương thức find() là findIndex(), trả về chỉ số index của một phần tử tìm thấy trong mảng thay vì giá trị của nó.

Ví dụ :

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.findIndex(function(element) {
  return element > 6;
});
document.write(result); // Kết quả: 8

Phương thức find() chỉ tìm phần tử đầu tiên thỏa mãn hàm kiểm tra được cung cấp.

Tuy nhiên, nếu bạn muốn tìm hiểu tất cả các phần tử phù hợp, bạn có thể sử dụng phương thức filter().

Phương thức filter() tạo ra một mảng mới chứa tất cả các phần tử thỏa mãn điều kiện.

Ví dụ sau đây sẽ cho bạn thấy cách phương pháp filter ( ) hoạt động giải trí :

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Kết quả: 5,7
document.write(result.length); // Kết quả: 2

Bạn đã hiểu về Mảng trong Javascript chưa?

Mảng là một loại dữ liệu đặc biệt trong Javascript giúp chúng ta lưu trữ dữ liệu nhiều hơn, đa dạng hơn.

Qua bài này bạn đã được tìm hiểu và khám phá về cách tạo mảng, truy vấn mảng, thêm hoặc xóa thành phần trong mảng, và nhiều phương pháp thao tác với tài liệu trong mảng .

Hãy thực hành lại và ghi nhớ chúng nhé. Chúng sẽ rất có ích khi bạn tiếp tục Học Lập trình Web với PHP hoặc Java đấy.

Xem thêm: Cách xóa tài khoản Gmail vĩnh viễn trên máy tính, điện thoại đơn giản

Chúc bạn tự học Javascript hiệu suất cao !

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com