Cũng giống như đa phần các ngôn ngữ lập trình khác, trong Javascript, Array là một đối tượng cho phép lưu trữ một tập hợp các phần tử dưới dạng một biến duy nhất và cho phép thực thi các tính toán đối với cả tập hợp.
Đặc điểm
- JavaScript Mảng có thể thay đổi kích thước và có thể chứa nhiều kiểu dữ liệu khác nhau
- Các phần tử trong mảng có thể truy cập dựa vào chỉ mục của nó
- Chỉ mục được tính từ 0, nghĩa là phần tử đầu tiên trong mảng bắt đầu với chỉ mục là 0
Nội dung của bài viết
Khởi tạo Array
Có nhiều cách để khởi tạo Array trong Javascript, bạn có thể tham khảo các đoạn mã bên dưới, khuyến khích bạn khởi tạo mảng theo cách đầu tiên
// better than using the Array[] constructor
const array = [];
// 'fruits' array created using array literal notation.
const fruits = ['Apple', 'Banana'];
console.log[fruits.length];
// 2
// 'fruits' array created using the Array[] constructor.
const fruits = new Array['Apple', 'Banana'];
console.log[fruits.length];
// 2
// 'fruits' array created using String.prototype.split[].
const fruits = 'Apple, Banana'.split[', '];
console.log[fruits.length];
// 2Aarray Margin
Thuộc tính length của một đối tượng là thuộc tính của mảng, nó trả về phần tử trong mảng đó
const texts = ['welcome', 'to', 'Yeulaptrinh', '!'];
console.log[texts.length];
// expected output: 4Truy cập tới một phần tử trong mảng
Ta sử dụng chỉ mục của phần tử đó để truy cập. Lưu ý rằng chỉ mục bắt đầu từ 0
const texts = ['welcome', 'to', 'Yeulaptrinh', '!'];
console.log[texts[0]];
// first element: 'welcome'
console.log[texts[2]];
// 'Yeulaptrinh'
console.log[texts[texts.length-1]];
// '!'Kiểm tra các đối tượng có phải là một Mảng?
Javascript cung cấp phương thức Array.isArray[] để kiểm tra xem một đối tượng có phải là Array hay không
// Syntax
Array.isArray[value];
// all following calls return true
Array.isArray[[]];
Array.isArray[[1]];
Array.isArray[new Array[]];
Array.isArray[new Array['a', 'b', 'c', 'd']];
Array.isArray[new Array[3]];
// all following calls return false
Array.isArray[];
Array.isArray[{}];
Array.isArray[null];
Array.isArray[undefined];
Array.isArray[17];
Array.isArray['Array'];
Array.isArray[true];
Array.isArray[false];
Array.isArray[new Uint8Array[32]];Hợp nhất 2 hoặc nhiều mảng
Phương thức concat [] được sử dụng để hợp nhất hai hoặc nhiều mảng. Phương thức này không thay đổi các mảng hiện có mà thay vào đó trả về một mảng mới
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat[array2];
console.log[array3];
// expected output: Array ["a", "b", "c", "d", "e", "f"]/* Concatenating three arrays */
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
const numbers = num1.concat[num2, num3];
console.log[numbers];
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9];
/* Concatenating nested arrays */
const num1 = [[1]];
const num2 = [2, [3]];
const numbers = num1.concat[num2];
console.log[numbers];
// results in [[1], 2, [3]]Tổng kết
Trên đây là những khái niệm cơ bản cũng như một vài hàm thường dùng trong Javascript. Ta sẽ tìm hiểu thêm các hàm khác trong bài viết tiếp theo
Trong hướng dẫn tự học Javascript này, các bạn sẽ tìm hiểu về Mảng [Hay còn gọi là Mảng], cách tạo và thao tác với Mảng trong JavaScript
Array is what?
Học về Mang 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ị bên 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 có thể lưu trữ bất kỳ giá trị hợp lệ nào, bao gồm chuỗi, số, đối tượng, hàm và thậm chí các mảng khác
Do đó làm cho nó có thể tạo ra các cấu trúc dữ liệu phức tạp hơn như một mảng các đối tượng hoặc một mảng các mảng
Giả sử bạn muốn lưu trữ tên màu trong mã JavaScript của mình. Lưu trữ các tên màu từng cái một trong một biến có thể trông giống như thế này
var color1 = "Đỏ";
var color2 = "Vàng";
var color3 = "Xanh";Nhưng có chuyện gì xảy ra nếu bạn cần lưu trữ tên các tỉnh, thành phố của một quốc gia theo các biến?
Lúc này không phải là con số 3 nữa mà là hàng phần trăm
Lưu trữ mỗi giá trị trong một biến khác nhau sẽ mất nhiều thời gian
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 để giải quyết vấn đề này bằng cách cung cấp một cấu trúc có trật tự để lưu trữ nhiều giá trị hoặc một nhóm các giá trị
Create a Array in Javascript
Cách đơn giản nhất để tạo một mảng trong JavaScript được kèm theo danh sách các giá trị được phân tách bằng dấu hài trong dấu ngoặc kép [[ ]], 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 đích đơn giản, bạn nên sử dụng cú pháp bên trên
________số 8_______Dưới đây là một số 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 [chỉ mục] của nó
Truy cập phần tử của mảng trong Javascript
Các phần tử của mảng có thể được truy cập bởi chỉ mục [chỉ mục] của chúng bằng cách sử dụng ký hiệu trích lược "[ ]"
Chỉ mục là một số đại diện cho vị trí của một phần tử trong một mảng
Index wascount from 0
Điều này có nghĩa là chỉ mục đầu tiên của một mảng được lưu trữ chỉ ở số 0, không phải 1, mục thứ hai được lưu trữ ở chỉ mục 1, v. v
Minh họa về chỉ số index trong Mảng
Các chỉ mục của mảng bắt đầu từ 0 và đi đến số phần tử trừ đi 1
Vì vậy, mảng 5 phần tử sẽ có các mục [chỉ mục] từ 0 đến 4
Ví dụ sau đây sẽ cho bạn thấy làm thế nào để có được phần tử mảng riêng lẻ theo chỉ mục 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ả: NhoLưu ý. Trong JavaScript, mảng thực sự chỉ là một loại đối tượng đặc biệt có chỉ mục là khóa. Typeof typeof sẽ trả về 'đối tượng' cho mảng
Lấy độ dài của Mang trong Javascript
Thuộc tính chiều dài 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 chỉ mục 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ả: 5repeat of the death section of Mảng
Bạn có thể sử dụng vòng lặp để 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
NhoECMAScript 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 được khởi động và theo dõi biến số đếm vòng lặp [i]
Đây là ví dụ tương tự đượ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 cách lặp vòng 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 đó chỉ mục thứ tự quan trọng. Vòng lặp for-in được tối ưu hóa để lặp lại các thuộc tính của đối tượng, tốt hơn hết là bạn nên sử dụng vòng lặp for-in với chỉ số chỉ số 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 đẩy[], như sau
var myArray = [phantu0, phantu1, ..., phantuN];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 myArray = [phantu0, phantu1, ..., phantuN];Kết quả
var myArray = [phantu0, phantu1, ..., phantuN];Như bạn đã thấy
+ Phương thức push[] add phần tử vào cuối mảng
+ Phương thức unshift[] add Element Element vào đầu mảng
Attempt check the Elemental Number of Array after thêm phần tử
var myArray = [phantu0, phantu1, ..., phantuN];Loại bỏ phần tử từ một Mang
Để 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 đưa ra
This is a ví dụ
var myArray = [phantu0, phantu1, ..., phantuN];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 đưa ra
This is a ví dụ
var myArray = [phantu0, phantu1, ..., phantuN];Lưu ý. Các phương thức push[] và pop[] chạy nhanh hơn unshift[] và shift[]. Bởi vì các phương thức push[] và pop[] chỉ đơn giản là thêm và xóa các phần tử ở cuối một mảng, do đó các phần tử không di chuyển vị trí, trong khi unshift[] và shift[] thêm và xóa
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ỳ số chỉ mục nào, sử dụng cú pháp
var myArray = [phantu0, phantu1, ..., phantuN];This method has ba tham số
+ Tham số đầu tiên là mục để bắt đầu loại bỏ phần tử [* bắt buộc]
+ Tham số thứ hai là phần tử cần loại bỏ [sử dụng 0 nếu bạn không muốn xóa bất kỳ phần tử nào], [Đây là tùy chọn]
+ Tham số thứ ba là một tập hợp các phần tử thay thế, [Đây là tùy chọn]
Ví dụ sau đây cho bạn thấy cách thức hoạt động của nó
var myArray = [phantu0, phantu1, ..., phantuN];Phương thức splice[] trả về một mảng các phần tử bị xóa hoặc một mảng trống nếu không có phần tử nào bị xóa, như bạ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 đó
Create a string from a Mảng
Có thể có những vấn đề mà bạn chỉ muốn tạo một chuỗi bằng cách nối các phần tử 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ỏ qua dấu phân cách, thì JavaScript sẽ sử dụng dấu hài [,] theo mặc định
Ví dụ sau đây để thấy cách thức hoạt động của nó
var myArray = [phantu0, phantu1, ..., phantuN];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ư tham gia[]
This is a ví dụ
var myArray = [phantu0, phantu1, ..., phantuN];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
var myArray = new Array[phantu0, phantu1, ..., phantuN];Phương thức slice[] có 2 tham số
+ Chỉ mục bắt đầu [chỉ mục bắt đầu trích xuất]
+ Chỉ mục kết thúc [tùy chọn] [Không bao gồm]
Ví dụ
var myArray = new Array[phantu0, phantu1, ..., phantuN];Nếu tham số endIndex bị bỏ qua, tất cả các phần tử từ startIndex đến cuối mảng sẽ được trích xuất
Bạn có thể chỉ định các 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ì cũng từ đầu
Ví dụ
var myArray = new Array[phantu0, phantu1, ..., phantuN];Hợp nhất 2 mảng với nhau trong JS
Phương thức concat[] can be used to the most most or results of two or many array
Phương thức này không thay đổi các 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
Mã số
var myArray = new Array[phantu0, phantu1, ..., phantuN];Phương thức concat[] có thể lấy bất kỳ số lượng đối số nào, vì vậy bạn có thể tạo một mảng từ rất nhiều mảng
Ví dụ
var myArray = new Array[phantu0, phantu1, ..., phantuN];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 số chỉ số đại diện cho phần tử đó
If not found value, it return -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 cuối cùng được tìm thấy
var myArray = new Array[phantu0, phantu1, ..., phantuN];Cả hai phương thức này cũng chấp nhận một số tham số là số nguyên tùy chọn từ chỉ mục định chỉ mục trong mảng bắt đầu tìm kiếm
Tham khảo. Number in Javascript
This is a ví dụ
var myArray = new Array[phantu0, phantu1, ..., phantuN];Bạn cũng có thể sử dụng phương thức bao gồm [] để tìm kiếm 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 myArray = new Array[phantu0, phantu1, ..., phantuN];Nếu bạn muốn tìm kiếm một mảng dựa trên điều kiện định trước nhất 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 phần đầu tiên của phần tử trong chuỗi kiểm tra hàm
If not, it return undefined
var myArray = new Array[phantu0, phantu1, ..., phantuN];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ử được tìm thấy trong mảng thay vì giá trị của nó
Ví dụ
var myArray = new Array[phantu0, phantu1, ..., phantuN];Phương thức find[] chỉ tìm phần tử đầu tiên của 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 bộ lọc[] tạo ra một mảng mới chứa tất cả các phần tử điều kiện
Ví dụ sau đây sẽ cho bạn thấy cách thức hoạt động của phương thức filter[]
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];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ề cách tạo mảng, truy cập mảng, thêm hoặc xóa phần tử trong mảng và nhiều phương thức thao tác với dữ liệu trong mảng
Hãy thực hiện lại hành động và ghi nhớ chúng nhé. Chúng sẽ rất hữu ích khi bạn tiếp tục Học Lập trình Web với PHP hoặc Java đó