es6 for of怎么获取index

Posted 2023-03-22

如果是 Map 的 for ... of 就比较简单：

for ( const [ key, value ] of map ) 
    console.log( key, value );

但是你问的应该是数组。

数组的 for ... of 获取不了 index，你需要用 forEach

var arr = [ 'a', 'b', 'c' ];
arr.forEach( ( item, i ) => 
    console.log( item, i );
 );

但是其实也可以把 Array 想办法转成 Map，

new Map( arr.map( ( item, i ) => [ i, item ] ) )

在一行代码里面实现for ... of：

var arr = [ 'a', 'b', 'c' ];

for( let [ i, item ] of new Map( arr.map( ( item, i ) => [ i, item ] ) ) ) 

    console.log( i, item );

参考技术A

for of直接是拿不到数组的index,可以利用entries()方法将数组转换为可迭代的对象entries();注意第一个参数的是index,第二个是数组单元;同理有keys()，values()方法;

for (let [index, current] of arr.entries())     

    console.log(index, cur);

参考技术B

正解：

for (let [index, cur] of arr.entries()) 
console.log(index, cur);

ES6中for...of循环与其他遍历语法的比较

以数组为例，JavaScript 提供多种遍历语法。
最原始的写法就是for循环。

for (var index = 0; index < myArray.length; index++) 
  console.log(myArray[index]);

这种写法比较麻烦，因此数组提供内置的forEach方法。

myArray.forEach(function (value) 
  console.log(value);
);

这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。

for…in循环可以遍历数组的键名。

for (var index in myArray) 
  console.log(myArray[index]);

for…in循环有几个缺点。

1. 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。

2. for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。

3. 某些情况下，for...in循环会以任意顺序遍历键名。

总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

for…of循环相比上面几种做法，有一些显著的优点。

for (let value of myArray) 
  console.log(value);

1. 有着同for…in一样的简洁语法，但是没有for...in那些缺点。

2. 不同于forEach方法，它可以与break、continue和return配合使用。

提供了遍历所有数据结构的统一操作接口。

下面是一个使用 break 语句，跳出for…of循环的例子。

for (var n of fibonacci) 
  if (n > 1000)
    break;
  console.log(n);

上面的例子，会输出斐波纳契数列小于等于 1000 的项。如果当前项大于 1000，就会使用break语句跳出for…of循环。

总结：

for...in 适用于遍历对象
for...of 适用于遍历数组