今天在開發項目過程當中,遇到了一個需求,先請求了30個數據,放在一個列表中,並渲染展現出來,而後又請求了另外的30個數據,放在一個列表中,想在前一個數據的後面繼續展現,即將第二次請求的來的數據列表跟第一次請求的數據列表作一個合併,須要用到數據的合併,接下來給你們介紹一下javascript中數據合併的幾個方法javascript
做用: concat()方法用於鏈接兩個及以上的數組,而且該方法不會改變原來的數組
語法: array1.concat(array2,array3,…,arrayX) /array1.concat(1,2,3)
用法一:vue
let array1 = [100,200] const array2 = [5,6,7,8] const array3 = [10,11,12,13,14] //由於concat()方法不會改變原數組,因此這裏會返回一個新的數組,定義給咱們的newarray const newarray1 = array1.concat(array2) const newarray2 = array1.concat(array2,array3) console.log(newarray1, newarray2) //驗證原數組array1是否有改變 console.log(array1)
輸出結果爲:java
newarray1:[100,200,5,6,7,8] newarray2:[100,200,5,6,7,8,10,11,12,13,14] array1: [100,200]
總結:使用concat()方法時,若是傳入的參數是數組,那會將它們逐一遍歷,將數組中每一個元素按順序添加到被合併數組的末尾,最終返回一個新的數組,原數組不變。web
用法二:數組
let array1 = [100,200] const newarray3 = array1.concat(56,79,84) console.log(newarray3)
輸出結果爲:svg
newarray3:[100,200,56,79,84]
總結:使用concat()方法時,若是傳入參數是數字,那麼就會將每一個數字按順序添加到被合併數組的末尾。spa
做用: 這是一種特殊的語法,能夠將items跟另一個數組合並,相似於上面的concat()方法,但不一樣的是,push(…items)會改變原數組
語法: array1.push(…array2)
用法:code
let array1 = [100,200] const array2 = [5,8,9,10] array1.push(...array2) //由於該方法會改變原數組,因此這裏直接打印array1 console.log(array1)
輸出結果:xml
array1: [100,200,5,8,9,10]
總結:在開發項目時,通常最方即是用這種方法,由於能夠直接改變原數據。token
其實還有別的數組組合的方法,例如用for循環就能夠簡單實現數組的組合了,這裏就不作多講解了。
這是我在開發vue.js項目實戰第三天中遇到的一個小問題,本身經過查詢資料已經解決了,但願個人解決辦法能對你們有所幫助。若是你們感興趣,能夠關注一波,天天跟你們分享一些問題和解決辦法,你們也能夠跟我分享一下大家的經驗。