Akses ke indeks elemen array ES6 di dalam for-of loop

Kita bisa mengakses elemen array menggunakan for-of loop:

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

Bagaimana saya bisa memodifikasi kode ini untuk mengakses indeks saat ini juga? Saya ingin mencapai ini menggunakan sintaks untuk, baik forEach maupun for-in.

Gunakan Array.prototype.keys:

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

Jika Anda ingin mengakses kunci dan nilainya, Anda dapat menggunakannya Array.prototype.entries()dengan merusak :

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

Array#entries mengembalikan indeks dan nilainya, jika Anda membutuhkan keduanya:

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

}

Dalam dunia fungsi asli baru yang mencolok ini, kita terkadang melupakan dasar-dasarnya.

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

Bersih, efisien, dan Anda masih bisa breakmengulang. Bonus! Anda juga bisa mulai dari akhir dan mundur dengan i--!

Catatan tambahan: Jika Anda banyak menggunakan nilai dalam loop, Anda mungkin ingin melakukannya const value = arr[i];di bagian atas loop untuk referensi yang mudah dibaca.

dalam konteks html / js, pada peramban modern, dengan objek lain yang dapat dihapus selain Array, kami juga dapat menggunakan [Iterable] .entries ():

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

    element.innerHTML = '#' + index

}

Dalam satu for..oflingkaran kita dapat mencapai ini melalui array.entries(). array.entriesmengembalikan objek iterator Array baru. Objek iterator tahu cara mengakses item dari item iterable pada saat itu, sambil melacak posisi saat ini dalam urutan itu.

Ketika next()metode ini dipanggil pada nilai kunci iterator, pasangan dihasilkan. Dalam pasangan nilai kunci ini indeks array adalah kunci dan item array adalah nilainya.

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

Sebuah for..ofloop pada dasarnya adalah sebuah konstruksi yang mengkonsumsi iterable dan loop melalui semua elemen (menggunakan iterator di bawah tenda). Kami dapat menggabungkan ini dengan array.entries()cara berikut:

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);
}

Anda juga dapat menangani indeks sendiri jika Anda memerlukan indeks , itu tidak akan berfungsi jika Anda membutuhkan kunci .

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

  i++;
}

Bagi mereka yang menggunakan objek yang bukan Arrayatau bahkan seperti array, Anda dapat membangun iterable Anda sendiri dengan mudah sehingga Anda masih dapat menggunakan for ofuntuk hal-hal seperti localStorageyang benar-benar hanya memiliki 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;
}

Maka cukup beri nomor:

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);
}

Pendekatan lain bisa menggunakan Array.prototype.forEach()sebagai

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
}

for for melewati larik array, sementara properti indexof mengambil nilai indeks yang cocok dengan larik. Metode PD ini memiliki beberapa kekurangan dengan angka, jadi gunakan buah-buahan