Thao tác mảng: Hiểu các phương thức mảng JavaScript

Mảng trong JavaScript là gì? Mảng JavaScript là kiểu dữ liệu có thể lưu trữ một tập hợp các phần tử. Các phần tử này có thể thuộc bất kỳ kiểu dữ liệu nào, bao gồm số, chuỗi và đối tượng. Mảng trong JavaScript là mảng động, nghĩa là bạn có thể thêm hoặc xóa các phần tử khỏi chúng sau khi chúng được tạo.

Trong hướng dẫn này, chúng ta sẽ xem xét tất cả các phương thức mảng JavaScript và cách chúng được áp dụng trong thực tế.

Các loại phương thức Mảng

Có một số phương pháp để thao tác mảng JavaScript. Một số phương pháp này là:

1. concat()

Phương pháp này được sử dụng để hợp nhất hai hoặc nhiều mảng. Nó không sửa đổi các mảng ban đầu mà thay vào đó trả về một mảng mới chứa các phần tử của các mảng ban đầu.

Đây là một ví dụ về cách `concat()` có thể được sử dụng trong JavaScript:

 const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const array3 = [7, 8, 9]; const mergedArray = array1.concat(array2, array3); // mergedArray is [1, 2, 3, 4, 5, 6, 7, 8, 9]

Trong ví dụ trên, mảng1, mảng2 và mảng3 đều được hợp nhất thành một mảng duy nhất được gọi là `mergedArray`. `concat()` lấy bất kỳ số lượng mảng nào làm đối số và trả về một mảng mới chứa tất cả các phần tử của mảng ban đầu.

Bạn cũng có thể sử dụng `concat()` để hợp nhất các mảng với các giá trị không thuộc mảng. Ví dụ:

 const array1 = [1, 2, 3]; const mergedArray = array1.concat(4, 5, 6); // mergedArray is [1, 2, 3, 4, 5, 6]

Trong trường hợp này, các giá trị 4, 5 và 6 được thêm vào cuối mảng 1 để tạo `mergedArray`.

Lưu ý rằng `concat()` không sửa đổi các mảng ban đầu. Thay vào đó, nó tạo ra một mảng mới chứa các phần tử của mảng ban đầu. Nếu bạn muốn sửa đổi một mảng tại chỗ, bạn có thể sử dụng phương thức `push()` để thay thế.

2. tham gia()

Phương thức này được sử dụng để nối tất cả các phần tử của một mảng thành một chuỗi. Nó nhận một tham số dấu phân cách tùy chọn, chỉ định ký tự được sử dụng để phân tách các phần tử của mảng trong chuỗi kết quả. Nếu không có dấu phân cách nào được cung cấp, thì các phần tử được phân tách bằng dấu phẩy.

Đây là một ví dụ về cách `join()` có thể được sử dụng trong JavaScript:

 const array = ['apple', 'banana', 'orange']; const fruitString = array.join(); // fruitString is 'apple,banana,orange' const array = [1, 2, 3]; const numberString = array.join('-'); // numberString is '1-2-3'

Trong ví dụ đầu tiên, các phần tử của mảng được nối thành một chuỗi duy nhất với dấu phẩy làm dấu phân cách. Trong ví dụ thứ hai, các phần tử của mảng được nối thành một chuỗi với dấu gạch nối làm dấu phân cách.

Bạn cũng có thể sử dụng `join()` trên một mảng các mảng để tạo một chuỗi các mảng lồng nhau:

 const array = [[1, 2], [3, 4], [5, 6]]; const nestedArrayString = array.join('-'); // nestedArrayString is '1,2-3,4-5,6'

Lưu ý rằng `join()` không sửa đổi mảng ban đầu. Nó tạo ra một chuỗi mới chứa các phần tử của mảng. Nếu bạn muốn sửa đổi mảng tại chỗ, bạn có thể sử dụng phương thức `splice()` để thay thế.

3. pop()

Phương thức này được sử dụng để loại bỏ phần tử cuối cùng của một mảng và trả về nó. Nó sửa đổi mảng ban đầu.

Đây là một ví dụ về cách `pop()` có thể được sử dụng trong JavaScript:

 const array = [1, 2, 3, 4, 5]; const lastElement = array.pop(); // lastElement is 5 // array is [1, 2, 3, 4]

