JavaScript 幾種迴圈方式以及模組化的總結
小小最近學習到了js的幾種迴圈方式,對這幾種迴圈方式進行總結。以及對模組化的相關知識點進行總結,
迴圈方式
迴圈方式分為好幾種迴圈方式,分別是for迴圈,forEach迴圈,map迴圈,for..in迴圈,for…of迴圈,jquery的迴圈。
小小將會依次對這幾種迴圈方式進行介紹。
一般陣列遍歷迴圈
這裡使用常用的陣列遍歷方式。
一般來說,常用的陣列遍歷如下
for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); }
這樣就完成了常規的迴圈遍歷。
在es5以後,添加了forEach,通過forEach進行迴圈遍歷
myArray.forEach(function (value) { console.log(value); });
這裡通過forEach函式,完成對陣列的遍歷。
缺點: 這樣使用有個致命的缺點,不能中斷迴圈,即,不能使用break和return
for-in 迴圈遍歷
for-in迴圈是為專有物件進行設定的,如下
var obj = {a:1,b:2,c:3};
迴圈結果如下
for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]); } // 輸出: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3"
迴圈一個數組的時候,使用如下的方式進行迴圈。
for (var index in myArray) { // 不推薦這樣 console.log(myArray[index]); }
for-of 迴圈
陣列
for-of迴圈可以遍歷陣列等內容
let iterable = [10,20,30]; for (let value of iterable) { console.log(value); } // 10 // 20 // 30
此時完成了對陣列的遍歷。
字串
此時還可以遍歷一個字串
let iterable = "boo"; for (let value of iterable) { console.log(value); } // "b" // "o" // "o"
迴圈一個Map
還可以迴圈一個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]
迴圈一個set
還可以迴圈一個set
let iterable = new Set([1,1,2,3,3]); for (let value of iterable) { console.log(value); } // 1 // 2 // 3
以上是基本的迴圈
模組化
對js的模組化進行介紹
以前,js檔案在一個檔案裡,使用js的模組化,可以實現對多個js檔案可以進行分離,實現工程化
這裡介紹最常用的es6模組化
export 與 import
這裡介紹export和import這兩種方式。
檔案如下
/*-----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,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!
這裡分為兩個檔案,分別為test.js和xxx.js test.js定義了幾個變數,並匯出了
myName,myClass
等,幾個變數。
使用import命令,匯入了一些變數,進入到名稱空間,使用console.log可以進行讀取
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!
as
as在這裡,實現重新命名的方式,實現匯入的時候,命名的更改。
import { myName as name1 } from "./test1.js"; import { myName as name2 } from "./test2.js"; console.log(name1);// Tom console.log(name2);// Jerry
這些就完成了基本的匯入和匯出
以上就是JavaScript 幾種迴圈方式以及模組化的總結的詳細內容,更多關於JavaScript 迴圈方式以及模組化的資料請關注我們其它相關文章!