Bản đồ JavaScript có điều kiện
Array map() là một phương thức có trong Array. prototype được giới thiệu trong ECMAScript 5 (ES5) và được hỗ trợ trong tất cả các trình duyệt hiện đạiBản đồ là một Phương thức lặp và giống như các phương thức khác như vậy – forEach(), filter(), reduce(), v.v. – nó giúp chúng tôi lặp qua tập dữ liệu, áp dụng các hành động đã chỉ định cho từng phần tử Show
Ví dụ sử dụng map() cơ bảnSử dụng map() cho phép chúng ta lặp qua tất cả các mục trong một mảng, thực hiện các hành động trên từng mục. Kết quả của hoạt động này được trả lại cho chúng tôi bên trong một mảng mới Ví dụ: đoạn mã sau lặp qua một mảng số và nhân mỗi số với 2 const numArray = [6, 7, 15, 22, 45]; const numArrayMult = numArray.map(num => num*2); console.log(numArrayMult); //Output: [12, 14, 30, 44, 90] console.log(numArray); //Output: [6, 7, 15, 22, 45] (Ví dụ này sử dụng cú pháp viết tắt, phiên bản phức tạp hơn sẽ được minh họa bên dưới Cú pháp) Trong ví dụ trên, sử dụng cú pháp map() viết tắt, numArray hoàn toàn không thay đổi. Mảng mới (numArrayMult) có cùng độ dài (5) với mảng đầu vào và tất cả các mục được thao tác theo cùng một cách (i. e. giá trị của mỗi là mục * 2) bản đồ () so với. forEach(), lọc() và giảm()Khi so sánh map() với forEach(), filter() và reduce(), điều quan trọng cần lưu ý là mặc dù tất cả các phương thức này đều lặp qua một mảng, nhưng chúng khác nhau về giá trị trả về
cú phápCú pháp của phương thức map() rất đơn giản. Phương thức chấp nhận hàm gọi lại, lấy giá trị hiện tại, chỉ mục và mảng trả về làm đối số, cung cấp một mảng mới làm đầu ra
Hãy xem xét đoạn mã sau const numArray = [6, 7, 15, 22, 45]; const numArrayMult = numArray.map(function numMultIdx(num, idx) { return num*idx; }) console.log(numArrayMult); // Output: [0, 7, 30, 66, 180] Hãy cùng khám phá đoạn mã trên và so sánh nó với hàm nguyên mẫu
Ghi chú. thao tác này. Arg cho phép bối cảnh này được thay đổi Hiển thị danh sách trong thư viện JavaScriptMột cách sử dụng phổ biến của phương thức map() trong JavaScript là hiển thị danh sách các mục cho trình duyệt. Dưới đây là một thành phần React đơn giản sử dụng map() để hiển thị danh sách sách import React from 'react'; export function BookList(props) { const {books} = props; return ( Chúng ta có thể tạm thời bỏ qua cú pháp React (bạn có thể đọc thêm về React tại đây) – phần quan trọng của mã này nằm trong Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Array trong javascript. map() trên một mảng các đối tượng để thực hiện các loại chức năng khác nhau như truy cập, chuyển đổi, xóa, v.v. Danh sách các chức năng bạn có thể thực hiện với Array. hàm map() là
Chúng tôi sẽ xem xét một ví dụ về danh sách việc cần làm có thể được biểu diễn dưới dạng một mảng của từng đối tượng mục với các thuộc tính của tên mục, giá, số lượng, được kiểm tra và chi tiết thương hiệu Danh sách việc cần làm, nguồn. freepik. comMảng đối tượng biểu diễn todo list là JavaScript như sau
Lặp lại đơn giản của một mảng đối tượngMọi đối tượng từ một mảng đối tượng được truy cập dưới dạng tham số hàm trong hàm gọi lại của Array. map(), các thuộc tính đối tượng có thể được hủy cấu trúc hoặc truy cập trực tiếp dưới dạng mục. tên tài sản. Các đối tượng cũng có thể được truy cập bằng Array. forEach(), tuy nhiên không giống như Array. map() nó luôn trả về không xác định thay vì một mảng được chuyển đổi mới Trong ví dụ dưới đây, các thuộc tính của đối tượng item_name, price và dimensions được truy cập và ghi lại cho mọi đối tượng trong một mảng đối tượng bằng cách sử dụng Array. bản đồ(). Ví dụ thứ hai cũng tương tự nhưng item_name duy nhất có tên thương hiệu của các đối tượng thỏa mãn điều kiện isChecked=true được ghi lại trên màn hình
Chuyển đổi Mảng đối tượng bằng map()Chức năng chính của Array. map() là chuyển đổi một mảng thành một mảng mới với các giá trị khác nhau. Các mục nhập cho mảng đã chuyển đổi được trả về từ hàm gọi lại của Array. bản đồ() Trong ví dụ dưới đây, một mảng 2D được tạo từ mảng todoList bằng cách trả về một mảng có các giá trị item_name và isChecked trong Mảng. hàm gọi lại map(). Tương tự như vậy trong ví dụ thứ hai, chúng ta có thể xây dựng một mảng với các mục nhập đối tượng của tên mặt hàng và giá từ khai báo todo List
Tạo danh sách từ mảng đối tượngCó thể truy xuất danh sách tất cả các giá trị thuộc tính từ mảng đối tượng bằng cách sử dụng Array. map() bằng cách trả về giá trị thuộc tính trong hàm gọi lại. Trong ví dụ dưới đây, chúng tôi tạo một mảng gồm tất cả các giá trị item_name bằng cách sử dụng Array. map() trên khai báo todoList. Ví dụ thứ hai minh họa việc tạo một mảng các giá trị vị trí thương hiệu rất giống với mảng đầu tiên với một mức cấu trúc khác để truy cập giá trị vị trí thương hiệu
Thêm thuộc tính vào mảng đối tượngĐể thêm thuộc tính mới cho mọi đối tượng từ mảng đối tượng, đối tượng được chuyển đổi có giá trị thuộc tính mới phải được trả về trong Mảng. hàm gọi lại map(). Chúng tôi sử dụng toán tử trải rộng JavaScript để bao gồm tất cả các giá trị thuộc tính đối tượng hiện có cùng với các thuộc tính mới cần được thêm vào mục nhập đối tượng. Đọc thêm về toán tử trải rộng từ nhà phát triển. mozilla. org/Người vận hành/Spread_syntax Trong ví dụ dưới đây, chúng tôi đang thêm thuộc tính “total” với các giá trị là total = price*quantity cho mọi mục nhập đối tượng của mảng todoList. Tìm hiểu thêm về phương thức Number() từ nhà phát triển. mozilla. org/JavaScript//Số
Xóa thuộc tính khỏi Mảng đối tượngCó hai cách để xóa thuộc tính khỏi mảng đối tượng bằng cách sử dụng Array. map(), chúng như sau
Trong ví dụ bên dưới, thuộc tính “brand_details” bị xóa khỏi mảng todoList bằng cách loại trừ nó trong đối tượng trả về của hàm gọi lại bên trong Array. bản đồ(). Hơn nữa, chúng ta xóa thuộc tính “price” bằng cách thực hiện “delete item. giá” trên mọi tham chiếu đối tượng của mảng todoList ________số 8Truy cập từng cặp Khóa/Giá trị trong Mảng đối tượngCác cặp khóa/giá trị của các mục nhập đối tượng có thể được truy cập bằng Object. các mục () thay vào đó, danh sách các khóa/giá trị có thể được truy cập riêng lẻ bằng cách sử dụng Object. keys() và Object. giá trị(). Tìm hiểu thêm về đối tượng. các mục () từ nhà phát triển. mozilla. org/Đối tượng/mục nhập Trong ví dụ dưới đây, chúng ta sẽ tạo một mảng gồm các cặp khóa/giá trị của các mục nhập đối tượng trong mảng todoList bằng cách sử dụng Object. các mục () với Mảng. bản đồ(). Hơn nữa, chúng tôi đã sử dụng Array lồng nhau. map() để chuyển đổi đối tượng brand_details thành mảng cặp khóa/giá trị Làm cách nào để ánh xạ với JavaScript có điều kiện?Cách sử dụng điều kiện bên trong map() trong React. Gọi phương thức map() trên một mảng. Sử dụng điều kiện if trả về rõ ràng nếu thỏa mãn . Nếu không thì trả về một giá trị khác hoặc trả về null để không hiển thị gì.
Chúng ta có thể sử dụng câu lệnh if trong map JavaScript không?Không có gì sai khi đặt câu lệnh if bên trong chức năng của bản đồ .
Làm cách nào để chuyển bản đồ làm tham số trong JavaScript?Triển khai . //tạo một mảng var my_array = [1, 3, 5, 2, 4]; // map gọi một hàm có "mục" được truyền dưới dạng tham số // bản đồ sẽ chuyển từng phần tử của my_array dưới dạng "mục" trong hàm này //hàm sẽ nhân đôi mỗi phần tử được truyền vào nó và trả về nó kết quả = my_array. bản đồ (chức năng (mục) { trả lại hàng*2; map() trong JavaScript là gì?map() tạo một mảng mới từ việc gọi một hàm cho mọi phần tử mảng . map() gọi một hàm một lần cho mỗi phần tử trong một mảng. map() không thực thi chức năng cho các phần tử trống. |