เข้าถึงดัชนีองค์ประกอบอาเรย์ ES6 ภายในวงรอบ

เราสามารถเข้าถึงองค์ประกอบต่างๆโดยใช้ for-of loop:

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

ฉันจะแก้ไขรหัสนี้เพื่อเข้าถึงดัชนีปัจจุบันได้อย่างไร ฉันต้องการที่จะบรรลุสิ่งนี้โดยใช้สำหรับไวยากรณ์ของทั้งสำหรับแต่ละหรือใน

การใช้Array.prototype.keys:

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

หากคุณต้องการเข้าถึงทั้งกุญแจและค่าคุณสามารถใช้Array.prototype.entries()กับการทำลายล้าง :

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

Array#entries ส่งคืนดัชนีและค่าหากคุณต้องการทั้งสอง:

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

}

ในโลกของฟังก์ชั่นพื้นเมืองใหม่ที่ฉูดฉาดบางครั้งเราลืมพื้นฐาน

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

สะอาดมีประสิทธิภาพและคุณยังสามารถbreakวนซ้ำได้ โบนัส! คุณสามารถเริ่มจากจุดสิ้นสุดและย้อนกลับไปด้วยi--!

หมายเหตุเพิ่มเติม: หากคุณใช้ค่าจำนวนมากในลูปคุณอาจต้องการทำconst value = arr[i];ที่ด้านบนของลูปเพื่อการอ้างอิงที่ง่ายและอ่านได้

ในบริบท html / js บนเบราว์เซอร์ที่ทันสมัยพร้อมกับวัตถุที่ซ้ำได้อื่น ๆ นอกเหนือจากอาร์เรย์เรายังสามารถใช้ [Iterable] .entries ():

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

    element.innerHTML = '#' + index

}

ในวงเราสามารถบรรลุนี้ผ่านทางfor..of ส่งคืนวัตถุ Array iterator ใหม่ วัตถุตัววนซ้ำรู้วิธีเข้าถึงรายการจากตัววนซ้ำในขณะเดียวกันก็คอยติดตามตำแหน่งปัจจุบันภายในลำดับนั้นarray.entries()array.entries

เมื่อnext()วิธีการถูกเรียกในคู่ค่าคีย์ตัววนซ้ำจะถูกสร้างขึ้น ในค่าคีย์เหล่านี้จับคู่ดัชนีอาร์เรย์คือคีย์และรายการอาร์เรย์คือค่า

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

การfor..ofวนซ้ำนั้นเป็นโครงสร้างที่สิ้นเปลือง iterable และวนรอบองค์ประกอบทั้งหมด (โดยใช้ iterator ใต้ฝากระโปรง) เราสามารถรวมสิ่งนี้เข้ากับarray.entries()วิธีดังต่อไปนี้:

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

นอกจากนี้คุณยังสามารถจัดการกับดัชนีตัวเองถ้าคุณจำเป็นต้องมีดัชนีก็จะไม่ทำงานถ้าคุณต้องการที่สำคัญ

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

  i++;
}

สำหรับผู้ที่ใช้ออบเจ็กต์ที่ไม่Arrayเหมือนอาเรย์หรือคุณสามารถสร้าง iterable ของคุณเองได้อย่างง่ายดายดังนั้นคุณยังสามารถใช้for ofสำหรับสิ่งlocalStorageที่มีเพียง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;
}

จากนั้นให้ป้อนตัวเลข:

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

วิธีการอื่นอาจใช้Array.prototype.forEach()เป็น

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 วนรอบอาร์เรย์ในขณะที่คุณสมบัติ indexof รับค่าของดัชนีที่ตรงกับอาร์เรย์ PD วิธีนี้มีข้อบกพร่องบางอย่างที่มีตัวเลขดังนั้นใช้ผลไม้