Trong bài này chúng ta sẽ tìm hiểu hàm map trong javascript, đây là hàm dùng để lặp qua các phần tử của mảng và cho phép xử lý giá trị của phần tử đó Show
Nội dung chính Hiển thị
 Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức. Bản đồ Javascript là một hàm dành cho các đối tượng mảng trong javascript, hàm này có công dụng tương tự như vòng lăp forEach Hàm map() sẽ lặp qua từng phần tử của mảng, tham số truyền vào là một hàm ẩn danh. Hàm nặc danh sẽ có một tham số truyền vào và đó chính là phần tử của mỗi vòng lặp, bên trong hàm ẩn danh sẽ có lệnh trả về một giá trị và giá trị này sẽ thay thế cho phần tử đó 1. Cú pháp map trong javascriptcú pháp. Cú pháp chung của hàm map() Bài viết này đã được đăng tại [free tuts. bọc lưới] array.map(function(item){
// item chính là phần tử đang lặp
return item; // giá trị trả về sẽ thay thế cho giá trị ban đầu của phần tử
});Giá trị trả về của hàm map trong js là một mảng mới, với số lượng phần tử bằng với mảng cũ, nhưng giá trị của các phần tử thì được quyết định bởi lệnh return của hàm map Chúng ta sẽ bắt đầu bằng một ví dụ khá cơ bản, đó là lặp và in các phần tử trong mảng var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});Kết quả freetuts.net techtuts.net simpletutorials.org 2. Hàm map with tham số là arrow functionAt ví dụ trên mình đã truyền vào một chức năng ẩn danh. Tuy nhiên, bạn hoàn toàn có thể sử dụng chức năng mũi tên trong es6 để truyền vào bản đồ tham số của hàm Như ví dụ ở phần 1 thì mình sẽ viết lại như sau var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map((item) => {
console.log(item);
});Kết quả không khác so với ví dụ trên 3. Cách sử dụng hàm map trong javascriptChúng ta sẽ giải một bài toán như sau. Hãy viết chương trình thay đổi gấp đôi giá trị của các phần tử trong mảng dưới đây var numbers = [5, 10, 20, 22, 60]; Thực hiện bài này bạn hoàn toàn có thể sử dụng vòng lặp for, vòng lặp trong khi hoặc một vòng lặp bất kỳ. Tuy nhiên, nếu bạn sử dụng hàm map thì bài toán sẽ trở nên đơn giản hơn rất nhiều Cách 1. Giải thích bằng hàm map as after var numbers = [5, 10, 20, 22, 60];
var new_number = numbers.map(function(item){
return item * 2; // nhân đôi giá trị
});
console.log(new_number);
// Kết quả: [10, 20, 40, 44, 120]Như bạn thấy, mảng new_number có giá trị mới gấp đôi với giá trị của mảng cũ cách 2. Use loop for Sau đây là giải thích cách sử dụng vòng lặp, và mình sẽ sử dụng vòng lặp cho var numbers = [5, 10, 20, 22, 60];
for (var i = 0; i < numbers.lenght; i++){
numbers[i] = numbers[i] * 2;
}
console.log(numbers);
// Kết quả: [10, 20, 40, 44, 120]4. Lời kếtTrên là cú pháp và cách sử dụng bản đồ hàm trong javascript. Bạn phải lưu ý rằng hàm này chỉ được sử dụng để lặp qua các phần tử của mảng, bởi bản đồ là một phương thức của mảng đối tượng Nếu bạn muốn lặp qua một đối tượng thì hãy sử dụng vòng lặp forEach trong javascript để thay thế nhé Nội dung bài viết Video learning setting per dayThông thường thì Array. nguyên mẫu. map will support Array, vậy nếu là một đối tượng thì sẽ sử dụng map như thế nào? Bài viết nằm trong sê-ri. mẹo javascript Rất đơn giản, đừng tưởng cao siêu hay đi tìm giải pháp nào trên google. Chỉ suy nghĩ một chút là ra, đó là làm sao convert object thành Array là ok thôi. Xem ví dụ var myObject = { 'a': 1, 'b': 2, 'c': 3 }
//convert to Array
myObject = Object.keys(myObject);
//Sau đó sử map như một Array.
Object.keys(myObject).map(function(key, index) {
myObject[key] *= 2;
});
console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }javascript cho đối tượngNhưng bạn có thể dễ dàng lặp lại một đối tượng bằng cách sử dụng Nghe qua thì Map có vẻ giống với object bình thường. Nhưng không phải tự nhiên mà người ta tạo thêm Map data type Thực tế, Bản đồ có những đặc điểm riêng biệt so với đối tượng thông thường. Sau đây, mình cùng tìm hiểu về Map trong JavaScript nhé Bản đồ trong JavaScript là gì?Nói một cách đầy đủ, Bản đồ trong JavaScript là cấu trúc dữ liệu cho phép lưu trữ dữ liệu theo kiểu khóa-giá trị, tương tự như đối tượng. Tuy nhiên, chúng khác nhau ở chỗ là
để tránh hiểu nhầm, mỗi khi mình dùng từ đối tượng thì bạn hiểu đó là đối tượng thông thường mà từ trước đến giờ bạn vẫn sử dụng chứ không phải Map ________số 8 Khởi tạo Map trong JavaScriptCú pháp khởi tạo Map trong JavaScript là You can transfer into a iterable object to start Map. Khi đó, mỗi phần tử của đối tượng lặp sẽ tương ứng với một phần tử của Bản đồ Dĩ nhiên, tham số var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});05 không bắt buộc. Khi bạn không truyền vào var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});05, Bản đồ sẽ trống và không có phần tử nào
A number ví dụ
Dựa vào các đặc điểm nêu trên, mình có thể khởi tạo Map trong JavaScript theo các cách sau đây Khởi tạo Bản đồ trốngĐể khởi tạo Bản đồ trống, bạn chỉ cần không truyền tham số để khởi động hàm var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});0Khởi tạo Map from arrayMảng hợp lệ để khởi tạo Bản đồ là các phần tử của mảng phải là một mảng hai phần tử var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});5Khởi tạo Map từ var domain = [ "freetuts.net", "techtuts.net", "simpletutorials.org" ]; domain.map(function(item){ console.log(item); });56Đối số đối tượng là đối tượng có sẵn trong hàm, được sử dụng để lưu trữ mảng tham số truyền vào freetuts.net techtuts.net simpletutorials.org4 Khởi tạo Bản đồ từ Bản đồYou could start Map from a Another Map freetuts.net techtuts.net simpletutorials.org5 Khởi tạo Map từ SetNgoài ra, bạn có thể khởi tạo Map từ Set freetuts.net techtuts.net simpletutorials.org6 Trên đây là một số cách để khởi động Bản đồ trong JavaScript. Tiếp theo, mình sẽ tìm hiểu về cách thêm phần tử vào Bản đồ Thêm phần tử vào Bản đồĐể thêm phần tử vào Bản đồ trong JavaScript, bạn có thể sử dụng phương thức var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});57, với cú phápfreetuts.net techtuts.net simpletutorials.org8 Phương thức này gán giá trị var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});58 cho khóa var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 bên trong Bản đồIf _______159 is not gone at, Map create new section tử với var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 tương ứng. Ngược lại, nếu var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 đã tồn tại, Bản đồ sẽ gán giá trị mới cho nóVấn đề làm sao biết được var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 đã tồn tại hay chưa?Bản đồ sử dụng thuật toán SameValueZero để so sánh giá trị của các khóa với nhau Thuật toán SameValueZero về cơ bản giống với việc sử dụng toán tử freetuts.net techtuts.net simpletutorials.org44 để so sánh. Only other is SameValueZero coi freetuts.net techtuts.net simpletutorials.org45 là giống nhau, mặc dù freetuts.net techtuts.net simpletutorials.org46 là freetuts.net techtuts.net simpletutorials.org47 Ví dụ var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map((item) => {
console.log(item);
});9Khi sử dụng toán tử so sánh bằng nghiêm trọng freetuts.net techtuts.net simpletutorials.org44 thì freetuts.net techtuts.net simpletutorials.org49 là freetuts.net techtuts.net simpletutorials.org50. Vì vậy, Map on tồn tại 2 cặp phần tử với key là freetuts.net techtuts.net simpletutorials.org51 với giá trị lần cuối là var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});54 và freetuts.net techtuts.net simpletutorials.org53 Ngoài ra, phương thức var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});57 còn trả về đối tượng chính Bản đồ. Nên mình có thể áp dụng kỹ thuật Method Chaining ở đây, sẽ giúp code trở nên ngắn gọn hơnĐoạn mã trên có thể trở nên gọn gàng hơn bằng cách var numbers = [5, 10, 20, 22, 60];7 Get the value of the element in MapĐể lấy var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});58 tương ứng với bản đồ của var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 trong JavaScript, bạn có thể sử dụng phương thức freetuts.net techtuts.net simpletutorials.org57 như sau If var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 tồn tại trong Map thì phương thức freetuts.net techtuts.net simpletutorials.org57 trả về var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});58 tương ứng, ngược lại thì trả về freetuts.net techtuts.net simpletutorials.org61 Lấy số lượng phần tử trong Bản đồĐể lấy số lượng các phần tử của Bản đồ trong JavaScript, bạn sử dụng phương thức freetuts.net techtuts.net simpletutorials.org62, ví dụ: Kiểm tra phần tử tồn tại trong Bản đồĐể kiểm tra xem một phần tử đã tồn tại trong Bản đồ hay chưa - thực chất là kiểm tra xem giá trị var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 đã tồn tại hay chưa, bạn có thể sử dụng phương thức freetuts.net techtuts.net simpletutorials.org64 như sau If in Map tồn tại var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 thì phương thức freetuts.net techtuts.net simpletutorials.org66 trả về freetuts.net techtuts.net simpletutorials.org47, ngược lại thì trả về freetuts.net techtuts.net simpletutorials.org50
Xoa một phần tử trong Bản đồĐể xóa một phần tử trong Bản đồ, bạn sử dụng phương thức freetuts.net techtuts.net simpletutorials.org69 Nếu trong Bản đồ tồn tại ở var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 thì phần tử ứng với var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 sẽ bị xóa khỏi Bản đồ. Phương thức freetuts.net techtuts.net simpletutorials.org82 trả về freetuts.net techtuts.net simpletutorials.org47 nếu var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 tồn tại, ngược lại thì trả về freetuts.net techtuts.net simpletutorials.org50 Xóa tất cả các phần tử trong Bản đồPhía trên là cách xóa một phần tử khỏi Bản đồ. Để xóa tất cả các phần tử khỏi Bản đồ, bạn sử dụng phương thức freetuts.net techtuts.net simpletutorials.org86 Duyệt qua các phần tử trong Bản đồSau đây là các cách để duyệt qua các phần tử của Bản đồ trong JavaScript Sử dụng freetuts.net techtuts.net simpletutorials.org87Bản đồ là đối tượng có thể lặp lại. Do đó, bạn có thể sử dụng freetuts.net techtuts.net simpletutorials.org87 để duyệt qua các phần tử của Bản đồ Sử dụng phương thức freetuts.net techtuts.net simpletutorials.org89Bạn cũng có thể sử dụng freetuts.net techtuts.net simpletutorials.org89 để duyệt qua các phần tử của bản đồ như sau Callback function you chú ý
Cú pháp này tương ứng với forEach khi truy quét mảng ► Phương thức var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map((item) => {
console.log(item);
});94Trả về một đối tượng lặp có thể chứa giá trị var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});59 của các phần tử theo thứ tự chèn vàovar domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});00► Phương thức var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map((item) => {
console.log(item);
});96 trả về một đối tượng có thể lặp lại bao gồm giá trị var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});58 của các phần tử theo thứ tự chèn vàovar domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});01► Phương thức var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map((item) => {
console.log(item);
});98 trả về một đối tượng có thể lặp lại mà mỗi phần tử tương ứng là một mảng var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});07var domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});02Move Map to ArraySau đây là một số cách chuyển map trong JavaScript thành mảng sử dụng cú pháp spread Chuyển phím ánh xạ thành mảngvar domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});03Chuyển giá trị ánh xạ thành mảngvar domain = [
"freetuts.net",
"techtuts.net",
"simpletutorials.org"
];
domain.map(function(item){
console.log(item);
});04Tổng kếtBản đồ trong JavaScript là một loại đối tượng được sử dụng để lưu trữ dữ liệu theo kiểu khóa-giá trị, nhưng đối tượng Bản đồ khác ở một số điểm sau |
