Làm tổ cho các vòng lặp trong JavaScript

Nếu bạn gặp khó khăn trong việc hiểu thử thách Nesting For Loops của freeCodeCamp, đừng lo lắng. Chúng tôi đã hỗ trợ bạn.

Trong vấn đề này, bạn phải hoàn thành multiplyAll() và lấy một mảng nhiều chiều làm đối số. Hãy nhớ rằng một mảng nhiều chiều, đôi khi được gọi là mảng 2D, chỉ là một mảng của các mảng, ví dụ: [[1,2], [3,4], [5,6]].

Trong trình chỉnh sửa bên phải, multiplyAll() được định nghĩa như sau:

function multiplyAll(arr) {
  var product = 1;
  // Only change code below this line

  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Bạn cần hoàn thành chức năng để nó nhân lên product biến theo từng số trong các mảng con của tham số arrđó là một mảng nhiều chiều.

Có rất nhiều cách khác nhau để giải quyết vấn đề này, nhưng chúng tôi sẽ tập trung vào phương pháp đơn giản nhất bằng cách sử dụng for vòng lặp.

thiết lập của bạn for vòng lặp

Bởi vì arr là một mảng nhiều chiều, bạn sẽ cần hai for các vòng lặp: một để lặp qua từng mảng của mảng con và một vòng lặp khác để lặp qua các phần tử trong mỗi mảng con.

Lặp qua các mảng bên trong

Để làm điều này, thiết lập một for vòng lặp giống như bạn đã thực hiện trong các thử thách trước:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Lưu ý rằng chúng tôi đang sử dụng let thay vì var cho vòng lặp và để khai báo product. Trong thử thách này, bạn sẽ không nhận thấy sự khác biệt giữa hai loại, nhưng nhìn chung, nên sử dụng ES6 const và let bất cứ khi nào bạn có thể. Bạn có thể đọc thêm về lý do tại sao trong bài viết này.

Bây giờ hãy ghi từng mảng con vào bảng điều khiển:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Bởi vì bạn đang gọi multiplyAll() với [[1,2],[3,4],[5,6,7]] ở phía dưới, bạn sẽ thấy như sau:

[ 1, 2 ]
[ 3, 4 ]
[ 5, 6, 7 ]

Lặp qua các phần tử trong mỗi mảng con

Bây giờ, bạn cần lặp qua từng số trong các mảng phụ mà bạn vừa đăng nhập vào bảng điều khiển.

Gỡ bỏ console.log(arr[i]); và tạo một cái khác for vòng lặp bên trong cái bạn vừa viết:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
      
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Hãy nhớ rằng, đối với vòng lặp bên trong, chúng ta cần kiểm tra .length của arr[i] từ arr[i] là một trong những mảng phụ mà chúng ta đã xem xét trước đó.

Bây giờ đăng nhập arr[i][j] vào bảng điều khiển để xem từng phần tử riêng lẻ:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
      console.log(arr[i][j]);
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

1
2
3
4
5
6
7

Cuối cùng, nhân product bởi mọi phần tử trong mỗi mảng con:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

nếu bạn đăng nhập product vào bảng điều khiển, bạn sẽ thấy câu trả lời đúng cho từng trường hợp thử nghiệm:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  console.log(product);
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

6  // [[1], [2], [3]]
5040  // [[1, 2], [3, 4], [5, 6, 7]]
54  // [[5, 1], [0.2, 4, 0.5], [3, 9]]

Xem kỹ hơn

Nếu bạn vẫn không chắc tại sao đoạn mã trên hoạt động, đừng lo lắng – bạn không đơn độc. Làm việc với các vòng lặp lồng nhau rất phức tạp và ngay cả những nhà phát triển có kinh nghiệm cũng có thể bị nhầm lẫn.

Trong những trường hợp như thế này, có thể hữu ích nếu bạn ghi lại nội dung nào đó chi tiết hơn vào bảng điều khiển. Quay lại mã của bạn và đăng nhập `Sub-array ${i}: ${arr[i]}` đến bàn điều khiển ngay trước bên trong for vòng:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    console.log(`Sub-array ${i}: ${arr[i]}`);
    for (let j = 0; j < arr[i].length; j++) {
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

ở bên ngoài for vòng lặp, mỗi lần lặp đi qua các mảng con trong arr. Bạn sẽ thấy điều này trong bảng điều khiển:

Sub-array 0: 1,2
Sub-array 1: 3,4
Sub-array 2: 5,6,7

Lưu ý rằng chúng tôi đang sử dụng chữ mẫu ở trên. `Sub-array ${i}: ${arr[i]}` giống như 'Sub-array ' + i + ': ' + arr[i]dễ viết hơn nhiều.

Bây giờ ở bên trong for vòng lặp, nhật ký `Element ${j}: ${arr[i][j]}` đến bảng điều khiển:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    console.log(`Sub-array ${i}: ${arr[i]}`);
    for (let j = 0; j < arr[i].length; j++) {
      console.log(`Element ${j}: ${arr[i][j]}`);
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Bên trong for vòng lặp đi qua từng phần tử trong mỗi mảng con (arr[i]), vì vậy bạn sẽ thấy điều này trong bảng điều khiển:

Sub-array 0: 1,2
Element 0: 1
Element 1: 2
Sub-array 1: 3,4
Element 0: 3
Element 1: 4
Sub-array 2: 5,6,7
Element 0: 5
Element 1: 6
Element 2: 7

Lần lặp đầu tiên của i lấy mảng con đầu tiên, [1, 2]. Sau đó, lần lặp đầu tiên của j đi qua từng phần tử trong mảng con đó:

// i is 0
arr[0] // [1, 2];

// j is 0
arr[0][0] // 1
// j is 1
arr[0][1] // 2

-----

// i is 1
arr[1] // [3, 4]

// j is 0
arr[1][0] // 3
// j is 1
arr[1][1] // 4

...

Ví dụ này khá đơn giản, nhưng arr[i][j] vẫn có thể khó hiểu nếu không ghi nhiều thứ vào bảng điều khiển.

Một cải tiến nhanh chóng mà chúng tôi có thể thực hiện là khai báo một subArray biến ở bên ngoài for vòng lặp và đặt nó bằng arr[i]:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    const subArray = arr[i];
    for (let j = 0; j < arr[i].length; j++) {
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Sau đó, chỉ cần thực hiện một vài chỉnh sửa mã để sử dụng cái mới subArray biến thay vì arr[i]:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    const subArray = arr[i];
    for (let j = 0; j < subArray.length; j++) {
      product *= subArray[j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Đó phải là mọi thứ bạn cần biết về mảng nhiều chiều và mảng lồng nhau for vòng lặp. Bây giờ hãy ra khỏi đó và lặp lại với những gì tốt nhất của họ!