成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js數(shù)組循環(huán)的幾種方式總結(jié)

rubyshen / 1783人閱讀

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

前言

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

1.for循環(huán)

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

for(var i = 0;i<5;i++){
 console.log(i)
}
2.for in循環(huán)

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

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

for (var index in myArray) { // 不推薦這樣
console.log(myArray[index]);
}
3. forEach循環(huán)

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

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

forEach、map都是ECMA5新增數(shù)組的方法。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循環(huán)

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96994.html

相關(guān)文章

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

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

    isLishude 評論0 收藏0

  • JavaScript知識點總結(jié)

    摘要：參與任何數(shù)值計算的結(jié)構(gòu)都是，而且。。面向人類的理性事物，而不是機器信號。達到無刷新效果。的工作原理總是指向一個對象，具體是運行時基于函數(shù)的執(zhí)行環(huán)境動態(tài)綁定的，而非函數(shù)被聲明時的環(huán)境。原型對象上有一個屬性，該屬性指向的就是構(gòu)造函數(shù)。 1.JS面向?qū)ο蟮睦斫?面向?qū)ο蟮娜筇攸c：繼承、封裝、多態(tài) 1、JS中通過prototype實現(xiàn)原型繼承 2、JS對象可以通過對象冒充，實現(xiàn)多重繼承， 3...

    sean 評論0 收藏0

  • js類型檢測的幾種方式盤點

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

    fantix 評論0 收藏0

  • javascript的幾種常見遍歷數(shù)據(jù)結(jié)構(gòu)的語法

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

    kohoh_ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<