Cách sử dụng phương thức mảng trong JavaScript: Phương thức lặp lại
Trong JavaScript, kiểu dữ liệu mảng bao gồm một danh sách các phần tử. Có rất nhiều phương pháp tích hợp hữu ích có sẵn cho các nhà phát triển JavaScript để 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 .Có một lớp thứ ba của các phương thức mảng, được gọi là phương thức lặp , là các phương thức hoạt động trên mọi mục trong một mảng, tại một thời điểm. Các phương pháp này được kết hợp chặt chẽ với các vòng lặp. Trong hướng dẫn này, ta sẽ tập trung vào các phương pháp lặp.
Để 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 .
Trong hướng dẫn này, ta sẽ sử dụng các phương pháp lặp để lặp qua các mảng, thực hiện các chức năng trên từng mục trong mảng, lọc kết quả mong muốn của một mảng, giảm các mục của mảng xuống một giá trị duy nhất và tìm kiếm qua các mảng để tìm các giá trị hoặc chỉ số.
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() .
Hiểu các hàm mũi tên
Nhiều ví dụ trong suốt hướng dẫn này sẽ sử dụng các biểu thức hàm mũi tên trong JavaScript, được biểu thị bằng dấu bằng theo sau là dấu lớn hơn: => .
Hàm là một khối mã có thể tái sử dụng có thể được thực thi. Theo truyền thống, một hàm có thể được viết theo cú pháp sau:
var example = function() { // code to execute } example(); Phiên bản JavaScript mới nhất tại thời điểm viết bài này cho phép sử dụng các hàm mũi tên, có thể được viết theo cú pháp sau:
var example = () => { // code to execute } example(); Dấu ngoặc đơn trong cả hai trường hợp có thể chứa các tham số. Khi chỉ có một tham số, có thể bỏ qua dấu ngoặc đơn, chẳng hạn như:
var example = parameter1 => { // code to execute } Trong suốt các ví dụ trong hướng dẫn này, ta sẽ sử dụng cú pháp hàm mũi tên. Để đọc và hiểu thêm về các hàm trong JavaScript, hãy đọc tài liệu tham khảo Các hàm trên Mạng nhà phát triển Mozilla .
cho mỗi()
Phương thức forEach() gọi một hàm cho mỗi phần tử trong một mảng.
Hãy bắt đầu với mảng sau được gán cho biến fish :
let fish = [ "piranha", "barracuda", "cod", "eel" ]; Ta có thể sử dụng forEach() để in từng mục trong mảng fish vào console .
// Print out each item in the array fish.forEach(individualFish => { console.log(individualFish); }) Khi ta làm như vậy, ta sẽ nhận được kết quả sau:
Outputpiranha barracuda cod eel Một cách khác để làm điều này là sử dụng từ khóavòng lặp for và kiểm tra nó dựa trên thuộc tính độ dài của mảng.
// Loop through the length of the array for (let i = 0; i < fish.length; i++) { console.log(fish[i]); } Đoạn mã trên sẽ có kết quả giống như khi sử dụng phương thức forEach() . Là một phương thức lặp được thiết kế đặc biệt để sử dụng với mảng, forEach() ngắn gọn và dễ hiểu hơn cho tác vụ cụ thể này.
bản đồ()
Phương thức map() tạo một mảng mới với kết quả của một lệnh gọi hàm trên mỗi phần tử trong mảng.
Đối với một ví dụ về cách sử dụng phương thức lặp map() , ta có thể in từng lần lặp của một vòng lặp vào console . map() không thay đổi mảng ban đầu, thay vào đó nó trả về một giá trị mảng mới. Không giống như forEach() , phương thức map() phải được gán cho một biến mới.
let fish = [ "piranha", "barracuda", "cod", "eel" ]; // Print out each item in the array let printFish = fish.map(individualFish => { console.log(individualFish); }); printFish; Outputpiranha barracuda cod eel Ta cũng có thể sử dụng map() để thay đổi giá trị của từng mục trong một mảng. Để chứng minh điều này, ta sẽ thêm một s vào cuối mỗi mục trong mảng fish để đa dạng hóa từng từ.
// Pluralize all items in the fish array let pluralFish = fish.map(individualFish => { return `${individualFish}s`; }); pluralFish; Output[ 'piranhas', 'barracudas', 'cods', 'eels' ] Biến fish ban đầu không thay đổi, nhưng pluralFish hiện chứa một version sửa đổi của biến ban đầu.
bộ lọc ()
Phương thức filter() tạo một mảng mới với các phần tử vượt qua kết quả của một bài kiểm tra nhất định.
Ta có thể sử dụng filter() để trả về một mảng mới chỉ chứa các mục trong danh sách bắt đầu bằng một chữ cái cụ thể. Để làm điều này, ta có thể sử dụng lập index chuỗi để gọi mục đầu tiên (hoặc chữ cái) trong mỗi mục chuỗi của mảng.
let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ]; // Filter all creatures that start with "s" into a new list let filteredList = seaCreatures.filter(creature => { return creature[0] === "s"; }); filteredList; Output[ 'shark', 'squid', 'starfish' ] Ta đã kiểm tra các mục nào trong mảng có chỉ số s ở 0 và gán kết quả vào một biến mới.
filter() là một phương thức lặp và không làm thay đổi mảng ban đầu.
giảm()
Phương thức reduce() sẽ giảm một mảng xuống một giá trị duy nhất.
Điều này thường thấy với các số, chẳng hạn như tìm tổng của tất cả các số trong một mảng.
let numbers = [ 42, 23, 16, 15, 4, 8 ]; // Get the sum of all numerical values let sum = numbers.reduce((a, b) => { return a + b; }); sum; Output108 reduce() cũng được dùng với các chuỗi và các kiểu dữ liệu khác . Giá trị được trả về bởi reduce() có thể là một số, chuỗi, mảng hoặc kiểu dữ liệu khác. reduce() là một phương thức lặp không làm thay đổi mảng ban đầu.
tìm thấy()
Phương thức find() trả về giá trị đầu tiên trong một mảng vượt qua một bài kiểm tra nhất định.
Ví dụ, ta sẽ tạo một mảng sinh vật biển.
let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ]; Sau đó, ta sẽ sử dụng phương thức find() để kiểm tra xem có sinh vật nào trong mảng là động vật chân đầu hay không.
// Check if a given value is a cephalopod const isCephalopod = cephalopod => { return [ "cuttlefish", "octopus" ].includes(cephalopod); } seaCreatures.find(isCephalopod); Outputoctopus Vì octopus là mục nhập đầu tiên trong mảng đáp ứng kiểm tra trong hàm isCephalopod() , nên nó là giá trị đầu tiên được trả về.
Phương thức find() có thể giúp bạn làm việc với các mảng chứa nhiều giá trị.
findIndex ()
Phương thức findIndex() trả về index đầu tiên trong một mảng vượt qua một bài kiểm tra nhất định.
Ta có thể sử dụng cùng một ví dụ seaCreatures từ phương thức find() .
let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ]; Sử dụng kiểm tra isCephalopod , ta sẽ tìm số index thay vì giá trị của khớp đầu tiên.
// Check if a given value is a cephalopod const isCephalopod = cephalopod => { return [ "cuttlefish", "octopus" ].includes(cephalopod); } seaCreatures.findIndex(isCephalopod); Output1 octopus là mục đầu tiên phù hợp với thử nghiệm và có chỉ số là 1 , do đó nó là số index được trả về.
Nếu kiểm tra không thỏa mãn, findIndex() sẽ trả về -1 .
const isThereAnEel = eel => { return [ "eel" ].includes(eel); } seaCreatures.findIndex Output-1 Phương thức findIndex() đặc biệt hữu ích khi làm việc với các mảng chứa nhiều mục.
Kết luận
Trong hướng dẫn này, ta đã xem xét các phương thức mảng lặp được tích hợp sẵn trong JavaScript. Các phương thức lặp hoạt động trên mọi mục trong một mảng và thường thực hiện một chức năng mới. Ta đã xem xét cách lặp qua các mảng, thay đổi giá trị của từng mục trong mảng, lọc và giảm mảng cũng như tìm các giá trị và chỉ số.
Để 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 . Để biết thêm thông tin về cú pháp trong Javascript, hãy xem hướng dẫn của ta về “Hiểu cú pháp và cấu trúc mã trong JavaScript”.
Các tin liên quan
Cách chuyển đổi kiểu dữ liệu trong JavaScript2017-08-15
Cách sử dụng các phương thức mảng trong JavaScript: Phương thức Accessor
2017-08-14
Cách sử dụng phương thức mảng trong JavaScript: Phương thức đột biến
2017-08-10
Cách viết chương trình JavaScript đầu tiên của bạn
2017-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
