千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > for循環(huán)知識點總結(jié)

for循環(huán)知識點總結(jié)

來源:千鋒教育
發(fā)布人:wjy
時間: 2022-06-02 13:49:00 1654148940

幾種遍歷方法中for執(zhí)行最快,它沒有任何額外的函數(shù)調(diào)用棧和上下文。但在實際開發(fā)中我們要結(jié)合語義話、可讀性和程序性能,去選擇究竟使用哪種方案。下面來看for , foreach , map ,for...in , for...of五種方法現(xiàn)場battle。

for循環(huán)

 

**自我介紹**

**for**

我是最早出現(xiàn)的一方遍歷語句,在座的各位需稱我一聲爺爺。我能滿足開發(fā)人員的絕大多數(shù)的需求。

```text
// 遍歷數(shù)組
let arr = [1,2,3];
for(let i = 0;i < arr.length;i++){
    console.log(i) // 索引,數(shù)組下標(biāo)
    console.log(arr[i]) // 數(shù)組下標(biāo)所對應(yīng)的元素
}

// 遍歷對象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i = 0, keys=Object.keys(profile); i < keys.length;i++){
    console.log(keys[i]) // 對象的鍵值
    console.log(profile[keys[i]]) // 對象的鍵對應(yīng)的值
}

// 遍歷字符串
let str = "abcdef";
for(let i = 0;i < str.length ;i++){
    console.log(i) // 索引 字符串的下標(biāo)
    console.log(str[i]) // 字符串下標(biāo)所對應(yīng)的元素
}

// 遍歷DOM 節(jié)點
let articleParagraphs = document.querySelectorAll('.article > p');
for(let i = 0;i<articleParagraphs.length;i++){
    articleParagraphs[i].classList.add("paragraph");
    // 給class名為“article”節(jié)點下的 p 標(biāo)簽添加一個名為“paragraph” class屬性
}
```

**forEach**

我是ES5版本發(fā)布的。按升序為數(shù)組中含有效值的每一項執(zhí)行一次 callback 函數(shù),那些已刪除或者未初始化的項將被跳過(例如在稀疏數(shù)組上)。我是 for 循環(huán)的加強版。

```text
// 遍歷數(shù)組
let arr = [1,2,3];
arr.forEach(i => console.log(i))

// logs 1
// logs 2
// logs 3
// 直接輸出了數(shù)組的元素

//遍歷對象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
let keys = Object.keys(profile);
keys.forEach(i => {
    console.log(i) // 對象的鍵值
    console.log(profile[i]) // 對象的鍵對應(yīng)的值
})
```

**map**

我也是ES5版本發(fā)布的,我可以創(chuàng)建一個新數(shù)組,新數(shù)組的結(jié)果是原數(shù)組中的每個元素都調(diào)用一次提供的函數(shù)后的返回值。

```text
let arr = [1,2,3,4,5];
let res = arr.map(i => i * i);

console.log(res) // logs [1, 4, 9, 16, 25]
```

**for...in枚舉**

我是ES5版本發(fā)布的。以任意順序遍歷一個對象的除Symbol以外的可枚舉屬性。

```text
// 遍歷對象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i in profile){
    let item = profile[i];
    console.log(item) // 對象的鍵值
    console.log(i) // 對象的鍵對應(yīng)的值

// 遍歷數(shù)組
let arr = ['a','b','c'];
for(let i in arr){
    let item = arr[i];
    console.log(item) // 數(shù)組下標(biāo)所對應(yīng)的元素
    console.log(i) // 索引,數(shù)組下標(biāo)

// 遍歷字符串
let str = "abcd"
for(let i in str){
    let item = str[i];
    console.log(item) // 字符串下標(biāo)所對應(yīng)的元素
    console.log(i) // 索引 字符串的下標(biāo)
}
```

**for...of迭代**

我是ES6版本發(fā)布的。在可迭代對象(包括 Array,Map,Set,String,TypedArray,arguments 對象等等)上創(chuàng)建一個迭代循環(huán),調(diào)用自定義迭代鉤子,并為每個不同屬性的值執(zhí)行語句。

