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 đạ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à

  1. Lặp lại đơn giản trên mảng đối tượng
  2. Tạo mảng biến đổi mới
  3. Nhận danh sách các giá trị của thuộc tính đối tượng
  4. Thêm thuộc tính vào mọi mục nhập đối tượng của mảng
  5. Xóa thuộc tính của mọi mục nhập đối tượng trong mảng
  6. 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

to-do-listDanh sách việc cần làm, nguồn. freepik. com

Mả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

  1. 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 đồ()
  2. 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ố 8

Truy 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ị

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.