整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)。
JavaScript 循環(huán)
如果您希望一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的。
我們可以這樣輸出數(shù)組的值：
一般寫法：
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
使用for循環(huán)
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
不同類型的循環(huán)
JavaScript 支持不同類型的循環(huán)：
for - 循環(huán)代碼塊一定的次數(shù)
for/in - 循環(huán)遍歷對(duì)象的屬性
while - 當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊
do/while - 同樣當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊
For 循環(huán)
for 循環(huán)是您在希望創(chuàng)建循環(huán)時(shí)常會(huì)用到的工具。
下面是 for 循環(huán)的語法：
for (語句 1; 語句 2; 語句 3)
{
被執(zhí)行的代碼塊
}
語句 1 （代碼塊）開始前執(zhí)行 starts.
語句 2 定義運(yùn)行循環(huán)（代碼塊）的條件
語句 3 在循環(huán)（代碼塊）已被執(zhí)行之后執(zhí)行
實(shí)例
for (var i=0; i<5; i++)
{
x=x + "該數(shù)字為 " + i + "<br>";
}
從上面的例子中，您可以看到：
Statement 1 在循環(huán)開始之前設(shè)置變量 (var i=0)。
Statement 2 定義循環(huán)運(yùn)行的條件（i 必須小于 5）。
Statement 3 在每次代碼塊已被執(zhí)行后增加一個(gè)值 (i++)。
語句 1
通常我們會(huì)使用語句 1 初始化循環(huán)中所用的變量 (var i=0)。
語句 1 是可選的，也就是說不使用語句 1 也可以。
您可以在語句 1 中初始化任意（或者多個(gè)）值：
實(shí)例:
for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
}
同時(shí)您還可以省略語句 1（比如在循環(huán)開始前已經(jīng)設(shè)置了值時(shí)）：
實(shí)例:
var i=2,len=cars.length;
for (; i<len; i++)
{
document.write(cars[i] + "<br>");
}
語句 2
通常語句 2 用于評(píng)估初始變量的條件。
語句 2 同樣是可選的。
如果語句 2 返回 true，則循環(huán)再次開始，如果返回 false，則循環(huán)將結(jié)束。
| 如果您省略了語句 2，那么必須在循環(huán)內(nèi)提供 break。否則循環(huán)就無法停下來。這樣有可能令瀏覽器崩潰。請(qǐng)?jiān)诒窘坛躺院蟮恼鹿?jié)閱讀有關(guān) break 的內(nèi)容。 |
語句 3
通常語句 3 會(huì)增加初始變量的值。
語句 3 也是可選的。
語句 3 有多種用法。增量可以是負(fù)數(shù) (i--)，或者更大 (i=i+15)。
語句 3 也可以省略（比如當(dāng)循環(huán)內(nèi)部有相應(yīng)的代碼時(shí)）：
實(shí)例:
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}
for/In 循環(huán)
JavaScript for/in 語句循環(huán)遍歷對(duì)象的屬性：
實(shí)例
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
您將在有關(guān) JavaScript 對(duì)象的章節(jié)學(xué)到更多有關(guān) for / in 循環(huán)的知識(shí)。
While 循環(huán)
我們將在下一章為您講解 while 循環(huán)和 do/while 循環(huán)。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
定義：循環(huán)可多次執(zhí)行代碼塊。
如現(xiàn)在要求在頁面上輸出從1-10的數(shù)字
普通情況下我們就需要寫十行
document.write("1"+<br/>)
document.write("2"+<br/>)
document.write("3"+<br/>)
以此類推
那么現(xiàn)在有了for循環(huán)呢，我們就可以用循環(huán)一次性輸出以上的內(nèi)容
示例如下
for(var i=1;i<11;i++)
{
document.write(i+"<br/>");
}
這就是for循環(huán)的基本語法，那么接下來看一下 它是怎么執(zhí)行的 運(yùn)算規(guī)則是什么 語法是什么
for (語句 1; 語句 2; 語句 3) {
要執(zhí)行的代碼塊
語句 1 在循環(huán)（代碼塊）開始之前執(zhí)行也就是定義循環(huán)變量的初始值
語句 2 定義運(yùn)行循環(huán)（代碼塊）的條件，定義循環(huán)變量的終止數(shù)
語句 3 會(huì)在循環(huán)（代碼塊）每次被執(zhí)行后執(zhí)行，每次執(zhí)行的變化 自增或者自減 根據(jù)需求定義
如上面的案例
定義了一個(gè)變量i 初始值為1 循環(huán)的最大值為11，也就是i的值必須小于11，每次執(zhí)行完了i的值自增1
avaScript 中的 for 循環(huán)語句相信大家都已經(jīng)快用厭了，現(xiàn)在有好多文章都在講怎么減少代碼中的 for 循環(huán)語句，但是，你又不得不承認(rèn)它們真的很有用。今天，我來總結(jié)一下前端 JavaScript 中三種 for 循環(huán)語句。
這大概是應(yīng)用最廣的循環(huán)語句了吧，簡單實(shí)用，且大多數(shù)時(shí)候性能還是在線的，唯一的缺點(diǎn)大概就是太普通，沒有特色，導(dǎo)致很多人現(xiàn)在不愿用它。
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, 6for...in 語句可以以任意順序遍歷一個(gè)對(duì)象的除 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如果你只要考慮對(duì)象本身的屬性，而不是它的原型，那么使用 getOwnPropertyNames() 或執(zhí)行 hasOwnProperty() 來確定某屬性是否是對(duì)象本身的屬性。
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當(dāng)然，也可以用來遍歷數(shù)組。
const arr=[1, 2, 3, 4, 5];
for (const key in arr) {
console.log(key)
}
// 0,1,2,3,4使用 for...in 可以遍歷數(shù)組，但是會(huì)存在以下問題：
所以一般不建議使用 for...in 來遍歷數(shù)組。
for...of 語句在可迭代對(duì)象（包括 Array，Map，Set，String，TypedArray，arguments 對(duì)象等等）上創(chuàng)建一個(gè)迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個(gè)不同屬性的值執(zhí)行語句。
const array=['a', 'b', 'c'];
for (const element of array) {
console.log(element);
}
// a
// b
// cfor...of 和 for...in 的區(qū)別：
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 結(jié)構(gòu)：
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 結(jié)構(gòu)還是挺方便的，推薦使用！
~
~ 本文完，感謝閱讀！
~
學(xué)習(xí)有趣的知識(shí)，結(jié)識(shí)有趣的朋友，塑造有趣的靈魂！
我是〖編程三昧〗的作者 隱逸王，我的公眾號(hào)是『編程三昧』，歡迎關(guān)注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以余韻相贈(zèng)！
知識(shí)與技能并重，內(nèi)力和外功兼修，理論和實(shí)踐兩手都要抓、兩手都要硬！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
