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 đại
Bả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ử
Ví dụ sử dụng map[] cơ bản
Sử 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ề
- map[] trả về một mảng mới có cùng độ dài với mảng cha
- forEach[] trả về không xác định, ngăn chúng ta xâu chuỗi các phương thức lại với nhau
- filter[] trả về một mảng chứa các mục thỏa mãn một điều kiện nào đó [e. g. lớn hơn 5]. Với điều này, phương thức filter[] có thể trả về một mảng có cùng độ dài, một mảng trống hoặc thứ gì đó ở giữa. Độ dài cuối cùng của giá trị trả về phụ thuộc vào số lượng mục đáp ứng điều kiện bắt buộc
- reduce[] được sử dụng để giảm một mảng thành một giá trị duy nhất. Ví dụ: bạn có thể sử dụng reduce[] để tính tổng tất cả các giá trị của mảng hoặc để truy xuất giá trị cao nhất trong mảng. Sử dụng reduce[] bất cứ khi nào điều quan trọng là bạn phải làm việc với một giá trị duy nhất được tạo từ mảng bên dưới
cú pháp
Cú 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
mảng. map[hàm gọi lại [currentValue, index, array], cái này. lập luận]
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
- Hàm gọi lại trong mã này là numMultIdx
- Giá trị hiện tại là mỗi số trong mảng lặp [numArray], được cung cấp theo thứ tự và được gửi tới numMultIdx trong tham số num
- Idx chỉ cần nhận chỉ mục của mục hiện tại trong mảng lặp đang được xử lý
- Đối số cuối cùng, mảng, là mảng chúng ta đang lặp qua và hiếm khi được sử dụng
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 JavaScript
Mộ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 [{books.map[[book, idx] => { 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à
- Lặp lại đơn giản trên mảng đối tượng
- Tạo mảng biến đổi mới
- Nhận danh sách các giá trị của thuộc tính đối tượng
- Thêm thuộc tính vào mọi mục nhập đối tượng của mảng
- Xóa thuộc tính của mọi mục nhập đối tượng trong mảng
- Truy cập các cặp khóa/giá trị của từng thực thể đối tượng
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
let todoList = [
{item_name:"Apple", price:"$5", quantity:1, brand_details: {name:"Golden Delicious", location:"San Francisco"}, isChecked:true},
{item_name:"Bannana", price:"$3", quantity:2, brand_details: {name:"Fuji", location:"San Diego"}, isChecked:false},
{item_name:"Pears", price:"$7", quantity:4, brand_details: {name:"Golden Delicious", location:"San Francisco"}, isChecked:true},
{item_name:"Milk", price:"$4", quantity:3, brand_details: {name:"Mother Dairy", location:"California"}, isChecked:false},
];
Lặp lại đơn giản của một mảng đối tượng
Mọ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
// Print item_name, price and quantity of each object in todo list
todoList.map[[{item_name, price, quantity}]=>{
console.log[`${item_name} with quantity ${quantity} with price ${price}`]
}];
// "Apple with quantity 1 with price $5"
// "Bannana with quantity 2 with price $3"
// "Pears with quantity 4 with price $7"
// "Milk with quantity 3 with price $4"
// Print item_name and brand name of all checked object
todoList.map[[{item_name, isChecked, brand_details: {name}}]=>{
if[isChecked]{
console.log[`${item_name} from ${name} is selected`];
}
}];
// "Apple from Golden Delicious is selected"
// "Pears from Golden Delicious is selected"
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
// Transform into nested array of item_name with isChecked value
todoList.map[[{item_name, isChecked}]=>{
return [item_name, isChecked];
}];
// [["Apple", true]
// ["Bannana", false]
// ["Pears", true]
// ["Milk", false]]
// Transform into array of objects with item_name and price
todoList.map[[{item_name, price}]=>{
return {item_name, price};
}];
// [{item_name: "Apple", price: "$5"}
// {item_name: "Bannana", price: "$3"}
// {item_name: "Pears", price: "$7"}
// {item_name: "Milk", price: "$4"}]
Tạo danh sách từ mảng đối tượng
Có 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
// Print all item_name values from array of objects
const itemList = todoList.map[[{item_name}]=> item_name];
console.log[itemList]
// ["Apple", "Bannana", "Pears", "Milk"]
// Print unique brand location values from array of objects
let productLocations = todoList.map[[{brand_details: {location}}] => location];
productLocations = new Set[productLocations]
console.log[productLocations]
// {"San Francisco", "San Diego", "California"}
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ố
// Adding "total" property to todoList objects
todoList = todoList.map[
[item]=> {
// Parsing price string to number value
const price = Number[item.price.replace["$", ""]]
return {...item, total: `\$${price*item.quantity}`}
}];
console.log[todoList]
Xóa thuộc tính khỏi Mảng đối tượng
Có 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
- Cập nhật mảng với mảng đã chuyển đổi mới bằng cách trả về một đối tượng không có thuộc tính trong hàm gọi lại bên trong Array. bản đồ[]
- Lặp lại trên mọi đối tượng và thực hiện “xóa đối tượng. property_name” để xóa vĩnh viễn thuộc tính khỏi đối tượng tham chiếu
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ượng
Cá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ị