Truy cập vào chỉ mục phần tử mảng ES6 bên trong vòng lặp for-of

Chúng ta có thể truy cập các phần tử mảng bằng cách sử dụng vòng lặp for:

for (const j of [1, 2, 3, 4, 5]) {
  console.log(j);
}

Làm thế nào tôi có thể sửa đổi mã này để truy cập vào chỉ mục hiện tại quá? Tôi muốn đạt được điều này bằng cách sử dụng cú pháp for-of, không forEach hay for-in.

Sử dụng Array.prototype.keys:

for (const index of [1, 2, 3, 4, 5].keys()) {
  console.log(index);
}

Nếu bạn muốn truy cập cả khóa và giá trị, bạn có thể sử dụng Array.prototype.entries()với hàm hủy :

for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
  console.log(index, value);
}

Array#entries trả về chỉ mục và giá trị, nếu bạn cần cả hai:

for (let [index, value] of array.entries()) {

}

Trong thế giới của các chức năng bản địa mới hào nhoáng này, đôi khi chúng ta quên mất những điều cơ bản.

for (let i = 0; i < arr.length; i++) {
    console.log('index:', i, 'element:', arr[i]);
}

Sạch sẽ, hiệu quả, và bạn vẫn có thể breakvòng lặp. Tặng kem! Bạn cũng có thể bắt đầu từ cuối và đi ngược với i--!

Lưu ý bổ sung: Nếu bạn đang sử dụng giá trị rất nhiều trong vòng lặp, bạn có thể muốn thực hiện const value = arr[i];ở đầu vòng lặp để tham khảo dễ đọc, dễ đọc.

trong ngữ cảnh html / js, trên các trình duyệt hiện đại, với các đối tượng có thể lặp khác ngoài Mảng, chúng ta cũng có thể sử dụng [Iterable] .entries ():

for(let [index, element] of document.querySelectorAll('div').entries()) {

    element.innerHTML = '#' + index

}

Trong một for..ofvòng lặp, chúng ta có thể đạt được điều này thông qua array.entries(). array.entriestrả về một đối tượng iterator Array mới. Một đối tượng iterator biết cách truy cập các mục từ một đối tượng lặp lại tại thời điểm đó, trong khi theo dõi vị trí hiện tại của nó trong chuỗi đó.

Khi next()phương thức được gọi trên các cặp giá trị khóa lặp được tạo. Trong các cặp giá trị khóa này, chỉ số mảng là khóa và mục mảng là giá trị.

let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']

Một for..ofvòng lặp về cơ bản là một cấu trúc tiêu thụ một vòng lặp và các vòng lặp thông qua tất cả các phần tử (sử dụng một trình vòng lặp dưới mui xe). Chúng ta có thể kết hợp điều này với array.entries()cách thức sau:

array = ['a', 'b', 'c'];

for (let indexValue of array.entries()) {
  console.log(indexValue);
}


// we can use array destructuring to conveniently
// store the index and value in variables
for (let [index, value] of array.entries()) {
   console.log(index, value);
}

Bạn cũng có thể tự xử lý chỉ mục nếu Bạn cần chỉ mục , nó sẽ không hoạt động nếu Bạn cần khóa .

let i = 0;
for (const item of iterableItems) {
  // do something with index
  console.log(i);

  i++;
}

Đối với những người sử dụng các đối tượng không phải là một Arrayhoặc thậm chí giống như mảng, bạn có thể xây dựng vòng lặp của riêng mình một cách dễ dàng để bạn vẫn có thể sử dụng for ofcho những thứ localStoragethực sự chỉ có length:

function indexerator(length) {
    var output = new Object();
    var index = 0;
    output[Symbol.iterator] = function() {
        return {next:function() {
            return (index < length) ? {value:index++} : {done:true};
        }};
    };
    return output;
}

Sau đó, chỉ cần cho nó ăn một số:

for (let index of indexerator(localStorage.length))
    console.log(localStorage.key(index))

es6 for...in

for(const index in [15, 64, 78]) {                        
    console.log(index);
}

Một cách tiếp cận khác có thể được sử dụng Array.prototype.forEach()như

Array.from({
  length: 5
}, () => Math.floor(Math.random() * 5)).forEach((val, index) => {
  console.log(val, index)
})

var fruits = ["apple","pear","peach"];
for (fruit of fruits) {
    console.log(fruits.indexOf(fruit));
    //it shows the index of every fruit from fruits
}

vòng lặp for đi ngang qua mảng, trong khi thuộc tính indexof lấy giá trị của chỉ số khớp với mảng. PD phương pháp này có một số sai sót với số, vì vậy sử dụng trái cây