Tôi có thể sử dụng tiếp tục trong bản đồ javascript không?

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

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

1 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ĩ về vòng lặp 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 từng phần tử

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

Hàm gọi lại có ba tham số

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

Nếu bạn là người mới bắt đầu đang gặp khó khăn trong việc hiểu cách sử dụng phương pháp

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0 hoặc chính xác 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 phương pháp

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0 và minh họa cách thức hoạt động của nó với một số ví dụ đơn giản

Phương thức map() hoạt động như thế nào trong JavaScript

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 đang chờ được tiêm phòng. Điều này có nghĩa là họ 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ĩ làm điều này bằng cách lặp qua dòng. Ở một đầu, có một nhóm người chưa được tiêm phòng. Bác sĩ bắt từng người trong số họ, tiêm vắc-xin cho họ và đưa họ trở lại một dòng người được tiêm phòng mới

Ở một đầu, có một mảng (A) bạn muốn thao tác trên đó.

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0 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 từng 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ụ về Avengers

Để minh họa cách hoạt động của

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0 trong JavaScript, 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à các tên trong danh sách này không đầy đủ – chúng thiếu một hậu tố quan trọng

Với

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0, chúng ta có thể lấy tất cả các tên trong mảng và thêm hậu tố "man" cho từng tên trong số chúng

let firstNames = ["super", "spider", "ant", "iron"]
let lastName = "man";

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

console.log(fullNames);

// ["superman", "spiderman", "antman", "ironman"]

MÃ HÌNH ẢNH

Còn những người phụ nữ thì sao?

Xin lỗi, lỗi của tôi. 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ởi một giá trị duy nhất, chỉ số của nó (hoặc vị trí trong mảng). Mục đầu tiên sẽ có chỉ số là

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

7, mục thứ hai có chỉ số là

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

8, v.v.

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

Vì

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0 cũng lấy chỉ mục của mục 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ỉ mục 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ố "phụ nữ" cho mục đầu tiên trên mảng của mình

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

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

Ngoài giá trị được lặp đi lặp lại, bản đồ cũng chiếm 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 của chúng tôi trong mảng, chúng tôi có thể làm điều này

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

2KẾT QUẢ

Cách nhân tất cả các mục trong mảng với 2

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

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

3

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 firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

4

Cách đổ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 sang loại số

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

5

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

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

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

6

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 thực hiện gần như chính xác điều tương tự, chỉ trong trường hợp này, chúng tôi truy cập thuộc tính

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

20

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

8

Cách tách một hàm

Thay vì định nghĩa một hàm trực tiếp bên trong

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0, chúng ta có thể định nghĩa hàm bên ngoài và sau đó gọi nó bên trong hàm

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0 của chúng ta

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

1

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

Trước đó tôi đã nói rằng trên mỗi lần lặp lại, phương thức

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0 sẽ 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ố

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

24

Đối số

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

25 đại diện cho mảng mục tiêu được lặp lại, cùng với toàn bộ nội dung của nó. 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 tham số

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

25 để 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 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ỉ cần trả lại nó

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

6

kết thúc

Phương thức

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

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

0 được giới thiệu trong ES6. Với phương pháp 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 đơn lẻ bên trong một bộ sưu tập mảng

Nó nhận một chức năng gọi lại mà nó gọi cho mọi phần tử mới mà nó lặp lại

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 có một cái 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

P/S. Nếu bạn đang học JavaScript, tôi đã tạo một Sách điện tử dạy 50 chủ đề về JavaScript bằng các ghi chú kỹ thuật số được vẽ bằng tay. Kiểm tra nó ra ở đây

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Kingsley Ubah

Nhà phát triển web. Nhà văn kỹ thuật. Nhà giáo dục trực tuyến

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Chúng tôi có thể sử dụng tiếp tục trong JavaScript bản đồ không?

Chúng ta có thể sử dụng break trong bản đồ không?

Bản đồ JavaScript có cần trả lại không?

Bản đồ hay vòng lặp nào tốt hơn trong JavaScript?