Summary of Several Loop Modes and Modularization of JavaScript

Xiao Xiao recently learned several loop modes of js, and summarized these loop modes. And summarize the related knowledge points of modularization,

Circulation mode

The circulation modes are divided into several circulation modes, namely for circulation, forEach circulation, map circulation, for... in circulation, for... of circulation and jquery circulation.

Xiao Xiao will introduce these circulation modes in turn.

1 general array traversal loop

The commonly used array traversal method is used here.

1 Generally speaking, the commonly used array traversal is as follows

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

This completes the regular loop traversal.

After es5, forEach is added, and the loop is traversed through forEach

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

Here, through the forEach function, the traversal of the array is completed.

Disadvantages: There is a fatal disadvantage to this use, that is, it cannot interrupt the loop, that is, it cannot use break and return

for-in loop traversal

The for-in loop is set up for proprietary objects, as follows

var obj = {a:1, b:2, c:3};

The result of the loop is as follows

for (var prop in obj) {
 console.log("obj." + prop + " = " + obj[prop]);
}

//  Output :
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

When looping an array, use the following method to loop.

for (var index in myArray) {  //  This is not recommended 
 console.log(myArray[index]);
}

for-of cycle

Array

The for-of loop can traverse arrays and so on

let iterable = [10, 20, 30];

for (let value of iterable) {
 console.log(value);
}
// 10
// 20
// 30

At this point, the traversal of the array is completed.

String

You can also traverse 1 string at this time

let iterable = "boo";

for (let value of iterable) {
 console.log(value);
}
// "b"
// "o"
// "o"

Loop 1 Map

You can also cycle 1 Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
 console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
 console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

Loop 1 set

You can also cycle 1 set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
 console.log(value);
}
// 1
// 2
// 3

The above is the basic cycle

Modularization

The modularization of js is introduced

Previously, js file in one file, using the modularization of js, multiple js files can be separated to achieve engineering

The most commonly used es6 modularization is introduced here

export and import

export and import are introduced here.

The document is as follows

/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
  return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass = class myClass {
  static a = "yeah!";
}
export { myName, myAge, myfn, myClass }

/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!

There are two files that define several variables for test. js and xxx. js test. js, and export the

myName, myAge, myfn, myClass

Wait, several variables.

Using import command, I imported 1 variables into the namespace, which can be read using console. log

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

0

as

as here, the way to achieve renaming, the implementation of the import time, naming changes.

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

1

This completes the basic import and export

The above is the JavaScript several loops and modular summary of the details, more about the JavaScript loops and modular information please pay attention to other related articles on this site!