Cách sử dụng .map () để lặp lại thông qua các mục mảng trong JavaScript
Từ phương thứcforloop cổ điển đến phương thức forEach() , nhiều kỹ thuật và phương pháp khác nhau được sử dụng để lặp qua các tập dữ liệu trong JavaScript. Một trong những phương thức phổ biến nhất là phương thức .map() . .map() tạo một mảng từ việc gọi một hàm cụ thể trên từng mục trong mảng mẹ. .map() là một phương thức không thay đổi tạo ra một mảng mới trái ngược với các phương thức thay đổi, chỉ áp dụng các thay đổi đối với mảng đang gọi. Phương thức này có thể có nhiều cách sử dụng khi làm việc với mảng. Trong hướng dẫn này, bạn sẽ xem xét bốn cách sử dụng đáng chú ý của .map() trong JavaScript: gọi một hàm của các phần tử mảng, chuyển đổi chuỗi thành mảng, hiển thị danh sách trong thư viện JavaScript và định dạng lại các đối tượng mảng.
Yêu cầu
Hướng dẫn này không yêu cầu bất kỳ mã hóa nào, nhưng nếu bạn muốn làm theo cùng với các ví dụ, bạn có thể sử dụng Node.js REPL hoặc các công cụ dành cho nhà phát triển trình duyệt.
Để cài đặt Node.js local , bạn có thể làm theo các bước tại Cách cài đặt Node.js và Tạo môi trường phát triển local .
Chrome DevTools có sẵn bằng cách download và cài đặt version mới nhất của Google Chrome .
Bước 1 - Gọi một hàm trên mỗi mục trong một mảng
.map() chấp nhận một hàm gọi lại làm một trong các đối số của nó và một tham số quan trọng của hàm đó là giá trị hiện tại của mục đang được hàm xử lý. Đây là một tham số bắt buộc. Với tham số này, bạn có thể sửa đổi từng mục trong một mảng và tạo một hàm mới.
Đây là một ví dụ:
const sweetArray = [2, 3, 4, 5, 35] const sweeterArray = sweetArray.map(sweetItem => { return sweetItem * 2 }) console.log(sweeterArray) Đầu ra này được ghi vào console :
Output[ 4, 6, 8, 10, 70 ] Điều này có thể được đơn giản hóa hơn nữa để làm cho nó sạch hơn với:
// create a function to use const makeSweeter = sweetItem => sweetItem * 2; // we have an array const sweetArray = [2, 3, 4, 5, 35]; // call the function we made. more readable const sweeterArray = sweetArray.map(makeSweeter); console.log(sweeterArray); Đầu ra tương tự được ghi vào console :
Output[ 4, 6, 8, 10, 70 ] Có mã như sweetArray.map(makeSweeter) làm cho mã của bạn dễ đọc hơn một chút.
Bước 2 - Chuyển đổi một chuỗi thành một mảng
.map() được biết là thuộc về nguyên mẫu mảng. Trong bước này, bạn sẽ sử dụng nó để chuyển đổi một chuỗi thành một mảng. Bạn không phát triển phương thức làm việc cho các chuỗi ở đây. Thay vào đó, bạn sẽ sử dụng phương thức .call() đặc biệt.
Mọi thứ trong JavaScript đều là một đối tượng và các phương thức là các hàm gắn liền với các đối tượng này. .call() cho phép bạn sử dụng ngữ cảnh của một đối tượng này trên một đối tượng khác. Do đó, bạn sẽ sao chép ngữ cảnh của .map() trong một mảng sang một chuỗi.
.call() có thể được truyền vào các đối số của ngữ cảnh được sử dụng và các tham số cho các đối số của hàm root .
Đây là một ví dụ:
const name = "Sammy" const map = Array.prototype.map const newName = map.call(name, eachLetter => { return `${eachLetter}a` }) console.log(newName) Đầu ra này được ghi vào console :
Output- [ "Sa", "aa", "ma", "ma", "ya" ]
Ở đây, bạn đã sử dụng ngữ cảnh của .map() trên một chuỗi và truyền một đối số của hàm mà .map() mong đợi.
Hàm này hoạt động giống như phương thức .split() của một chuỗi, chỉ là mỗi ký tự chuỗi riêng lẻ có thể được sửa đổi trước khi được trả về trong một mảng.
Bước 3 - Hiển thị Danh sách trong Thư viện JavaScript
Các thư viện JavaScript như React sử dụng .map() để hiển thị các mục trong danh sách. Tuy nhiên, điều này yêu cầu cú pháp JSX vì phương thức .map() được gói trong cú pháp JSX.
Đây là một ví dụ về một thành phần React:
import React from "react"; import ReactDOM from "react-dom"; const names = ["whale", "squid", "turtle", "coral", "starfish"]; const NamesList = () => ( <div> <ul>{names.map(name => <li key={name}> {name} </li>)}</ul> </div> ); const rootElement = document.getElementById("root"); ReactDOM.render(<NamesList />, rootElement); Đây là một thành phần không trạng thái trong React, nó hiển thị một div với một danh sách. Các mục danh sách riêng lẻ được hiển thị bằng cách sử dụng .map() để lặp qua mảng tên được tạo ban đầu. Thành phần này được hiển thị bằng ReactDOM trên phần tử DOM với Id root .
Bước 4 - Định dạng lại các đối tượng mảng
.map() được dùng để lặp qua các đối tượng trong một mảng và theo cách tương tự như các mảng truyền thống, sửa đổi nội dung của từng đối tượng riêng lẻ và trả về một mảng mới. Việc sửa đổi này được thực hiện dựa trên những gì được trả về trong hàm gọi lại.
Đây là một ví dụ:
const myUsers = [ { name: 'shark', likes: 'ocean' }, { name: 'turtle', likes: 'pond' }, { name: 'otter', likes: 'fish biscuits' } ] const usersByLikes = myUsers.map(item => { const container = {}; container[item.name] = item.likes; container.age = item.name.length * 10; return container; }) console.log(usersByLikes); Đầu ra này được ghi vào console :
Output[ {shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50} ] Ở đây, bạn đã sửa đổi từng đối tượng trong mảng bằng cách sử dụng ký hiệu dấu ngoặc và dấu chấm. Trường hợp sử dụng này được dùng để xử lý hoặc cô đọng dữ liệu đã nhận trước khi được lưu hoặc phân tích cú pháp trên ứng dụng giao diện user .
Kết luận
Trong hướng dẫn này, ta đã xem xét bốn cách sử dụng phương thức .map() trong JavaScript. Kết hợp với các phương thức khác, chức năng của .map() có thể được mở rộng. Để biết thêm thông tin, hãy xem bài viết Cách sử dụng phương thức mảng trong JavaScript: Phương thức lặp lại của ta .
Các tin liên quan
Hiểu về cấu trúc hủy, tham số khôi phục và cú pháp trải rộng trong JavaScript2020-05-12
Cách gỡ lỗi JavaScript với Google Chrome DevTools và Visual Studio Code
2020-05-08
Thanh tiến trình trang với các biến JavaScript và CSS
2020-04-16
Xem xét API JavaScript của trình quan sát thay đổi kích thước
2020-04-16
Xem xét API control panel JavaScript
2020-04-16
Xem xét Đề xuất Nhà điều hành Đường ống JavaScript
2020-04-16
Cách triển khai các phương thức mảng JavaScript từ Scratch
2020-04-09
Các đống nhị phân và hàng đợi ưu tiên qua JavaScript
2020-04-05
JavaScript bất biến có thể thay đổi
2020-04-02
Hiểu các tham số mặc định trong JavaScript
2020-03-31
