for-of 루프 내에서 ES6 배열 요소 인덱스에 액세스

for-of 루프를 사용하여 배열 요소에 액세스 할 수 있습니다.

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

이 코드를 수정하여 현재 색인에도 액세스하려면 어떻게해야합니까? forEach 또는 for-in이 아닌 for-of 구문을 사용하여 이것을 달성하고 싶습니다.

사용 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 컨텍스트, 최신 브라우저에서 Arrays 이외의 반복 가능한 객체와 함께 [Iterable] .entries ()를 사용할 수도 있습니다.

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

    element.innerHTML = '#' + index

}

A의 for..of루프 우리는이를 통해 달성 할 수있다 array.entries(). array.entries새로운 Array 반복자 객체를 반환합니다. 반복자 객체는 해당 시퀀스 내에서 현재 위치를 추적하면서 한 번에 반복 가능한 항목에서 항목에 액세스하는 방법을 알고 있습니다.

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루프는 기본적으로 반복 가능한 소비하고 (후드 반복기를 사용하는) 모든 요소를 순환 구성체이다. 우리는 이것을 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이 방법에는 몇 가지 결함이 있으므로 과일을 사용하십시오.