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"]
0let 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ạnTrong 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ảnPhươ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ọngVớ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únglet firstNames = ["super", "spider", "ant", "iron"]
let lastName = "man";
let fullNames = firstNames.map[firstName => firstName + lastName];
console.log[fullNames];
// ["superman", "spiderman", "antman", "ironman"]
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ìnhlet 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"]
2Cá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"]
3Cá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"]
4Cá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"]
5Cá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"]
6Cá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"]
20let 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"]
8Cá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 talet 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"]
1Cá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"]
6kế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ảngNó 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
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