Khi ES6 (EmcaScript 2015) ra mắt, nó đã mở ra một tập hợp các phương thức hoàn toàn mới để lặp qua một mảng. Và một trong những phương thức hữu ích nhất là phương thức map (). Array.prototype.map () là một phương thức mảng tích hợp để lặp qua các phần tử bên trong tập hợp mảng trong JavaScript. Hãy nghĩ đến việc lặp lại

Bạn đang xem: mảng bản đồ javascript

Khi ES6 (EmcaScript 2015) ra mắt, nó mở ra một tập hợp các phương thức hoàn toàn mới để lặp lại một mảng. Và một trong những phương thức hữu ích nhất là phương thức map () .

Array.prototype.map () là một phương thức mảng tích hợp sẵn để lặp lại thông qua các phần tử bên trong tập hợp mảng trong JavaScript. Hãy coi lặp lại như một cách để chuyển từ phần tử này sang phần tử khác trong danh sách, trong khi vẫn duy trì thứ tự và vị trí của mỗi phần tử.

Phương thức này đưa vào một hàm gọi lại , hàm này được gọi cho mọi phần tử mới mà nó lặp lại.

Hàm gọi lại nhận trong ba tham số:

  • Giá trị hiện tại
  • Đó là chỉ mục
  • Mảng mục tiêu

Nếu bạn là người mới bắt đầu đấu tranh để hiểu cách sử dụng phương thức map () hoặc chính xác thì nó làm gì, thì bài viết này là dành cho bạn.

Trong bài viết này, tôi sẽ giải thích về map () và minh họa cách thức hoạt động của nó với một số ví dụ đơn giản.

Cách thức hoạt động của phương thức map () trong JavaScript

< p> Hãy tưởng tượng điều này: có một hàng người bên ngoài bệnh viện chờ được tiêm chủng. Điều này có nghĩa là chúng vẫn chưa được tiêm phòng.

Từng người một, một bác sĩ tiêm vắc xin cho tất cả họ. Bác sĩ thực hiện điều này bằng cách lặp lại qua dòng. Ở một đầu, có một nhóm người vẫn chưa được tiêm chủng. Bác sĩ lấy từng người một, tiêm vắc-xin cho họ và trả họ vào một dòng mới những người được tiêm chủng.

Ở một đầu, có một mảng ( A) bạn muốn hoạt động. map () nhận tất cả các phần tử trong mảng đó (A), thực hiện một hành động nhất quán trên mỗi phần tử đó và trả chúng vào một mảng mới (B).

Cách sử dụng phương thức map () - Ví dụ Avengers

Để minh họa cách hoạt động của map () trong JavaScript, chúng ta hãy xem xét danh sách tên của một số Avengers yêu thích của chúng ta. Vấn đề là những cái tên trong danh sách này không đầy đủ - chúng bị thiếu một hậu tố quan trọng.

Với map () , chúng ta có thể lấy tất cả các tên trong mảng và thêm hậu tố "man" vào từng tên:

 < code class = "language-js"> let firstNames = ["super", "spider", "ant", "iron"]
let lastName = "man";

let fullNames = firstNames.map (firstName = & gt; firstName + lastName);

console.log (fullNames);

// ["siêu nhân", "người nhện", "người kiến", "người sắt"]  

map1-1 MÃ VISUAL

Còn phụ nữ thì sao?

Xin lỗi, tôi xấu quá. Tôi nhận ra sai lầm của mình và quyết định đưa một nhân vật nữ vào vị trí đầu tiên trong Mảng. Mỗi mục trong một mảng được xác định bằng một giá trị duy nhất, chỉ số của nó (hoặc vị trí trong mảng). Vật phẩm đầu tiên sẽ có chỉ số là 0 , vật phẩm thứ hai có chỉ số 1 , v.v.

Vì hiện đã có một nữ siêu anh hùng trên danh sách, chúng tôi sẽ muốn đảm bảo rằng chúng tôi thêm hậu tố phù hợp với siêu anh hùng thích hợp.

map () cũng lấy chỉ mục của vật phẩm mà chúng tôi hiện đang lặp lại, chúng tôi có thể thực hiện việc này bằng cách kiểm tra chỉ số của anh hùng của mình và đảm bảo rằng chúng tôi sử dụng hậu tố "woman" cho mục đầu tiên trên mảng của chúng tôi:

  let firstNames = ["wonder", "spider", "ant", "iron"]
let nam = "man";
let Female = "woman";

let fullNames = firstNames.map (function (firstName, index) {
    trả về (chỉ mục == 0)? firstName + nữ: firstName + male;
 });

