資訊專欄INFORMATION COLUMN
摘要：今天從開(kāi)始談?wù)劚闅v吧。對(duì)于對(duì)象的遍歷更傾向于系列這一塊是的函數(shù)式領(lǐng)域了。下掛載著幾個(gè)非常好用的遍歷函數(shù)。說(shuō)到遍歷不得不提及在中的所有參數(shù)，奇怪的是它并不是一個(gè)數(shù)組。對(duì)象的遍歷是非常常用的功能。
forEach
今天從 forEach 開(kāi)始談?wù)劚闅v吧。
forEach 作為一個(gè)比較出眾的遍歷操作，之前有很多庫(kù)都對(duì)其進(jìn)行過(guò)各種包裝，然而我還是發(fā)現(xiàn)很多人并不是非常理解 forEach。
比如第二個(gè)參數(shù) this 的使用。
往常都習(xí)慣這么做：
const self = this
arr.forEach(function(item) {
// do something with this
})
然而如果使用第二個(gè)參數(shù)就可以這樣：
arr.forEach(function(item) {
// do something with this
}, this)
省去了一個(gè)中間的self，看起來(lái)更優(yōu)美了
那么有沒(méi)有更好的處理方式呢？
有的：
arr.forEach(item => {
// do something
})
由于 arrow function 的特性，自動(dòng)綁定父 scope 的 this， 會(huì)更加簡(jiǎn)潔，而且少了個(gè)function關(guān)鍵字，可讀性更好。
for說(shuō)到循環(huán)必定要說(shuō)到for循環(huán)了。js里面的for循環(huán)有好幾種使用方式：
C 系列 for 循環(huán)：
for (let index = 0; index < arr.length; index++) {
// do something
}
index 是 arr 的索引，在循環(huán)體中通過(guò) arr[index] 調(diào)用當(dāng)前的元素，我非常不喜歡這種方式，因?yàn)橐獙憙蓚€(gè)分號(hào)！
還有另一種比較簡(jiǎn)單的方式：
for (let key in obj) {
// do something
}
不過(guò)這個(gè)方式一般用來(lái)遍歷對(duì)象，下文有說(shuō)。
關(guān)于 for 循環(huán)還有 ES2015 規(guī)定的一種
for (let item of arr) {
// do something
}
這種遍歷方式和之前的最大區(qū)別在于item，它是value而非key，可以直接迭代出內(nèi)容。
不過(guò)這種方式我個(gè)人用的不多，因?yàn)楹芏嗲闆r下我更喜歡用array下的方法。對(duì)于對(duì)象的遍歷更傾向于for...in
map 系列這一塊是js的函數(shù)式領(lǐng)域了。
Array.prototype下掛載著幾個(gè)非常好用的遍歷函數(shù)。比如map
它會(huì)遍歷arr下的所有內(nèi)容，做操作之后返回?cái)?shù)據(jù)，形成一個(gè)新的數(shù)組：
const arr = [1, 2, 3] arr.map(current => current * 5)
在 react 最常用。經(jīng)常用來(lái)遍歷數(shù)據(jù)，形成dom：
someRender() {
return this.state.data.map((current, index) => {
return 不過(guò) map 有一點(diǎn)不好的地方在于不能控制循環(huán)的流程，如果不能完成，就返回undefined繼續(xù)下一次迭代。所以遇到可能會(huì)返回undefined的情況應(yīng)該用forEach或者for循環(huán)遍歷
還有filter用法和map一模一樣，只是它用來(lái)過(guò)濾數(shù)據(jù)。非常的好用。
arguments說(shuō)到遍歷不得不提及arguments, 在function()中的所有參數(shù)，奇怪的是它并不是一個(gè)數(shù)組。只是一個(gè)類數(shù)組。
一般需要轉(zhuǎn)成數(shù)組：
function foo() {
const args = Array.prototype.slice.call(arguments)
return Array.isArray(args)
}
但是我個(gè)人并不認(rèn)同這樣的方法，有了新的 ES2015 就不要用這么丑的語(yǔ)法了
function foo(...args) {
// args 是數(shù)組
}
ES2015 的 rest 語(yǔ)法使得剩余參數(shù)都傳入args里面，比之前的還要調(diào)Array的方法要輕松不少。
object對(duì)象的遍歷是非常常用的功能。
我個(gè)人更喜歡用for...in語(yǔ)法，但是有一點(diǎn)需要注意：
for (let index in obj) {
if(obj.hasOwnProperty(index)) {
// do something
}
}
因?yàn)槌菑?qiáng)制指定，否則對(duì)象都是不純凈的。都會(huì)有__proto__屬性，也會(huì)被迭代出來(lái)。需要過(guò)濾一下。
好了，如何創(chuàng)建純凈的對(duì)象？
const plainObj = Object.create(null)
最輕的obj結(jié)構(gòu)，內(nèi)部沒(méi)有任何多余的屬性。
從 forEach 開(kāi)始談?wù)劦?/p>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91638.html
摘要：描述此函數(shù)用來(lái)遍歷數(shù)組的每一個(gè)元素，回調(diào)的返回值有意義，返回時(shí)，數(shù)組停止循環(huán)。問(wèn)題一個(gè)數(shù)組最多可以有多長(zhǎng)中規(guī)定，數(shù)組的長(zhǎng)度會(huì)使用轉(zhuǎn)化，即。 這是我的原創(chuàng)文章，原文地址：http://lpgray.me/article/48/ 今天談?wù)劵A(chǔ)，在前端開(kāi)發(fā)中，Array的基礎(chǔ)操作很是頻繁多見(jiàn)，在ES5中有許多Array的新特性，但是對(duì)于我等中國(guó)的碼農(nóng)，尤其是PC前端狗整天就與IE678打交道...
摘要：內(nèi)部迭代與使用迭代器顯式迭代的集合不同，流的迭代操作是在背后進(jìn)行的。流只能遍歷一次請(qǐng)注意，和迭代器類似，流只能遍歷一次。 流（Stream） 流是什么 流是Java API的新成員，它允許你以聲明性方式處理數(shù)據(jù)集合（通過(guò)查詢語(yǔ)句來(lái)表達(dá)，而不是臨時(shí)編寫一個(gè)實(shí)現(xiàn)）。就現(xiàn)在來(lái)說(shuō)，你可以把它們看成遍歷數(shù)據(jù)集的高級(jí)迭代器。此外，流還可以透明地并行處理，你無(wú)需寫任何多線程代碼了！我會(huì)在后面的筆記中...
摘要：解決辦法，將箭頭函數(shù)聲明為函數(shù)，代碼如下運(yùn)行結(jié)果至此，問(wèn)題解決。必須在函數(shù)的上下文中。對(duì)程序而言有了上下文調(diào)用幀才有一個(gè)完整的邏輯過(guò)程。 先簡(jiǎn)單介紹下async await： async/await是ES6推出的異步處理方案，目的也很明確：更好的實(shí)現(xiàn)異步編程。 詳細(xì)見(jiàn)阮大神 ES6入門 現(xiàn)在說(shuō)說(shuō)實(shí)踐中遇到的問(wèn)題：使用await報(bào)錯(cuò)Unexpected identifier 先...
摘要：整個(gè)代碼如下組裝默認(rèn)配置的數(shù)據(jù)源，查詢數(shù)據(jù)庫(kù)配置開(kāi)始初始化動(dòng)態(tài)數(shù)據(jù)源數(shù)據(jù)源完畢初始化動(dòng)態(tài)數(shù)據(jù)源共計(jì)條重新加載數(shù)據(jù)源配置總結(jié)以上源碼參考個(gè)人項(xiàng)目基于開(kāi)發(fā)基于前后分離的開(kāi)發(fā)平臺(tái)一起來(lái)聊聊你們是咋用的吧。 業(yè)務(wù)需求 提供所有微服務(wù)數(shù)據(jù)源的圖形化維護(hù)功能 代碼生成可以根據(jù)選擇的數(shù)據(jù)源加載表等源信息 數(shù)據(jù)源管理要支持動(dòng)態(tài)配置，實(shí)時(shí)生效 附錄效果圖showImg(https://segment...
摘要：整個(gè)代碼如下組裝默認(rèn)配置的數(shù)據(jù)源，查詢數(shù)據(jù)庫(kù)配置開(kāi)始初始化動(dòng)態(tài)數(shù)據(jù)源數(shù)據(jù)源完畢初始化動(dòng)態(tài)數(shù)據(jù)源共計(jì)條重新加載數(shù)據(jù)源配置總結(jié)以上源碼參考個(gè)人項(xiàng)目基于開(kāi)發(fā)基于前后分離的開(kāi)發(fā)平臺(tái)一起來(lái)聊聊你們是咋用的吧。 業(yè)務(wù)需求 提供所有微服務(wù)數(shù)據(jù)源的圖形化維護(hù)功能 代碼生成可以根據(jù)選擇的數(shù)據(jù)源加載表等源信息 數(shù)據(jù)源管理要支持動(dòng)態(tài)配置，實(shí)時(shí)生效 附錄效果圖showImg(https://segment...
閱讀 4393·2021-10-13 09:39
閱讀 510·2021-09-06 15:02
閱讀 3254·2019-08-30 15:53
閱讀 1067·2019-08-30 13:04
閱讀 2125·2019-08-30 11:27
閱讀 2039·2019-08-26 13:51
閱讀 2128·2019-08-26 11:33
閱讀 2926·2019-08-26 10:36
