資訊專欄INFORMATION COLUMN
摘要：這幾個方法會完整地遍歷數(shù)組，即使在滿足條件后，循環(huán)依舊進(jìn)行。如果要同時遍歷索引和項上述都是遍歷數(shù)組的方法，這個是遍歷對象的方法，并且最好不要混用
遍歷是程序中必不可少的一環(huán)，在所有語言中都存在，因為它可以簡化人們的規(guī)律性操作，本文將一一道來。
for++這是最基礎(chǔ)的for循環(huán)語句，格式如下：
var arr = [1, 2, 3, 4, 5]
for (var i = 0; i < arr.length; i++) {
console.log(i)
if (i > 2) break
}
也有人這樣寫,據(jù)說效率更高
for (var i = 0, len = arr.length; i < len; i++) {
console.log(i)
if (i > 2) break
}
while
for循環(huán)可以同時拿到每個循環(huán)的索引和數(shù)組對應(yīng)的項，如果只是滿足一定條件內(nèi)的循環(huán)，可以使用while 。
var i = 0
while (i < 5) {
console.log(i)
if(i>2)break
i++
}
forEach, map, filter
上述方法寫起來略微麻煩，所以es5新增了幾個對數(shù)組的遍歷方法，此外還有every,some,reduce，不過不是很常用。這幾個方法會完整地遍歷數(shù)組，即使在滿足條件return后，循環(huán)依舊進(jìn)行。
用法如下：
// forEach 直接遍歷
arr.forEach((item, index) => {
console.log(item, index)
})
// map 依次遍歷，對每一項進(jìn)行轉(zhuǎn)換，映射成另一個數(shù)組
const arr1 = arr.map((item, index) => {
return item * 2
})
console.log(arr1) // [2,4,6,8,10]
// filter 依次遍歷，過濾得到滿足條件的項，組成數(shù)組
const arr2 = arr.filter((item, index) => {
return item % 2 == 0
})
console.log(arr2) // [2,4]
for...of
這個是es6推薦的數(shù)組遍歷方法，相比forEach，優(yōu)點有2點：
1.可以使用break和continue跳出循環(huán)
2.找到滿足條件的項，跳出循環(huán)后，后面的循環(huán)不會進(jìn)行，從而減少內(nèi)存消耗。
for (const item of arr) {
console.log(item)
if (item > 2) break
}
// 如果要同時遍歷索引和項
for (const [index, item] of arr.entries()) {
if (index === 2) {
console.log(item)
break
}
}
for...in
上述都是遍歷數(shù)組的方法，這個是遍歷對象的方法，并且最好不要混用
const obj = {
a: 1,
b: 2,
c: 3
}
for (const key in obj) {
console.log(key, obj[key])
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98172.html
摘要：一語法其中，表示將要原數(shù)組表示上一次調(diào)用回調(diào)時的返回值，或者初始值表示當(dāng)前正在處理的數(shù)組元素表示當(dāng)前正在處理的數(shù)組元素的索引，若提供值，則索引為，否則索引為表示初始值。 一、語法 arr.reduce(function(prev,cur,index,arr){...}, init); 其中，arr 表示將要原數(shù)組；prev 表示上一次調(diào)用回調(diào)時的返回值，或者初始值 init;cur 表...
摘要：來給大家推薦一款模板引擎，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個大概也才幾左右。 對于前端開發(fā)者來說，有一個綁數(shù)據(jù)的模板是多么的幸福，不用我多說大家也知道，終于不用在js中一個個字符串拼接一大推元素數(shù)據(jù)啥的，可以省下我們很多時間。來給大家推薦一款模板引擎artTemplate，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個template.js大概也才幾...
摘要：來給大家推薦一款模板引擎，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個大概也才幾左右。 對于前端開發(fā)者來說，有一個綁數(shù)據(jù)的模板是多么的幸福，不用我多說大家也知道，終于不用在js中一個個字符串拼接一大推元素數(shù)據(jù)啥的，可以省下我們很多時間。來給大家推薦一款模板引擎artTemplate，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個template.js大概也才幾...
摘要：對象的特殊性因為對象的是通過指針仔細(xì)內(nèi)存地址的，所以對象的拷貝不能像變量一般簡單的賦值，對象的賦值只是將指針的地址賦值過去而已，修改屬性值會對所有指向這個內(nèi)存地址的對象的屬性值都會被改變，見下面的例子變量賦值修改不會對造成影響對象賦值修改會 1.對象的特殊性 因為對象的是通過指針仔細(xì)內(nèi)存地址的，所以對象的拷貝不能像變量一般簡單的賦值，對象的賦值只是將指針的地址賦值過去而已，修改屬性值會...
摘要：注冊方法之后，當(dāng)執(zhí)行了當(dāng)前的，那么掛載正在當(dāng)前上的方法就會被執(zhí)行。比如在開始編譯之前，就能觸發(fā)鉤子，就用到了當(dāng)前的。上面都是前置知識，下面通過解讀一個源碼來鞏固下。先看一段簡單的源碼。，是眾多的的一個，官網(wǎng)的解釋是編譯創(chuàng)建之后，執(zhí)行插件。 通過解讀webpack-manifest-plugin，了解下plugin機(jī)制 先簡單說一下這個插件的功能，生成一份資源清單的json文件，如下 s...
閱讀 1484·2019-08-30 15:55
閱讀 1189·2019-08-30 15:52
閱讀 1306·2019-08-29 13:53
閱讀 1480·2019-08-29 11:19
閱讀 2991·2019-08-26 13:29
閱讀 540·2019-08-26 11:33
閱讀 2609·2019-08-23 17:20
閱讀 1036·2019-08-23 14:14