Trong ví dụ này, phương thức `pop()` loại bỏ phần tử cuối cùng (5) khỏi mảng và gán nó cho biến `lastElement`. Mảng sau đó được sửa đổi để loại bỏ phần tử cuối cùng, để lại nó với độ dài là 4.

Bạn cũng có thể sử dụng `pop()` kết hợp với các phương thức mảng khác, chẳng hạn như `push()` để thêm các phần tử vào cuối mảng:

 const array = [1, 2, 3]; array.push(4); array.pop(); // array is [1, 2, 3]

Trong ví dụ này, phương thức `push()` thêm phần tử 4 vào cuối mảng, sau đó phương thức `pop()` lại loại bỏ phần tử đó, khiến mảng không thay đổi.

Lưu ý rằng nếu mảng trống, `pop()` trả về không xác định.

 const array = []; const element = array.pop(); // element is undefined

4. đẩy()

Phương thức này dùng để thêm một hoặc nhiều phần tử vào cuối mảng. Nó sửa đổi mảng ban đầu và trả về độ dài mới của mảng.

Đây là một ví dụ về cách push() có thể được sử dụng trong JavaScript:

 const array = [1, 2, 3]; const newLength = array.push(4, 5, 6); // array is [1, 2, 3, 4, 5, 6] // newLength is 6

Trong ví dụ này, phương thức push() thêm các phần tử 4, 5 và 6 vào cuối mảng và trả về độ dài mới của mảng (6). Mảng sau đó được sửa đổi để bao gồm các phần tử này.

Bạn cũng có thể sử dụng hàm push() để thêm một mảng các phần tử vào cuối một mảng khác:

 const array = [1, 2, 3]; const newLength = array.push([4, 5, 6]); // array is [1, 2, 3, [4, 5, 6]] // newLength is 4

Trong ví dụ này, phương thức push() thêm mảng [4, 5, 6] dưới dạng một phần tử vào cuối mảng và trả về độ dài mới của mảng (4).

Lưu ý rằng push() sửa đổi mảng ban đầu. Nếu bạn muốn tạo một mảng mới bao gồm các phần tử của mảng ban đầu, bạn có thể sử dụng phương thức concat() để thay thế.

5. thay đổi ()

Phương thức này được sử dụng để loại bỏ phần tử đầu tiên của một mảng và trả về nó. Nó sửa đổi mảng ban đầu.

Đây là một ví dụ về cách shift() có thể được sử dụng trong JavaScript:

 const array = [1, 2, 3, 4, 5]; const firstElement = array.shift(); // firstElement is 1 // array is [2, 3, 4, 5]

Trong ví dụ này, phương thức shift() loại bỏ phần tử đầu tiên (1) khỏi mảng và gán nó cho biến firstElement. Mảng sau đó được sửa đổi để loại bỏ phần tử đầu tiên, để lại nó với độ dài là 4.

Bạn cũng có thể sử dụng shift() kết hợp với các phương thức mảng khác, chẳng hạn như unshift() để thêm các phần tử vào đầu mảng:

 const array = [1, 2, 3]; array.unshift(0); array.shift(); // array is [1, 2, 3]

Trong ví dụ này, phương thức unshift() thêm phần tử 0 vào phần đầu của mảng, sau đó phương thức shift() lại loại bỏ phần tử đó, giữ nguyên mảng.

Lưu ý rằng nếu mảng trống, shift() trả về không xác định.

 const array = []; const element = array.shift(); // element is undefined

6. không dịch chuyển ()

Phương thức này dùng để thêm một hoặc nhiều phần tử vào đầu mảng. Nó sửa đổi mảng ban đầu và trả về độ dài mới của mảng.

Đây là một ví dụ về cách unshift() có thể được sử dụng trong JavaScript:

 const array = [1, 2, 3]; const newLength = array.unshift(4, 5, 6); // array is [4, 5, 6, 1, 2, 3] // newLength is 6

Trong ví dụ này, phương thức unshift() thêm các phần tử 4, 5 và 6 vào đầu mảng và trả về độ dài mới của mảng (6). Mảng sau đó được sửa đổi để bao gồm các phần tử này ngay từ đầu.

Bạn cũng có thể sử dụng unshift() để thêm một mảng các phần tử vào đầu một mảng khác:

 const array = [1, 2, 3]; const newLength = array.unshift([4, 5, 6]); // array is [[4, 5, 6], 1, 2, 3] // newLength is 4

