在for-of循环中访问ES6数组元素索引

2020/10/11 13:41 · javascript ·  · 0评论

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

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

如何修改此代码也可以访问当前索引?我想使用for-of语法来实现此目的,无论是forEach还是for-in。

用途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];在循环的顶部进行操作,以获取易于阅读的参考。

在一个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++;
}

在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))

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此方法在数字上存在一些缺陷,因此请使用水果

本文地址:http://javascript.askforanswer.com/zaifor-ofxunhuanzhongfangwenes6shuzuyuansusuoyin.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!