console.log (fullNames);

["wonderwoman", "spiderman", "antman", "ironman"]  

map - 8

Cách sử dụng Đối số chỉ mục

Ngoài giá trị đang được lặp lại, bản đồ cũng có vị trí chỉ mục của nó. Điều này rất hữu ích nếu bạn muốn thực hiện các loại hoạt động khác nhau tùy thuộc vào vị trí chỉ mục của mục.

Trong ví dụ trước, chúng tôi đã thêm một hậu tố khác bằng cách kiểm tra chỉ mục.

Để tìm ra vị trí chỉ mục của từng mục trong mảng, chúng tôi có thể thực hiện điều này:

 let fullNames = ["wonderwoman", "spiderman", "antman", "ironman"]

fullNames.map (function (firstName, index) {
    console.log ($ {firstName} ở vị trí $ {index})
});

/ *
"wonderwoman đang ở vị trí 0"
"người nhện đang ở 1 vị trí"
"antman ở 2 vị trí"
"Người sắt ở vị trí thứ 3"
* /  

map - 1 KẾT QUẢ

Cách Nhân Tất cả Các mục trong Mảng bằng 2

Bây giờ, hãy làm việc một chút với các số. Trong ví dụ này, chúng tôi chỉ muốn nhân mọi số trong mảng đích với hai và sau đó trả về các sản phẩm của chúng thành một mảng mới:

  let number = [10, 20, 30, 40]
cho cấp số nhân = 2;

let products = number.map (number = & gt; number * kernel);

console.log (sản phẩm);

// [20, 40, 60, 80]  

Cách làm tròn đến số nguyên gần nhất

Điều gì sẽ xảy ra nếu chúng ta có một mảng các số thập phân nhưng chúng ta muốn mỗi số thập phân đó được làm tròn thành số nguyên gần nhất?

  let number = [3.7, 4.9, 6.2]
let round = number.map (function (number) {
    return Math.round (số);
})

console.log (làm tròn);

// [4, 5, 6]  

map - 2

Cách thay đổi chuỗi thành số

Chúng tôi có một danh sách các số thuộc loại chuỗi. Tuy nhiên, chúng tôi muốn chuyển đổi từng cái thành kiểu số:

  let string = ["10", "20", "30"]

let number = string.map (function (string) {
    trả về Số (chuỗi);
})

console.log (số);

// [10, 20, 30]  

Cách lấy tên thật của Avengers

< p> Trong ví dụ này, chúng ta đang làm việc với các đối tượng. Chúng ta có năm người báo thù trong mảng, và mỗi người có cả tên thật và tên anh hùng. Tuy nhiên, chúng tôi chỉ muốn truy xuất tên thật của họ vào mảng mới.

  let avengers = [
    {name: "steve rogers", heroName: "Captain America"},
    {name: "tony stark", heroName: "iron man"},
    {name: "bruce banner", heroName: "the hulk"},
    {name: "peter parker", heroName: "spiderman"},
    {name: "tchalla", heroName: "black panther"}
]

let realNames = avengers.map (avenger = & gt; avenger.name);

console.log (realNames);

// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]  

map - 5-1

Cách lấy tên anh hùng của Avengers

Để chỉ lấy tên anh hùng của họ, chúng tôi gần như làm điều tương tự, chỉ trong trong trường hợp này, chúng tôi truy cập thuộc tính heroName :

  let avengers = [
    {name: "steve rogers", heroName: "Captain America"},
    {name: "tony stark", heroName: "iron man"},
    {name: "bruce banner", heroName: "the hulk"},
    {name: "peter parker", heroName: "spiderman"},
    {name: "tchalla", heroName: "black panther"}
]

let heroNames = avengers.map (avenger = & gt; avenger.heroName);

console.log (heroNames);

// ["Captain America", "iron man", "the hulk", "spiderman", "black panther"]  

map - 10

Cách tách riêng một hàm

Thay vì xác định một hàm trực tiếp bên trong map () , chúng ta có thể xác định hàm bên ngoài và sau đó gọi nó bên trong hàm map () :

  let avengers = [
    {name: "steve rogers", heroName: "Captain America"},
    {name: "tony stark", heroName: "iron man"},
    {name: "bruce banner", heroName: "the hulk"},
    {name: "peter parker", heroName: "spiderman"},
    {name: "tchalla", heroName: "black panther"}
]

let getName = avenger = & gt; avenger.name;

let realNames = avengers.map (getName);

console.log (realNames);

// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]  

Cách hoạt động của đối số mảng

