本文主要記錄了在Nodejs開發(fā)過程中遇到過的由數(shù)組特性引起的問題及解決方式，以及對(duì)數(shù)組的靈活應(yīng)用。
本文代碼測(cè)試結(jié)果均基于node v6.9.5
數(shù)組與隊(duì)列
利用數(shù)組對(duì)象方法push/shift可實(shí)現(xiàn)隊(duì)列先進(jìn)先出特性，例如：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
>a=[][]>a.push(2.3.4)3>a.push(2)3>a[2.3.4.2]>a.shift()2>a>[3.4.2] |
數(shù)組與forEach
對(duì)數(shù)組的刪除操作有兩種常見方式：delete和使用splice方法，需要明確他們的區(qū)別。
| 操作/方法 | 說明 |
|---|---|
| splice | 刪除并返回指定的數(shù)組元素，數(shù)組本身長(zhǎng)度會(huì)改變；但不會(huì)free元素對(duì)象 |
| delete | 刪除（free）元素對(duì)象，數(shù)組元素不變，值變?yōu)閡ndefined |
如果要從數(shù)組中徹底刪除某個(gè)元素，使用splice即可：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
> a=[1,2,3][ 1, 2, 3 ]> a.splice(1,1)[ 2 ]> a[ 1, 3 ]> a.length2> a.forEach(function(item, index){console.info("index[", index,"]:", item)});index[ 0 ]: 1index[ 1 ]: 3undefined> |
那么，當(dāng)使用delete刪除某個(gè)元素對(duì)象后，此時(shí)執(zhí)行forEach的效果是什么？
forEach對(duì)含空元素?cái)?shù)組處理機(jī)制
測(cè)試結(jié)果如下
|
1
2
3
4
5
6
7
8
9
10
11
12
|
> a=[1,2,3][ 1, 2, 3 ]> delete a[1]true> a[ 1, , 3 ]> a.length3> a.forEach(function(item, index){console.info("index[", index,"]:", item)});index[ 0 ]: 1index[ 2 ]: 3undefined |
從測(cè)試結(jié)果來看，forEach并不會(huì)遍歷到值為undefined的哪一項(xiàng)。這在實(shí)際應(yīng)用中如何判斷forEach是否結(jié)束是一大挑戰(zhàn)。
解決配合forEach的異步特性應(yīng)用，可為數(shù)組添加prototype來自行管理設(shè)置有效數(shù)據(jù)；
效果如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
> a=[1,2,3][ 1, 2, 3 ]> a.validnum=33> delete a[2]true> a.validnum=22> a[ 1, 2, , validnum: 2 ]> a.length3> a.validnum2> a.forEach(function(item, index){console.info("index[", index,"]:", item)});index[ 0 ]: 1index[ 1 ]: 2undefined> |
補(bǔ)充：Node.js 數(shù)組 forEach 同步處理上下文語句
習(xí)慣了C語言系的思維方式，剛接觸Node.js，它的異步處理讓我頭大。
寫代碼遇到這么一個(gè)場(chǎng)景，需要循環(huán)對(duì)一個(gè)數(shù)組中的元素進(jìn)行處理，全部處理完成后再執(zhí)行一個(gè)last操作。但是JS的異步特性會(huì)使這個(gè)last語句先執(zhí)行，所以花點(diǎn)時(shí)間研究研究forEach。
Talk is cheap. Show me the code.
forEach 用法
forEach用于對(duì)數(shù)組結(jié)構(gòu)進(jìn)行遍歷，看到有人說forEach底層是用for實(shí)現(xiàn)的，沒深究，起碼效果上看是一樣的。forEach的回調(diào)函數(shù)3個(gè)參數(shù)分別是：值、序號(hào)和原數(shù)組。序號(hào)從0開始。
|
1
2
3
4
5
6
7
8
9
|
(() => { let arr = [2, 3, 1]; arr.forEach(function (value, index, array) { console.log(value); console.log(index); console.log(array); console.log('-----'); });})(); |
Output
|
1
2
3
4
5
6
7
8
9
10
11
12
|
20[ 2, 3, 1 ]-----31[ 2, 3, 1 ]-----12[ 2, 3, 1 ]----- |
從結(jié)果上看forEach多次循環(huán)之間是同步的，也就是說都是按順序執(zhí)行的。但是一想到它是JS就感覺不可能同步的。?？梢则?yàn)證一下。
forEach 異步處理多次循環(huán)
這次在forEach加個(gè)定時(shí)任務(wù)，每次循環(huán)操作都延時(shí)value相關(guān)的時(shí)間，模擬比較耗時(shí)的操作。
|
1
2
3
4
5
6
7
8
|
(() => { let arr = [2, 3, 1]; arr.forEach(function (value, index, array) { setTimeout(function () { console.log(value); }, value*100); });})(); |
Output
|
1
2
3
|
123 |
從結(jié)果可以看出耗時(shí)最短的任務(wù)先完成，每次循環(huán)的任務(wù)并不是按循環(huán)的先后順序執(zhí)行的，也就是說異步處理多次循環(huán)。
forEach 上下文也是異步執(zhí)行
回到開始說到的問題了，且不管多次循環(huán)是不是按順序執(zhí)行，我需要forEach中的所有任務(wù)都完成后執(zhí)行一條數(shù)據(jù)來通知我任務(wù)全部完成了。
|
1
2
3
4
5
6
7
8
9
|
(() => { let arr = [2, 3, 1]; arr.forEach(function (value, index, array) { setTimeout(function () { console.log(value); }, value*100); }); console.log('All the work is done');})(); |
Output
|
1
2
3
4
|
All the work is done123 |
從結(jié)果來看，上下文的語句也不是同步的，forEach循環(huán)中的任務(wù)沒有完成就通知所有任務(wù)都完成了，顯然不符合預(yù)期。
針對(duì)這個(gè)問題看了好多個(gè)博客，都沒有找到合適的解決方法，最后只能想到用Promise.all來勉強(qiáng)實(shí)現(xiàn)這個(gè)功能。
Promise.all 實(shí)現(xiàn) forEach 上下文語句同步處理
把上面的代碼改成Promise.all的結(jié)構(gòu)。每個(gè)循環(huán)中執(zhí)行結(jié)束調(diào)用resolve()，我們知道Promise.all的then函數(shù)，只有所有的Promise都執(zhí)行完成才會(huì)觸發(fā)，這樣好像能滿足我們的需求。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
(() => { let arr = [2, 3, 1]; let proArr = []; arr.forEach(function (value, index) { proArr[index] = new Promise(function (resolve) { setTimeout(function () { console.log(value); resolve(); }, value*100); }); }); Promise.all(proArr).then(()=>{ console.log('All the work is done'); })})(); |
Output
|
1
2
3
4
|
123All the work is done |
從結(jié)果來看，滿足了我們的需求。
可能還存在的問題
想到JS異步特性，突然發(fā)現(xiàn)可能這個(gè)方法還存在個(gè)問題。
這里每次 forEach 剛進(jìn)入就對(duì) Promise 數(shù)組進(jìn)行了賦值操作，這個(gè)操作時(shí)間應(yīng)該非常短，循環(huán)3次都賦值完成后才調(diào)用最后的Promise.all語句。
但是如果這個(gè)數(shù)組非常大，這個(gè)循環(huán)賦值的操作非常耗時(shí)間的話，假如只完成了一半的賦值操作，那么執(zhí)行最后這個(gè) Promise.all 的時(shí)候傳入的 Promise 數(shù)組可能并不是包含所有 Promise 的數(shù)組。
這樣的話 Promise.all 等待的就只有一半的操作，Promise.all 等待的時(shí)候，這個(gè)數(shù)組后面被賦值的 Promise 不知道會(huì)不會(huì)被等待。
剛接觸JS不明白實(shí)現(xiàn)機(jī)制，只能實(shí)驗(yàn)來驗(yàn)證一下是否存在這個(gè)問題。接下來用把這個(gè)數(shù)組弄大一些，請(qǐng)?jiān)徫矣米钌倒鲜降姆绞礁愦笏?/p>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
(() => { let arr = [2, 3, 1, 2, 3, 1, 2, 3, 1, 2]; // 10 arr= arr.concat(arr); // 2^1 * 10 arr= arr.concat(arr); // 2^2 * 10 arr= arr.concat(arr); // 2^3 arr= arr.concat(arr); // 2^4 arr= arr.concat(arr); // 2^5 arr= arr.concat(arr); arr= arr.concat(arr); arr= arr.concat(arr); arr= arr.concat(arr); arr= arr.concat(arr); // 2^10 arr= arr.concat(arr); arr= arr.concat(arr); arr= arr.concat(arr); arr= arr.concat(arr); arr= arr.concat(arr); // 2^15 arr= arr.concat(arr); arr= arr.concat(arr); // 2^17 * 10// arr= arr.concat(arr); // 2^18 * 10 console.log(arr.length); let proArr = []; arr.forEach(function (value, index) { proArr[index] = new Promise(function (resolve) { setTimeout(function () { console.log(value); resolve(); }, value*100); }); }); Promise.all(proArr).then(()=>{ console.log('All the work is done'); console.log(arr.length); }).catch(function (err) { console.log(err); })})(); |
經(jīng)過測(cè)試在我這個(gè)電腦上當(dāng)數(shù)組長(zhǎng)度為2^18 * 10的時(shí)候，Promise報(bào)錯(cuò) RangeError: Too many elements passed to Promise.all。
當(dāng)數(shù)組長(zhǎng)度為2^17 * 10 即2621440的時(shí)候，會(huì)正常運(yùn)行。測(cè)試了幾次，最后的執(zhí)行命令輸出的All the work is done始終在最后輸出（因?yàn)榻K端緩沖區(qū)太小，所以使用node xx.js > log.txt重定向的方式把輸出結(jié)果重定向到文件查看）。
當(dāng)然應(yīng)用中也不會(huì)有這么大的數(shù)組，從結(jié)果看的話，就是實(shí)際應(yīng)用中不存在上面考慮可能出現(xiàn)的問題。
也就是說可以用 Promise.all 實(shí)現(xiàn) forEach 上下文語句同步處理。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持服務(wù)器之家。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教。
原文鏈接：https://blog.csdn.net/WificamSDK7/article/details/78460408