Trong ví dụ này, phương thức unshift() thêm mảng [4, 5, 6] dưới dạng một phần tử vào đầu mảng và trả về độ dài mới của mảng (4).

Lưu ý rằng unshift() sửa đổi mảng ban đầu. Nếu bạn muốn tạo một mảng mới bao gồm các phần tử của mảng ban đầu, bạn có thể sử dụng phương thức concat() để thay thế.

7. lát ()

Phương thức này được sử dụng để trích xuất một phần của mảng và trả về một mảng mới. Nó không sửa đổi mảng ban đầu. Phương thức slice có hai tham số tùy chọn: chỉ mục bắt đầu và chỉ mục kết thúc.

Nếu chỉ mục bắt đầu không được chỉ định, nó sẽ mặc định là bắt đầu của mảng. Nếu chỉ mục kết thúc không được chỉ định, nó sẽ mặc định ở cuối mảng.

Đây là một ví dụ về cách slice() có thể được sử dụng trong JavaScript:

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(1, 3); // slice is [2, 3] // array is [1, 2, 3, 4, 5] (unchanged)

Trong ví dụ này, phương thức slice() trích xuất các phần tử ở chỉ số 1 và 2 (2 và 3) từ mảng và trả về chúng trong một mảng mới có tên là slice. Mảng ban đầu không được sửa đổi.

Bạn cũng có thể sử dụng slice() với một đối số duy nhất, cho biết chỉ mục bắt đầu:

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(2); // slice is [3, 4, 5] // array is [1, 2, 3, 4, 5] (unchanged)

Trong trường hợp này, phương thức slice() trích xuất tất cả các phần tử của mảng bắt đầu từ chỉ số 2 (bao gồm) đến cuối mảng.

Bạn cũng có thể sử dụng chỉ số âm với slice(), cho biết vị trí của phần tử so với phần cuối của mảng:

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(-2); // slice is [4, 5] // array is [1, 2, 3, 4, 5] (unchanged)

Trong trường hợp này, phương thức slice() trích xuất hai phần tử cuối cùng của mảng.

Lưu ý rằng nếu chỉ số bắt đầu lớn hơn chỉ số kết thúc, slice() trả về một mảng trống.

8. mối nối ()

Phương thức splice() trong JavaScript được sử dụng để thêm hoặc xóa các phần tử khỏi một mảng và trả về các phần tử đã xóa dưới dạng một mảng mới. Nó sửa đổi mảng ban đầu.

Phương thức splice() nhận ít nhất hai đối số: chỉ mục bắt đầu và số lần xóa. Chỉ mục bắt đầu là chỉ mục mà tại đó mối nối bắt đầu và số lần xóa là số phần tử sẽ bị xóa.

Đây là một ví dụ về cách splice() có thể được sử dụng để loại bỏ các phần tử khỏi một mảng:

 const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(1, 2); // removedElements is [2, 3] // array is [1, 4, 5]

Trong ví dụ này, phương thức splice() loại bỏ các phần tử ở chỉ số 1 và 2 (2 và 3) khỏi mảng và trả về chúng trong một mảng mới có tên là removeElements. Mảng ban đầu được sửa đổi để loại bỏ các phần tử này.

Bạn cũng có thể sử dụng splice() để thêm các phần tử vào một mảng:

 const array = [1, 2, 3]; const removedElements = array.splice(1, 0, 4, 5, 6); // removedElements is [] // array is [1, 4, 5, 6, 2, 3]

Trong trường hợp này, phương thức splice() thêm các phần tử 4, 5 và 6 vào mảng tại chỉ số 1 và số lần xóa là 0, do đó không có phần tử nào bị xóa. Mảng ban đầu được sửa đổi để bao gồm các phần tử này.

Bạn cũng có thể sử dụng splice() để thêm và xóa các phần tử cùng một lúc:

 const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(1, 2, 6, 7); // removedElements is [2, 3] // array is [1, 6, 7, 4, 5]

Trong ví dụ này, phương thức splice() loại bỏ các phần tử ở chỉ số 1 và 2 (2 và 3) khỏi mảng và thêm các phần tử 6 và 7 ở cùng chỉ số. Mảng ban đầu được sửa đổi để bao gồm các phần tử được thêm vào và loại bỏ các phần tử bị loại bỏ.

Lưu ý rằng nếu chỉ số bắt đầu lớn hơn độ dài của mảng, mối nối() không thêm hoặc xóa bất kỳ phần tử nào mà chỉ trả về một mảng trống.

