访问for-of循环内的ES6数组元素索引

我们可以使用for-of循环访问数组元素:

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

我如何修改这段代码来访问当前索引?我想使用for-of语法来实现这一点,既不是forEach也不是for-in。

313751 次浏览

使用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()) {


}

在html/js上下文中,在现代浏览器中,对于数组以外的其他可迭代对象,我们也可以使用[iterable].entries():

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


element.innerHTML = '#' + index


}

对于那些使用的对象不是Array甚至不是类似数组的对象,你可以很容易地构建自己的可迭代对象,因此你仍然可以使用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))

在这个花哨的新本地函数的世界里,我们有时会忘记基本的东西。

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

干净,高效,你仍然可以break循环。奖金!你也可以用i--!

额外注意:如果你在循环中经常使用这个值,你可能希望在循环顶部执行const value = arr[i];,以获得一个简单易读的引用。

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

es6 for...in

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

另一种方法可以使用Array.prototype.forEach() as

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

如果你需要指数,你也可以自己处理索引,如果你需要关键,它将不起作用。

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


i++;
}

您还可以使用JavaScript来解决您的问题

iterate(item, index) {
console.log(`${item} has index ${index}`);
//Do what you want...
}


readJsonList() {
jsonList.forEach(this.iterate);
//it could be any array list.
}   

只需在循环之前创建一个变量并分配一个整数值。

let index = 0;

然后在循环范围内使用加法赋值算子

index += 1;

就是这样,检查下面的代码片段示例。

let index = 0;
for (const j of [1, 2, 3, 4, 5]) {
console.log('index ',index);
index += 1;
}

你可以尝试使用里面的indexOf方法。循环

let arrData = [15, 64, 78]
for (const data of arrData) {
console.log("data value", data, "index of data ", arrData.indexOf(data));
}