JavaScript ??? 4 ???????????????????????? for VS forEach() VS for/in VS for/of

Posted 2021-02-12

???????????????   elements   ref   ??????   on()   sele   gen   .com   obj   

?????????????????????????????? javascript ?????????????????????????????????????????????????????????????????????Airbnb ???????????????????????? for/in ??? for/of???????????????????????????

????????????????????????????????? 4 ???????????????????????????

• for (let i = 0; i < arr.length; ++i)
• arr.forEach((v, i) => { /* ... */ })
• for (let i in arr)
• for (const v of arr)

??????

??????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 ????????????????????????for/in??????????????????????????????

const arr = ["a", "b", "c"];
arr.test = "bad";

for (let i in arr) {
    console.log(arr[i]); // ??????"a, b, c, bad"
}

????????????????????????for/in????????????????????????

?????? 3 ????????????????????????????????????????????????

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 ???guard-for-in?????????????????????for/in???

??????????????????

JavaScript ?????????????????????????????????????????????????????????????????????????????? 3???

const arr = ["a", , "c"];

arr.length; // 3

???????????????????????????????????????????????????[???a???,, ???c???]???[???a???, undefined, ???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???, undefined, ???c???]???4 ???????????????????????????????????????"a, undefined, 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???????????????????????????????????????????????????"holes"??????????????????????????????????????????????????????forEach:

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

????????? this

for???for/in???for/of???????????????????????????this???

??????forEach??? ???????????????????????????????????????????????? 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?????????????????????????????????????????????????????????

Async/Await ??? Generators

???????????????forEach()????????? Async/Await ??? Generators ?????????"??????"???

?????????forEach????????????????????? await???

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

??????for/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()???????????????????????? async ???????????????????????????????????????????????????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 ?????? generators???

??????

???????????????for/of??????????????????????????????????????????for???????????????????????????for/in???forEach()???????????????????????????for/of????????????????????????????????????????????????????????????????????????forEach(). forEach()???

??????for/of???????????????????????????????????????

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

??????

• For-each over an array in JavaScript?
• Why is using ???for???in??? with array iteration a bad idea?
• Array iteration and holes in JavaScript