ES6 module && 任意兩個整數相加 && async/await、promise和setTimeout的執行順序
一、ES6module:
1.它是輸出成一個物件的引用,而不是值的複製;
2.import是非同步載入;
3.模組是在靜態程式碼編譯的階段,就編譯成了一種輸出的介面。而ES5的commonJS是在執行時載入執行的
ES6module的引入:
如果是<script>標籤形式引入,需要加type="model",標籤內可以新增defer或async,兩個的區別是:
defer:js模組下載完成後,會等到DOM渲染完成才去執行;
async:js模組下載完成後會立馬執行,如果此時有DOM在渲染,那麼DOM的渲染會暫時中止,等到JS執行完成後,再繼續接著執行剛剛被中止的DOM渲染程序。
二、任意兩個整數相加:
// 兩數相加 solve (v, l) { let r = [] let sup = 0 let sub = v.length - l.length let s = sub >= 0 ? v : l let f = new Array(Math.abs(sub)).fill('0').join('') let t = sub > 0 ? f + l : f + v for (let i = s.length - 1; i >= 0; i--) { let sum= parseInt(s[i]) + parseInt(t[i]) + sup if (i === 0) { r = [sum, ...r] } else { if (sum >= 10) { r = [sum % 10, ...r] } else { r = [sum, ...r] } sup = Math.floor(sum / 10) } } // console.log(r.join(''))return parseInt(r.join('')) }
三、async/await、promise和setTimeout寫出以下程式碼的列印順序:
async function async1() { console.log('async1 start'); await async2(); console.log('asnyc1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(() => { console.log('setTimeOut'); }, 0); async1(); new Promise(function (reslove) { console.log('promise1'); reslove(); }).then(function () { console.log('promise2'); }) console.log('script end');
結果:
- script start
- async1 start
- async2
- promise1
- script end
- asnyc1 end
- promise2
- setTimeOut
分析:
1、執行console.log('script start')
,輸出script start
;
2、執行setTimeout,是一個非同步動作,放入巨集任務非同步佇列中;
3、執行async1()
,輸出async1 start
,繼續向下執行;
4、執行async2()
,輸出async2
,並返回了一個promise物件,await讓出了執行緒,把返回的promise加入了微任務非同步佇列,所以async1()
下面的程式碼也要等待上面完成後繼續執行;
5、執行new Promise
,輸出promise1
,然後將resolve
放入微任務非同步佇列;
6、執行console.log('script end')
,輸出script end
;
7、到此同步的程式碼就都執行完成了,然後去微任務非同步佇列裡去獲取任務
8、接下來執行resolve(async2返回的promise返回的)
,輸出了async1 end
。
9、然後執行resolve(new Promise的)
,輸出了promise2
。
10、最後執行setTimeout
,輸出了settimeout