Cách sử dụng phương thức mảng trong JavaScript: Phương thức đột biến
Mảng trong JavaScript bao gồm một danh sách các phần tử. JavaScript có nhiều phương thức tích hợp hữu ích để làm việc với mảng. Phương pháp mà sửa đổi các mảng ban đầu được gọi là phương pháp mutator, và phương pháp mà trả về một giá trị mới hoặc đại diện được gọi là phương pháp accessor . Trong hướng dẫn này, ta sẽ tập trung vào các phương pháp đột biến.Để tận dụng tối đa hướng dẫn này, bạn nên làm quen với việc tạo, lập index , sửa đổi và lặp qua các mảng, bạn có thể xem lại trong hướng dẫn Hiểu Mảng trong JavaScript .
Mảng tương tự như chuỗi , cả hai đều bao gồm một chuỗi các phần tử có thể được truy cập thông qua số index . Tuy nhiên, điều quan trọng cần nhớ là các chuỗi là một kiểu dữ liệu bất biến, nghĩa là chúng không thể thay đổi được. Mặt khác, mảng có thể thay đổi, nghĩa là nhiều phương thức mảng sẽ ảnh hưởng đến mảng ban đầu, không phải bản sao của mảng.
Hướng dẫn này sẽ đi qua việc thêm và xóa các phần tử, đảo ngược, thay thế và sửa đổi các phần tử trong một mảng.
Lưu ý: Các phương thức của mảng được viết đúng cách dưới dạng Array.prototype.method() , vì Array.prototype đề cập đến chính đối tượng Array . Để đơn giản, ta sẽ liệt kê tên là method() .
isArray ()
Trước khi ta tìm hiểu các phương thức đột biến, hãy xem phương thức isArray() để kiểm tra xem các đối tượng có phải là mảng hay không. Đây là một phương thức Boolean trả về true nếu giá trị của một biến bằng một mảng. Nếu đối tượng không phải là một mảng, phương thức này trả về false .
let fish = [ "piranha", "barracuda", "koi", "eel" ]; // Test if fish variable is an array Array.isArray(fish); Outputtrue Phương thức isArray() rất hữu ích vì toán tử typeof mà ta thường sử dụng để kiểm tra object trả về khi được sử dụng với mảng và đôi khi cần biết sự phân biệt giữa một đối tượng và một đối tượng Array .
Lưu ý isArray() được viết khác với hầu hết các phương thức mảng, với biến mảng được cung cấp làm đối số cho phương thức.
Bây giờ ta đã biết cách kiểm tra đảm bảo rằng một đối tượng là một mảng, hãy chuyển sang các phương thức mutator.
pop ()
Phương thức mutator đầu tiên mà ta sẽ xem xét là phương thức pop() , phương thức này xóa phần tử cuối cùng khỏi phần cuối của một mảng.
Ta sẽ bắt đầu với mảng fish của ta .
let fish = [ "piranha", "barracuda", "koi", "eel" ]; Hãy khởi tạo phương thức pop() để xóa mục cuối cùng. Trong trường hợp này, nó sẽ là chuỗi theo nghĩa đen "eel" .
// Use pop method to remove an item from the end of an array fish.pop(); Ta sẽ gọi mảng của bạn đảm bảo rằng mảng được trả về mà không có mục cuối cùng:
fish; Output[ 'piranha', 'barracuda', 'koi' ] Ta đã xóa thành công "eel" khỏi mảng fish . Phương thức pop() không có tham số bổ sung.
shift ()
Một phương thức đột biến khác, phương thức shift() loại bỏ phần tử đầu tiên khỏi phần đầu của một mảng.
let fish = [ "piranha", "barracuda", "koi", "eel" ]; Ta sẽ sử dụng shift() để xóa "piranha" khỏi index 0 và chuyển tất cả các phần tử còn lại xuống một số index .
// Use shift method to remove an item from the beginning of an array fish.shift(); fish; Output[ 'barracuda', 'koi', 'eel' ] Trong ví dụ này, "piranha" đã bị xóa và mỗi mục đã giảm một số index . Vì lý do này, thường được ưu tiên sử dụng phương thức pop() khi nào có thể, vì các phần tử mảng khác sẽ duy trì vị trí index của chúng.
đẩy()
Phương thức push() mutator thêm một phần tử mới hoặc các phần tử vào cuối một mảng.
let fish = [ "piranha", "barracuda", "koi", "eel" ]; Để thêm một mục vào cuối, ta viết phần tử mới dưới dạng tham số của hàm.
// Use push method to add an item to the end of an array fish.push("swordfish"); fish; Output[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ] Cũng có thể thêm nhiều giá trị mới vào mảng. Ví dụ: fish.push("swordfish", "dragonfish") sẽ thêm các mục vào index 4 và 5 .
unshift ()
Phương thức mảng unshift() mutator thêm một phần tử mới hoặc các phần tử vào đầu một mảng.
let fish = [ "piranha", "barracuda", "koi", "eel" ]; // Use unshift method to add an item to the beginning of an array fish.unshift("shark"); fish; Output[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ] Trong ví dụ trên, "shark" đã được thêm vào vị trí index 0 , dịch chuyển tất cả các phần tử khác của mảng một. Cũng như với shift() , bạn có thể thêm nhiều mục được phân tách bằng dấu phẩy vào mảng cùng một lúc.
pop() và push() ảnh hưởng đến phần cuối của một mảng, và shift() và unshift() ảnh hưởng đến phần đầu của một mảng. Một cách dễ dàng để nhớ điều này là hãy nhớ rằng shift() và unshift() sẽ thay đổi tất cả các số index của mảng được trả về
mối nối ()
Phương thức splice() có thể thêm hoặc bớt một mục khỏi bất kỳ vị trí nào trong một mảng. Một phương thức mutator, splice() có thể thêm hoặc bớt hoặc thêm và bớt đồng thời.
splice() nhận ba tham số - số index để bắt đầu, số mục cần xóa và các mục cần thêm (tùy chọn).
splice(index number, number of items to remove, items to add) splice(0, 0, "new") sẽ thêm chuỗi "new" vào đầu mảng và không xóa gì.
Hãy xem một vài ví dụ dưới đây về cách splice() có thể thêm và xóa các mục trong một mảng.
Thêm bằng splice()
Nếu ta đặt tham số thứ hai (các mục cần xóa) là 0 , splice() sẽ xóa các mục không. Bằng cách này, ta có thể chọn chỉ thêm một mục bắt đầu từ bất kỳ số index nào, làm cho splice() mạnh hơn push() hoặc unshift() , chỉ thêm các mục vào cuối hoặc đầu một mảng.
let fish = [ "piranha", "barracuda", "koi", "eel" ]; // Splice a new item number into index position 1 fish.splice(1, 0, "manta ray"); fish; Output[ 'piranha', 'manta ray', 'barracuda', 'koi', 'eel' ] Chuỗi mới, "manta ray" , đã được thêm vào mảng, bắt đầu từ index 1 .
Loại bỏ bằng splice()
Nếu ta để trống tham số thứ ba (các mục cần thêm), ta có thể chỉ cần xóa một mục khỏi bất kỳ điểm nào trong mảng.
let fish = [ "piranha", "barracuda", "koi", "eel" ]; // Remove two items, starting at index position 1 fish.splice(1, 2); fish; Output[ 'piranha', 'eel' ] Ta đã xóa hai mục khỏi mảng, bắt đầu bằng index 1 , "barracuda" . Nếu đối số thứ hai bị xóa, tất cả các mục ở cuối mảng sẽ bị xóa.
Thêm và xóa bằng splice()
Sử dụng tất cả các tham số cùng một lúc, ta có thể thêm và xóa các mục khỏi một mảng cùng một lúc.
Để chứng minh điều này, hãy xóa các mục tương tự như ta đã làm ở trên và thêm một mục mới vào vị trí của chúng.
let fish = [ "piranha", "barracuda", "koi", "eel" ]; // Remove two items and add one fish.splice(1, 2, "manta ray"); fish; Output[ 'piranha', 'manta ray', 'eel' ] splice() là một phương thức mạnh mẽ để sửa đổi bất kỳ phần nào của mảng. Lưu ý splice() không được nhầm lẫn với slice() mảng truy cập sẽ tạo bản sao của một phần của mảng.
đảo ngược()
Phương thức reverse() đảo ngược thứ tự của các phần tử trong một mảng.
let fish = [ "piranha", "barracuda", "koi", "eel" ]; Sử dụng reverse() , phần tử cuối cùng sẽ là đầu tiên và phần tử đầu tiên sẽ là cuối cùng.
// Reverse the fish array fish.reverse(); fish; Output[ 'eel', 'koi', 'barracuda', 'piranha' ] Phương thức mảng reverse() không có tham số.
lấp đầy()
Phương thức fill() thay thế tất cả các phần tử trong một mảng bằng một giá trị tĩnh.
let fish = [ "piranha", "barracuda", "koi", "eel" ]; Trong mảng fish , ta có bốn mặt hàng. Hãy áp dụng fill() .
// Replace all values in the array with "shark" fish.fill("shark"); fish; Output[ 'shark', 'shark', 'shark', 'shark' ] Tất cả bốn mục trong mảng đã được thay thế bằng cùng một giá trị, "shark" . fill() cũng nhận các đối số tùy chọn của điểm đầu và điểm cuối.
fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ] fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ] Sử dụng fill() ta có thể thay thế một hoặc nhiều phần tử trong mảng bằng một giá trị tĩnh.
sắp xếp ()
Phương sort() sắp xếp các phần tử trong một mảng dựa trên ký tự đầu tiên trong phần tử. Trong trường hợp ký tự đầu tiên giống hệt nhau, nó sẽ tiếp tục xuống dòng và so sánh ký tự thứ hai, v.v.
Theo mặc định, sort() sẽ sort() theo thứ tự bảng chữ cái một mảng các chuỗi đều là chữ hoa hoặc chữ thường.
let fish = [ "piranha", "barracuda", "koi", "eel" ]; // Sort items in array fish.sort(); fish; Output[ 'barracuda', 'eel', 'koi', 'piranha' ] Vì sort() dựa trên ký tự unicode đầu tiên, nó sẽ sắp xếp các mục viết hoa trước chữ thường.
Hãy sửa đổi mảng ban đầu của ta để một trong các chuỗi của ta bắt đầu bằng một ký tự hoa.
let fish = [ "piranha", "barracuda", "Koi", "eel" ]; fish.sort(); fish; Output[ 'Koi', 'barracuda', 'eel', 'piranha' ] Các số đứng trước cả ký tự viết hoa và viết thường.
Ta có thể sửa đổi lại mảng để bao gồm một số trong một trong các mục chuỗi.
let fish = [ "piranha", "barracuda", "Koi", "1 eel" ]; fish.sort(); Output[ '1 eel', 'Koi', 'barracuda', 'piranha' ] sort() sẽ không sắp xếp một mảng số theo kích thước theo mặc định. Thay vào đó, nó sẽ chỉ kiểm tra ký tự đầu tiên trong số.
let numbers = [ 42, 23, 16, 15, 4, 8 ]; numbers.sort(); Output[ 15, 16, 23, 4, 42, 8 ] Để sắp xếp các số đúng cách, bạn có thể tạo một hàm so sánh làm đối số.
// Function to sort numbers by size const sortNumerically = (a, b) => { return a - b; } numbers.sort(sortNumerically); Output[ 4, 8, 15, 16, 23, 42 ] Chức năng so sánh sortNumerically cho phép ta sắp xếp theo ý muốn. sort() sẽ áp dụng thay đổi cho mảng ban đầu.
Kết luận
Trong hướng dẫn này, ta đã xem xét các phương thức mảng đột biến chính trong JavaScript. Các phương thức Mutator sửa đổi mảng ban đầu mà chúng được sử dụng, trái ngược với việc tạo một bản sao giống như các phương thức của trình truy cập. Ta đã học cách thêm và xóa các phần tử vào đầu hoặc cuối của một mảng, cũng như sắp xếp, đảo ngược và thay thế giá trị của các mục mảng.
Để xem lại kiến thức cơ bản về mảng, hãy đọc Tìm hiểu về mảng trong JavaScript . Để xem danh sách đầy đủ tất cả các phương thức mảng, hãy xem tham chiếu Mảng trên Mạng nhà phát triển Mozilla .
Các tin liên quan
Cách viết chương trình JavaScript đầu tiên của bạn2017-08-02
Hiểu mảng trong JavaScript
2017-07-28
Làm thế nào để làm toán trong JavaScript với các toán tử
2017-07-20
Cách lập chỉ mục, tách và thao tác chuỗi trong JavaScript
2017-07-14
Object.values và Object.entries trong JavaScript
2017-07-12
Cách làm việc với chuỗi trong JavaScript
2017-07-11
Giới thiệu về Maps bằng JavaScript
2017-07-06
Hiểu cú pháp và cấu trúc mã trong JavaScript
2017-07-05
Cách thêm JavaScript vào HTML
2017-06-30
Cách sử dụng control panel dành cho nhà phát triển JavaScript
2017-06-29