```text
// 迭代數(shù)組數(shù)組
let arr = ['a','b','c'];
for(let item of arr){
    console.log(item)
}
// logs 'a'
// logs 'b'
// logs 'c'

// 迭代字符串
let str = "abc";
for (let value of str) {
    console.log(value);
}
// logs 'a'
// logs 'b'
// logs 'c'

// 迭代map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]
for (let entry of iterable) {
    console.log(entry);
}
// logs ["a", 1]
// logs ["b", 2]
// logs ["c", 3]

// 迭代map獲取鍵值
for (let [key, value] of iterable) {
    console.log(key)
    console.log(value);
}


// 迭代set
let iterable = new Set([1, 1, 2, 2, 3, 3,4]);
for (let value of iterable) {
    console.log(value);
}
// logs 1
// logs 2
// logs 3
// logs 4

// 迭代 DOM 節(jié)點
let articleParagraphs = document.querySelectorAll('.article > p');
for (let paragraph of articleParagraphs) {
    paragraph.classList.add("paragraph");
    // 給class名為“article”節(jié)點下的 p 標(biāo)簽添加一個名為“paragraph” class屬性。
}

// 迭代arguments類數(shù)組對象
(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);
// logs:
// 1
// 2
// 3


// 迭代類型數(shù)組
let typeArr = new Uint8Array([0x00, 0xff]);
for (let value of typeArr) {
  console.log(value);
}
// logs:
// 0
// 255
```

經(jīng)過第一輪的自我介紹和技能展示后,我們了解到:

- for語句是最原始的循環(huán)語句。定義一個變量i(數(shù)字類型,表示數(shù)組的下標(biāo)),按照一定的條件,對i進行循環(huán)累加。條件通常為循環(huán)對象的長度,當(dāng)超過長度就停止循環(huán)。因為對象無法判斷長度,所以搭配Object.keys()使用。
- forEach ES5 提出。自稱是for語句的加強版,可以發(fā)現(xiàn)它比for語句在寫法上簡單了很多。但是本質(zhì)上也是數(shù)組的循環(huán)。forEach每個數(shù)組元素執(zhí)行一次 callback 函數(shù)。也就是調(diào)用它的數(shù)組,因此,不會改變原數(shù)組。返回值是undefine。
- map ES5 提出。給原數(shù)組中的每個元素都按順序調(diào)用一次 callback 函數(shù)。生成一個新數(shù)組,不修改調(diào)用它的原數(shù)組本身。返回值是新的數(shù)組。
- for...in ES5 提出。遍歷對象上的可枚舉屬性,包括原型對象上的屬性,且按任意順序進行遍歷,也就是順序不固定。遍歷數(shù)組時把數(shù)組的下標(biāo)當(dāng)作鍵值,此時的i是個字符串型的。它是為遍歷對象屬性而構(gòu)建的,不建議與數(shù)組一起使用。
- for...of ES6 提出。只遍歷可迭代對象的數(shù)據(jù)。

**能力甄別**

作為一個程序員,僅僅認(rèn)識他們是遠(yuǎn)遠(yuǎn)不夠的,在實際開發(fā)中鑒別他們各自的優(yōu)缺點。因地制宜的使用他們,揚長避短。從而提高程序的整體性能才是能力之所在。

關(guān)于跳出循環(huán)體

在循環(huán)中滿足一定條件就跳出循環(huán)體,或者跳過不符合條件的數(shù)據(jù)繼續(xù)循環(huán)其它數(shù)據(jù)。是經(jīng)常會遇到的需求。常用的語句是break 與 continue。

簡單的說一下二者的區(qū)別,就當(dāng)復(fù)習(xí)好了。

- break語句是跳出當(dāng)前循環(huán),并執(zhí)行當(dāng)前循環(huán)之后的語句;
- continue語句是終止當(dāng)前循環(huán),并繼續(xù)執(zhí)行下一次循環(huán);

注意:forEach 與map 是不支持跳出循環(huán)體的,其它三種方法均支持。

原理 :查看forEach實現(xiàn)原理,就會理解這個問題。

```text
Array.prototype.forEach(callbackfn [,thisArg]{
   
}
```

傳入的function是這里的回調(diào)函數(shù)。在回調(diào)函數(shù)里面使用break肯定是非法的,因為break只能用于跳出循環(huán),回調(diào)函數(shù)不是循環(huán)體。

在回調(diào)函數(shù)中使用return,只是將結(jié)果返回到上級函數(shù),也就是這個for循環(huán)中,并沒有結(jié)束for循環(huán),所以return也是無效的。

map() 同理。

