先端JavaScriptの中の3種類のfor循環文のまとめ

JavaScriptの中のfor循環文はみんながもう飽きてきたと信じています.今はコードの中のfor循環文をどうやって減らすかという文章がたくさんあります.今日は、フロントエンドJavaScriptの中の3つのfor循環文をまとめます.
for
これは一番広い循環文を使っているのでしょう.簡単で実用的で、ほとんどの場合はまだオンラインです.唯一の欠点は普通すぎて、特色がないので、多くの人が今はそれを使いたくないです.

const array = [4, 7, 9, 2, 6];
for (const index = 0; index < array.length; index++) {
    const element = array[index];
    console.log(element);
}
// 4, 7, 9, 2, 6

for…infor...in文は、Symbol以外の任意の順序でオブジェクトのエニュメレート・属性を巡回することができる.

const temp = {name: "temp"};
function Apple() {
    this.color = 'red';
}

Apple.prototype = temp;

const obj = new Apple();

for (const prop in obj) {
    console.log(`obj.${ prop } = ${ obj[prop] }`);
}

// obj.color = red
// obj.name = temp

オブジェクト自体の属性を考慮すると、そのプロトタイプではなく、getOwnPropertyNames()またはhasOwnProperty()を使用して、ある属性がオブジェクト自身の属性であるかどうかを決定します.

const temp = {name: "temp"};
function Apple() {
    this.color = 'red';
}

Apple.prototype = temp;

const obj = new Apple();

for (const prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        console.log(`obj.${ prop } = ${ obj[prop] }`);
    }
}

// obj.color = red

もちろん、配列を巡回するためにも使えます.

const arr = [1, 2, 3, 4, 5];
for (const key in arr) {
    console.log(key)
}
// 0,1,2,3,4

for...inを使用すると、配列を巡回することができますが、以下の問題があります.

indexインデックスは文字列型の数字です.直接幾何学的演算はできません.

エルゴード順序は、実際の配列の内部順序ではないかもしれない(ランダム順序であるかもしれない).

したがって、配列を巡回するためにfor...inを使用することは一般的に推奨されていない.
for…of.for...of文は、反復可能なオブジェクト(Aray,Map,Set,String,TypedAray,argmentsオブジェクトなどを含む)上で反復ループを作成し、ユーザー定義の反復フックを呼び出し、各属性の値についてステートメントを実行する.

const array = ['a', 'b', 'c'];
for (const element of array) {
    console.log(element);
}

// a
// b
// c

for...ofとfor...inの違い:

for...in文は、任意の順序でオブジェクトのエニュメレーション属性を反復する.

for...of文は、反復対象を巡回して反復するデータを定義することができる.

Object.prototype.objCustom = function () { };
Array.prototype.arrCustom = function () { };

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (const key in iterable) {
    console.log(key); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
// 0, 1, 2, "foo", "arrCustom", "objCustom"

for (const key of iterable) {
    console.log(key);
}
// 3, 5, 7

for...ofを使用してMap構造を巡回:

let nodes = new Map();
nodes.set("node1", "t1")
    .set("node2", "t2")
    .set("node3", "t3");

for (const [node, content] of nodes) {
    console.log(node, content);
}
// node1 t1
// node2 t2
// node3 t3

for...ofを使ってMap構造を遍歴するのはやはりとても便利です.
締め括りをつける

普通のforサイクルが飽きたら、for...ofを使って代替することを推奨します.

のこの3つのループは、いずれもbreakキーを使用してループを終了することができ、continueキーを使用してこのサイクルをスキップすることもできる.

for...ofサイクルの適用範囲は最大です.

~
~本文が終わったら、読んでください.
~
面白い知識を勉強して、面白い友達を作って、面白い魂を作ります.
私は「プログラミング三昧」の作者隠逸王です.公众番号は「プログラミング三昧」です.
あなたが来て、期待を抱いて、私は線香があって互いに迎えます!あなたは帰って、損得に関わらず、ただ余韻で贈り物をします!
知識と技能を同時に重視して、内力と外功を兼修して、理論と実践の両手はすべてつかんで、両手はすべて硬いです!