js數組循環的幾種方式總結

rubyshen 發布于2019-08-23 11:27 / 1753人閱讀

摘要：循環最基本的循環方式，不多說。就是這循環循環是用來遍歷對象的。輸出循環都是新增數組的方法。循環數組指的的就是數組每一項的值。總結以上就是常用的幾種循環總結，很多細節，原理之類的沒有寫。

前言

只描述了一些最基本的用法，和一些可能遇到的問題。一些細節，或者特殊寫法之類的，沒有。

1.for循環

最基本的循環方式，不多說。但是我在其它某篇文章上，聽別人說，這種最基本的循環才是速度最快的，效率最高的。(就是這https://www.jb51.net/article/...

for(var i = 0;i<5;i++){
 console.log(i)
}

2.for in循環

for in循環是用來遍歷對象的。要知道JavaScript對象的所有屬性都是字符串，不過屬性對應的值可以是任意數據類型。（注意：遍歷時不僅能讀取對象自身上面的成員屬性，也能遍歷出對象的原型屬性）

let obj = {a:1, b:2, c:3};
for (let prop in obj) {    //prop指對象的屬性名
console.log(prop, obj[prop]);
}
// 輸出:
// a,1
// b,2
// c,3

for in同樣可以用來循環數組,但是不推薦這么做。由于Array也是對象，而它的每個元素的索引被視為對象的屬性，因此，for in循環可以直接循環出Array的索引，但得到的是String而不是Number，所以一旦你想用這個index去進行計算，就會出錯。而且因為會遍歷原型屬性，所以可能得出的結果不會是你想要的(具體細節不多說，需要了解的自己查詢，反正很多坑)。雖然可以用hasOwnProperty()方法避免這個缺陷，但是何必呢，循環方法那么多，換一個就是了。

for (var index in myArray) { // 不推薦這樣
console.log(myArray[index]);
}

3. forEach循環

沒什么好說的，看例子。(注意：forEach循環里面沒辦法用break跳出循環。而且在IE中無法實現，需要做兼容處理。)

let arr = ["123","qwewq","sfds"];
myArray.forEach(function (value, index) {
    console.log(value,index);
});
//輸出
//"123",1
//"qwewq",2
//"sfds",3

4.map循環

forEach、map都是ECMA5新增數組的方法。map支持return

let arr = ["123","qwewq","sfds"];
arr.map(function(value,index){
    console.log(value,index);
});

//輸出
//"123",1
//"qwewq",2
//"sfds",3

5.for of循環

作為ES6新增的循環方法，個人覺得相當好用，而且方便。這個方法避開了for-in循環的所有缺陷。而且，它可以正確響應break、continue和return語句。

//循環數組
let arr = ["123","qwewq","sfds"];
for(let item of arr){
    console.log(item);    //item指的的就是數組每一項的值。不是索引。
}
//輸出
//"123"
//"qwewq"
//"sfds"

for-of循環不僅支持數組，還支持大多數類數組對象，例如DOM NodeList對象。但是for of也有一個致命傷，就像例子看到的，沒有索引。對，這是優點也是缺點。遍歷數組對象，直接就是item.屬性(或者item[屬性]),而不用像for循環那樣arr[index].屬性(arrindex)。但是你有的時候真的就得用到index。不好意思，只能把數組轉成Map()。但我覺得真的需要用到index，還是換成forEach吧。

//遍歷字符串
let name = "Asher";
for (let char of name){
    console.log(char);         //A s h e r
}

此外，對于在ES6中新增的兩種類型，Map和Set(如果學過Java或者其他有這兩種類型的語言，會發現用法幾乎一樣)。for of同樣適用。

let mapArray = new Map();
for (let [key, value] of mapArray) {
   console.log(key,value);
}
//Set集合同理，不列舉了。

總結

以上就是常用的幾種for循環總結，很多細節，原理之類的沒有寫。因為這只是一個簡單使用的介紹，不想寫那么多。此外，還有很多像while循環，do-while循環之類的其它循環方法，都沒提。因為根據我的使用經驗，上面的幾種已經可以應對幾乎所有情況了。

GPU云服務器云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式 js的幾種數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96994.html

JS中輕松遍歷對象屬性的幾種方式

摘要：當普通對象要轉換成時就很有用，因為返回的格式與構造函數接受的格式完全相同。使用常規的構造函數可以將一個二維鍵值對數組轉換成一個對象。在和早期標準中，根本沒有指定屬性的順序。此函數還可以輕松地將純對象屬性映射到對象中。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！自身可枚舉屬性 Object.keys() 方法會返回一個...

isLishude 2019-08-26 10:35 評論0 收藏0
JavaScript知識點總結

摘要：參與任何數值計算的結構都是，而且。。面向人類的理性事物，而不是機器信號。達到無刷新效果。的工作原理總是指向一個對象，具體是運行時基于函數的執行環境動態綁定的，而非函數被聲明時的環境。原型對象上有一個屬性，該屬性指向的就是構造函數。 1.JS面向對象的理解面向對象的三大特點：繼承、封裝、多態 1、JS中通過prototype實現原型繼承 2、JS對象可以通過對象冒充，實現多重繼承， 3...

sean 2019-08-22 13:51 評論0 收藏0
js類型檢測的幾種方式盤點

摘要：開始之前，必須要知道中關于類型的定義。作為基本類型也返回，因為在中的定義就是用來表示一個空對象指針。返回值類型總結一般用來檢測，無法正確檢測基本數據類型。但是注意，因為和都是類型。返回值類型總結這也是比較好的返回方式了。開始之前，必須要知道js中關于類型的定義。js中有6種基本類型，null，undefined,boolean,string,number,symbol(es6新增的類...

fantix 2019-08-23 18:29 評論0 收藏0
javascript的幾種常見遍歷數據結構的語法

摘要：接觸這么多年，第一次總結一下它的遍歷語法。而且你必須借助特定的結構才能遍歷數據結構。它的作用是遍歷對象的鍵名。建議僅在遍歷數組的時候使用。另一個優點是，它可以遍歷任何部署了接口的數據結構，甚至是非的數據類型，即自己定義的數據結構。接觸JavaScript這么多年，第一次總結一下它的遍歷語法。以前我大部分時間都在老版本的JavaScript下寫代碼，所以大部分時間都是用for...in...

kohoh_ 2019-08-22 10:41 評論0 收藏0