map()鏈?zhǔn)秸{(diào)用

map() 方法是可以鏈?zhǔn)秸{(diào)用的,這意味著它可以方便的結(jié)合其它方法一起使用。例如:reduce(), sort(), filter() 等。但是其它方法并不能做到這一點。forEach()的返回值是undefined,所以無法鏈?zhǔn)秸{(diào)用。

```text
// 將元素乘以本身,再進行求和。
let arr = [1, 2, 3, 4, 5];
let res1 = arr.map(item => item * item).reduce((total, value) => total + value);

console.log(res1) // logs 55 undefined"
```

for...in會遍歷出原型對象上的屬性

```text
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
var arr = ['a', 'b', 'c'];
arr.foo = 'hello
for (var i in arr) {
    console.log(i);
}
// logs
// 0
// 1
// 2
// foo
// arrCustom
// objCustom
```

然而在實際的開發(fā)中,我們并不需要原型對象上的屬性。這種情況下我們可以使用hasOwnProperty() 方法,它會返回一個布爾值,指示對象自身屬性中是否具有指定的屬性(也就是,是否有指定的鍵)。如下:

```text
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
var arr = ['a', 'b', 'c'];
arr.foo = 'hello
for (var i in arr) {
    if (arr.hasOwnProperty(i)) {
        console.log(i);
    }
}
// logs
// 0
// 1
// 2
// foo

// 可見數(shù)組本身的屬性還是無法擺脫。此時建議使用 forEach
```

對于純對象的遍歷,選擇for..in枚舉更方便;對于數(shù)組遍歷,如果不需要知道索引for..of迭代更合適,因為還可以中斷;如果需要知道索引,則forEach()更合適;對于其他字符串,類數(shù)組,類型數(shù)組的迭代,for..of更占上風(fēng)更勝一籌。但是注意低版本瀏覽器的是配性。

**性能**

有興趣的讀者可以找一組數(shù)據(jù)自行測試,文章就直接給出結(jié)果了,并做相應(yīng)的解釋。

```text
for > for-of > forEach > map > for-in
```

- for 循環(huán)當(dāng)然是最簡單的,因為它沒有任何額外的函數(shù)調(diào)用棧和上下文;
- for...of只要具有Iterator接口的數(shù)據(jù)結(jié)構(gòu),都可以使用它迭代成員。它直接讀取的是鍵值。
- forEach,因為它其實比我們想象得要復(fù)雜一些,它實際上是array.forEach(function(currentValue, index, arr), thisValue)它不是普通的 for 循環(huán)的語法糖,還有諸多參數(shù)和上下文需要在執(zhí)行的時候考慮進來,這里可能拖慢性能;
- map() 最慢,因為它的返回值是一個等長的全新的數(shù)組,數(shù)組創(chuàng)建和賦值產(chǎn)生的性能開銷很大。
- for...in需要窮舉對象的所有屬性,包括自定義的添加的屬性也能遍歷到。且for...in的key是String類型,有轉(zhuǎn)換過程,開銷比較大。

**總結(jié)**

在實際開發(fā)中我們要結(jié)合語義話、可讀性和程序性能,去選擇究竟使用哪種方案。

如果你需要將數(shù)組按照某種規(guī)則映射為另一個數(shù)組,就應(yīng)該用 map。

如果你需要進行簡單的遍歷,用 forEach 或者 for of。

如果你需要對迭代器進行遍歷,用 for of。

如果你需要過濾出符合條件的項,用 filterr。

如果你需要先按照規(guī)則映射為新數(shù)組,再根據(jù)條件過濾,那就用一個 map 加一個 filter。

總之,因地制宜,因時而變。千萬不要因為過分追求性能,而忽略了語義和可讀性。在您的統(tǒng)治之下,他們5個只能是各自發(fā)揮長處,誰都別想稱霸。

**- End -**

更多關(guān)于“web前端培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗,課程大綱更科學(xué)更專業(yè),有針對零基礎(chǔ)的就業(yè)班,有針對想提升技術(shù)的提升班,高品質(zhì)課程助理你實現(xiàn)夢想。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
抖音小店運營做什么的

在當(dāng)前的電商市場中,抖音小店已經(jīng)逐漸成為一種新的電商模式,它集成了社交化、音視頻分享、直播銷售等多種功能,使得消費者更加便捷地進行商品...詳情>>

2023-10-08 16:36:41
抖音小店照片要求尺寸多大

在抖音平臺開設(shè)小店已經(jīng)成為了越來越多人的選擇,相信大家已經(jīng)在各大社交平臺上看到有不少小店的推廣。在抖音上,照片是展示產(chǎn)品的重要手段,因...詳情>>

2023-10-08 16:14:25
抖音招商團長托管服務(wù)費怎么退回來

抖音招商團長托管服務(wù)是抖音為有意愿創(chuàng)作內(nèi)容并帶動其他創(chuàng)作者成為團隊成員的用戶提供的一種服務(wù)。通過該服務(wù),招商團長可以自主組建團隊并得到...詳情>>

2023-10-08 16:08:53
抖音小店怎么做代銷

抖音已經(jīng)成為了一個非常受歡迎的短視頻應(yīng)用程序,在其中許多用戶都精心打造了自己的小店,用于銷售各種各樣的商品,獲取額外的收入。然而,要想...詳情>>

2023-10-08 15:28:41
怎樣開抖音小店帶貨賺錢

隨著直播帶貨的火熱,越來越多的人開始嘗試通過抖音小店來開展帶貨業(yè)務(wù)。抖音小店是抖音直播帶貨的配套,可以讓用戶在購買直播中產(chǎn)品時就實現(xiàn)購...詳情>>

2023-10-08 15:06:36