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