Trước đó tôi đã nói rằng trên mỗi lần lặp, phương thức map () nhận giá trị được lặp lại và cả vị trí chỉ mục của nó. Có một đối số khác để thêm vào hai đối số đó, đối số Array .

Đối số arr đại diện cho mảng đích đang được lặp lại, cùng với toàn bộ Nội dung. Với đối số này, về cơ bản bạn có thể nhìn vào toàn bộ mảng để tìm thứ gì đó.

Trong ví dụ này, chúng ta sẽ truy cập vào arrTham số để xem và kiểm tra xem mục hiện tại có phải là mục cuối cùng trong danh sách hay không. Nếu không, chúng tôi truy cập vào mục tiếp theo và trừ nó khỏi mục hiện tại. Nếu nó là cuối cùng, chúng tôi chỉ trả lại nó.

  const oldArray = [33, 20, 10, 5];
const newArray = oldArray.map ((currentVal, index, arr) = & gt; {
    hãy để nextItem = index + 1 & lt; sức mạnh? arr [chỉ số + 1]: 0
    trả về currentVal - nextItem;
});


console.log (newArray);

// [13, 10, 5, 5]  

Kết thúc

Phương thức map () đã được giới thiệu trong ES6. Với phương thức này, chúng ta có thể truy cập và thực hiện một hành động nhất quán trên mọi mục trong một tập hợp mảng.

Nó có một hàm gọi lại mà nó gọi cho mọi phần tử mới mà nó lặp lại.

< p> Trong hướng dẫn này, tôi đã giới thiệu phương thức map (), minh họa cách nó hoạt động với phép loại suy và đưa ra một số ví dụ thực tế về cách sử dụng nó trong mã JavaScript.

Tôi hy vọng bạn nhận được điều gì đó hữu ích từ phần này . Nếu bạn thích các hướng dẫn liên quan đến lập trình như thế này, bạn nên xem blog của tôi . Tôi thường xuyên xuất bản các bài viết về phát triển phần mềm ở đó.

Cảm ơn bạn đã đọc và hẹn gặp lại bạn sớm.

P / S : Nếu bạn đang học JavaScript, tôi đã tạo sách điện tử dạy 50 chủ đề bằng JavaScript với các ghi chú kỹ thuật số vẽ tay. Hãy xem tại đây .


Xem thêm những thông tin liên quan đến chủ đề mảng javascript bản đồ

Get a Unique List of Objects in an Array of Object in JavaScript

alt

  • Tác giả: Yagisanatode -Scott-
  • Ngày đăng: 2021-07-02
  • Đánh giá: 4 ⭐ ( 9120 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: To the tutorial! : https://yagisanatode.com/2021/07/03/get-a-unique-list-of-objects-in-an-array-of-object-in-javascript/

    00:00 Intro
    00:38 Build the array of objects
    03:36 Write the one-liner
    07:17 Alternate example
    08:28 the map() method
    10:52 Map object
    14:17 Map object key() method
    16:42 Map object values() method
    17:30 spread syntax
    19:08 summary

    Learn a 'unique' way (pun intended) to get a distinct list of objects in an array of objects based on a shared key in JavaScript.

    Bonus points if you know the name of the YouTube series used in the example.

    JS JavaScript vanillaJavaScript

Giới thiệu về Mảng JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 5805 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phương thức mảng JavaScript

  • Tác giả: codefly.vn
  • Đánh giá: 4 ⭐ ( 4008 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Mảng trong JavaScript | JS ARRAY

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 6535 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu về Mảng (Hay còn gọi là Array), cách tạo và thao tác với Mảng trong JavaScript.

Mảng trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 4 ⭐ ( 8626 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở phần hằng và biến trong javascript mình cũng có nói qua về cách khai báo mảng trong javascript rồi. Nhưng đó mới chỉ là mức độ khai báo còn sử dụng thì mình chưa nói, nên bài này mình sẽ giới thiệu lại với mọi người về mảng trong javascript một cách chi tiết hơn.

Bản đồ mảng JavaScript ()

  • Tác giả: vi.wiki-base.com
  • Đánh giá: 5 ⭐ ( 2141 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Mảng trong JavaScript là gì?

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 4 ⭐ ( 3384 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có đang sử dụng mảng trong JavaScript không? Mảng trong JavaScript, hay còn gọi là kiểu mảng trong JavaScript rất tiện lợi khi chúng ta cần xử lý một lượng lớn dữ liệu. Hãy cùng tìm hiểu mảng tron

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách làm tròn số (Số nguyên, Số thập phân) trong PHP với hàm round () - php làm tròn đến một số thập phân

By ads_php