JavaScript: Sự khác biệt giữa .forEach () và .map ()

Tôi biết rằng có rất nhiều chủ đề như thế này. Và tôi biết những điều cơ bản: .forEach()hoạt động trên mảng gốc và mảng .map()mới.

Trong trường hợp của tôi:

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

Và đây là đầu ra:

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

Tôi không hiểu tại sao lại sử dụng practicegiá trị thay đổi của bthành undefined.
Tôi xin lỗi nếu đây là câu hỏi ngớ ngẩn, nhưng tôi khá mới trong ngôn ngữ này và những câu trả lời tôi tìm thấy cho đến nay không làm tôi hài lòng.

Chúng không phải là một và giống nhau. Hãy để tôi giải thích sự khác biệt.

forEach: Điều này lặp lại trên một danh sách và áp dụng một số thao tác có tác dụng phụ cho từng thành viên trong danh sách (ví dụ: lưu mọi mục danh sách vào cơ sở dữ liệu)

map: Thao tác này lặp qua một danh sách, chuyển đổi từng thành viên của danh sách đó và trả về một danh sách khác có cùng kích thước với các thành viên đã chuyển đổi (ví dụ: chuyển đổi danh sách chuỗi thành chữ hoa)

Người giới thiệu

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach "Thực thi một hàm được cung cấp một lần cho mỗi phần tử mảng."

• Array.map "Tạo một mảng mới với kết quả của việc gọi một hàm được cung cấp trên mọi phần tử trong mảng này."

Vì vậy, forEachkhông thực sự trả lại bất cứ điều gì. Nó chỉ cần gọi hàm cho từng phần tử mảng và sau đó là xong. Vì vậy, bất cứ thứ gì bạn trả về bên trong hàm được gọi đó chỉ đơn giản là bị loại bỏ.

Mặt khác, maptương tự sẽ gọi hàm cho từng phần tử mảng nhưng thay vì loại bỏ giá trị trả về của nó, nó sẽ nắm bắt nó và xây dựng một mảng mới gồm các giá trị trả về đó.

Điều này cũng có nghĩa là bạn có thể sử dụng mapbất cứ nơi nào bạn đang sử dụng forEachnhưng bạn vẫn không nên làm như vậy để không thu thập các giá trị trả về mà không có mục đích gì. Sẽ hiệu quả hơn nếu bạn không thu thập chúng nếu bạn không cần chúng.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | bản đồ |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Chức năng | Thực hiện thao tác đã cho trên mỗi | Thực hiện "biến đổi" đã cho trên |
| | phần tử của mảng | "bản sao" của mỗi phần tử |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Giá trị trả lại | Trả về không xác định | Trả về mảng mới với tranformed |
| | | phần tử rời khỏi mảng ban đầu |
| | | không thay đổi |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Ưa thích | Biểu diễn không biến hình như | Lấy mảng chứa đầu ra của |
| kịch bản sử dụng | xử lý trên từng phần tử. | một số xử lý được thực hiện trên mỗi phần tử |
| và ví dụ | | của mảng. |
| | Ví dụ, lưu tất cả các phần tử trong | |
| | cơ sở dữ liệu | Ví dụ, thu được mảng |
| | | độ dài của mỗi chuỗi trong |
| | | mảng |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

Sự khác biệt chính mà bạn cần biết là .map()trả về một mảng mới trong khi .forEach()không. Đó là lý do tại sao bạn thấy rằng sự khác biệt trong đầu ra. .forEach()chỉ hoạt động trên mọi giá trị trong mảng.

Đọc lên:

• Array.prototype.forEach()- JavaScript | MDN
• Array.prototype.map()- JavaScript | MDN

Bạn cũng có thể muốn xem: - Array.prototype.every()- JavaScript | MDN

forEach: Nếu bạn muốn thực hiện một hành động trên các phần tử của Mảng và nó giống như cách bạn sử dụng vòng lặp for. Kết quả của phương pháp này không cung cấp cho chúng ta một đầu ra mua mà chỉ lặp qua các phần tử.

map: Nếu bạn muốn thực hiện một hành động trên các phần tử của một mảng và bạn cũng muốn lưu trữ đầu ra của hành động của mình vào một Mảng. Điều này tương tự với vòng lặp for trong một hàm trả về kết quả sau mỗi lần lặp.

Hi vọng điêu nay co ich.

Sự khác biệt nằm ở những gì họ trả lại. Sau khi thực hiện:

arr.map()

trả về một mảng các phần tử là kết quả của hàm đã xử lý; trong khi:

arr.forEach()

trả về không xác định.

Phân tích hiệu suất Các vòng lặp For hoạt động nhanh hơn ánh xạ hoặc foreach khi số phần tử trong một mảng tăng lên.

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.push(i)
}

console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');


console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');

console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;

}
console.timeEnd('for');

Sự khác biệt giữa Foreach và bản đồ:

Map () : Nếu bạn sử dụng map thì map có thể trả về mảng mới bằng cách lặp lại mảng chính.

Foreach () : Nếu bạn sử dụng Foreach thì nó không thể trả về bất kỳ thứ gì cho mỗi mảng chính có thể lặp lại.

useFul link : sử dụng liên kết này để hiểu sự khác biệt

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

Một điều cần chỉ ra là foreach bỏ qua các giá trị chưa được khởi tạo trong khi map thì không.

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];

Sự khác biệt giữa forEach () & map ()

forEach () chỉ lặp qua các phần tử. Nó loại bỏ các giá trị trả về và luôn trả về không xác định, kết quả của phương thức này không cung cấp cho chúng ta kết quả đầu ra.

map () lặp qua các phần tử cấp phát bộ nhớ và lưu trữ các giá trị trả về bằng cách lặp lại mảng chính

Thí dụ:

   var numbers = [2,3,5,7];

   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined

   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

map () nhanh hơn forEach ()

Bản đồ trả về ngầm định trong khi forEach thì không.

Đây là lý do tại sao khi bạn viết mã một ứng dụng JSX, bạn hầu như luôn sử dụng map thay vì forEach để hiển thị nội dung trong React .

forEach () :

trả về giá trị: không xác định

originalArray: sửa đổi sau khi gọi phương thức

map () :

trả về giá trị: Mảng mới được điền với các kết quả của việc gọi một hàm được cung cấp trên mọi phần tử trong mảng đang gọi

originalArray: không được sửa đổi sau khi gọi phương thức