JS数组遍历的for循环方法的应用分析

新的一周，新的一天，好天气和好心情. 今天，我继续最后一个主题: 在JS中遍历数组.

在上一篇文章中，我们分析了“几种本机JS数组遍历的方法和应用程序”，并讨论了多数组遍历的应用程序. 如果您不熟悉，可以进行审查. for循环有四种常用的遍历方法，如下所示:

for（让i = 0; i

arr.forEach（（v，i）=> {/ * ... * /}）

为（让我进入arr）

对于（arr的常数v）

接下来，讨论它们的应用和区别.

使用for / for / in，我们可以访问数组的下标而不是实际的数组元素值:

for (let i = 0; i < arr.length; ++i) {
    console.log(arr[i]);
}
for (let i in arr) {
    console.log(arr[i]);
}

使用for / of，您可以直接访问数组的元素值:

for (const v of arr) {
    console.log(v);
}

使用forEach（），您可以同时访问数组的下标和元素值:

arr.forEach((v, i) => console.log(v));

JavaScript的数组是Object，这意味着我们可以向该数组添加字符串属性:

const arr = ["a", "b", "c"];
typeof arr; // 'object'
arr.test = "bad"; // 添加非数字属性
arr.test; // 'abc'
arr[1] === arr["1"]; // true, JavaScript数组只是特殊的Object

4种循环语法，仅用于/ in不会忽略非数字属性:

const arr = ["a", "b", "c"];
arr.test = "bad";
for (let i in arr) {
    console.log(arr[i]); // 打印"a, b, c, bad"
}

因此，在/ in中遍历数组不是很好.

其他三种循环语法将忽略非数字属性:

const arr = ["a", "b", "c"];
arr.test = "abc";
// 打印 "a, b, c"
for (let i = 0; i < arr.length; ++i) {
    console.log(arr[i]);
}
// 打印 "a, b, c"
arr.forEach((el, i) => console.log(i, el));
// 打印 "a, b, c"
for (const el of arr) {
    console.log(el);
}

要点: 除非您确实想遍历非数字属性，否则避免使用for / in遍历数组. 您可以使用ESLint的保护规则来禁止使用for / in.

JavaScript数组可以包含空元素. 以下代码语法正确，并且数组长度为3:

const arr = ["a", , "c"];
arr.length; // 3

另一个令人困惑的问题是，循环语句以不同的方式处理['a'，'c']和['a'js数组遍历到表格，未定义，'c'].

对于['a',,'c']，for / in和forEach将跳过空元素，而for和for / of将不跳过.

// 打印"a, undefined, c"
for (let i = 0; i < arr.length; ++i) {
    console.log(arr[i]);
}
// 打印"a, c"
arr.forEach(v => console.log(v));
// 打印"a, c"
for (let i in arr) {
    console.log(arr[i]);
}
// 打印"a, undefined, c"
for (const v of arr) {
    console.log(v);
}

对于['a'，未定义，'c']，四种循环语法是相同的，并且都显示“ a，未定义，c”.

还有另一种添加空元素的方法:

// 等价于`['a', 'b', 'c',, 'e']`
const arr = ["a", "b", "c"];
arr[5] = "e";

另一方面，JSON不支持空元素:

JSON.parse('{"arr":["a","b","c"]}');
// { arr: [ 'a', 'b', 'c' ] }
JSON.parse('{"arr":["a",null,"c"]}');
// { arr: [ 'a', null, 'c' ] }
JSON.parse('{"arr":["a",,"c"]}');
// SyntaxError: Unexpected token , in JSON at position 12

要点: for / in和forEach将跳过空元素. 数组中的空元素称为“孔”. 如果要避免此问题，请考虑禁用forEach:

parserOptions:
    ecmaVersion: 2018
rules:
    no-restricted-syntax:
        - error
        - selector: CallExpression[callee.property.name="forEach"]
          message: Do not use `forEach()`, use `for/of` instead

for，for / in和for / of会将其保留在内.

对于Forachjs数组遍历到表格，除非使用箭头功能，否则其回调函数的this将会更改.

使用Node v11.8.0测试以下代码，结果如下:

"use strict";
const arr = ["a"];
arr.forEach(function() {
    console.log(this); // 打印undefined
});
arr.forEach(() => {
    console.log(this); // 打印{}
});

要点: 使用ESLint的no-arrow-callback规则要求所有回调函数必须使用箭头函数.

还有一件事，forEach（）无法与Async / Await和Generators“良好地协作”.

等待不能在forEach回调函数中使用:

async function run() {
  const arr = ['a', 'b', 'c'];
  arr.forEach(el => {
    // SyntaxError
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log(el);
  });
}

您不能在forEach回调函数中使用yield:

function run() {
  const arr = ['a', 'b', 'c'];
  arr.forEach(el => {
    // SyntaxError
    yield new Promise(resolve => setTimeout(resolve, 1000));
    console.log(el);
  });
}

对于/ of，没有这样的问题:

async function asyncFn() {
    const arr = ["a", "b", "c"];
    for (const el of arr) {
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log(el);
    }
}
function* generatorFn() {
    const arr = ["a", "b", "c"];
    for (const el of arr) {
        yield new Promise(resolve => setTimeout(resolve, 1000));
        console.log(el);
    }
}

当然，如果将forEach（）的回调函数定义为异步函数，则不会出现错误，但是如果要按顺序执行forEach，将很头疼.

以下代码将从最大到最小打印0-9:

async function print(n) {
    // 打印0之前等待1秒，打印1之前等待0.9秒
    await new Promise(resolve => setTimeout(() => resolve(), 1000 - n * 100));
    console.log(n);
}
async function test() {
    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(print);
}
test();

重要提示: 尽量不要在forEach中使用aysnc / await和.

简而言之，for / of是遍历数组的最可靠方法，它比for循环更简单，并且没有/ / in和forEach（）那样奇怪的异常，for / of的缺点是这对于我们获取索引值很不方便，并且我们无法调用forEach（）. forEach（）这样.

用于/ of获取数组索引，可以这样写:

for (const [i, v] of arr.entries()) {
    console.log(i, v);
}

基本上基于这些内容，希望对for循环进行更全面的分析可以对每个人有所帮助. 如有任何疑问，请随时添加小组讨论.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-166573-1.html