9. đảo ngược()

Phương thức này dùng để đảo ngược thứ tự các phần tử trong mảng. Nó sửa đổi mảng ban đầu.

Đây là một ví dụ về cách sử dụng reverse() trong JavaScript:

 const array = [1, 2, 3, 4, 5]; array.reverse(); // array is [5, 4, 3, 2, 1]

Trong ví dụ này, phương thức reverse() đảo ngược thứ tự của các phần tử trong mảng, sao cho phần tử đầu tiên trở thành phần tử cuối cùng và phần tử cuối cùng trở thành phần tử đầu tiên.

Bạn cũng có thể sử dụng reverse() trên một mảng đối tượng:

 const array = [{id: 1}, {id: 2}, {id: 3}]; array.reverse(); // array is [{id: 3}, {id: 2}, {id: 1}]

Trong trường hợp này, phương thức reverse() đảo ngược thứ tự của các đối tượng trong mảng.

Lưu ý rằng đảo ngược() sửa đổi mảng ban đầu. Nếu bạn muốn tạo một mảng mới ngược lại với mảng ban đầu, bạn có thể sử dụng các phương thức slice() và reverse() cùng nhau:

 const array = [1, 2, 3, 4, 5]; const reversedArray = array.slice().reverse(); // reversedArray is [5, 4, 3, 2, 1] // array is [1, 2, 3, 4, 5] (unchanged)

Trong ví dụ này, phương thức slice() tạo một bản sao nông của mảng và phương thức reverse() đảo ngược các phần tử trong bản sao, khiến mảng ban đầu không thay đổi.

10. sắp xếp()

Phương thức này dùng để sắp xếp các phần tử của mảng tại chỗ. Nó có thể lấy một hàm so sánh tùy chọn làm tham số, cho phép bạn chỉ định thuật toán sắp xếp tùy chỉnh. Nếu không có chức năng so sánh nào được cung cấp, thì các phần tử được sắp xếp theo thứ tự tăng dần theo các điểm mã Unicode của chúng.

Đây là một ví dụ về cách sort() có thể được sử dụng trong JavaScript:

 const array = [5, 2, 4, 1, 3]; array.sort(); // array is [1, 2, 3, 4, 5]

Trong ví dụ này, phương thức sort() sắp xếp các phần tử của mảng theo thứ tự tăng dần.

Bạn cũng có thể sử dụng hàm sort() với hàm so sánh làm đối số để chỉ định thứ tự sắp xếp tùy chỉnh:

 const array = [{name: 'John'}, {name: 'Jane'}, {name: 'Bob'}]; array.sort((a, b) => a.name.localeCompare(b.name)); // array is [{name: 'Bob'}, {name: 'Jane'}, {name: 'John'}]

Trong trường hợp này, phương thức sort() sắp xếp các đối tượng trong mảng dựa trên thuộc tính tên của chúng bằng cách sử dụng phương thức localeCompare(). Lưu ý rằng sort() sửa đổi mảng ban đầu.

Cũng theo mặc định, sort() chuyển đổi các phần tử của mảng thành chuỗi và sắp xếp chúng dựa trên giá trị điểm Unicode của chúng. Điều này có thể dẫn đến kết quả không mong muốn đối với các giá trị không phải chuỗi. Ví dụ:

 const array = [10, 5, 8, 1, 7]; array.sort(); // array is [1, 10, 5, 7, 8]

Trong trường hợp này, phương thức sort() chuyển đổi các số thành chuỗi trước khi sắp xếp chúng, vì vậy mảng kết quả không theo thứ tự số. Để sắp xếp mảng theo thứ tự số, bạn có thể sử dụng hàm so sánh làm đối số cho sort():

 const array = [10, 5, 8, 1, 7]; array.sort((a, b) => a - b); // array is [1, 5, 7, 8, 10]

Nếu bạn muốn sắp xếp các phần tử của một mảng theo thứ tự giảm dần, bạn có thể sử dụng hàm so sánh sau làm đối số cho sort():

 const array = [5, 2, 4, 1, 3]; array.sort((a, b) => b - a); // array is [5, 4, 3, 2, 1]

Phần kết luận

Đây chỉ là một vài trong số rất nhiều phương thức có sẵn để làm việc với mảng trong JavaScript. Tôi hi vọng cái này giúp được! Hãy cho tôi biết nếu bạn có bất kì câu hỏi nào khác.