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