[Day20] jsES6語法-展開與其餘參數

合併陣列

一般來說，如果我們要合併陣列可以使用陣列內建的方法 concat 來合併陣列，但是我們也可以透過展開方式來合併陣列，我們可以使用 …arr1 ,…arr2 來將陣列的值取出，並且將他們合併到一個陣列 arr3 中。

let arr1 = ['Leo','Peter','Amy'];
let arr2 = ['Alex','Ray'];
let arr3 = arr1.concat(arr2);
console.log(arr3);

let arr1 = ['Leo','Peter','Amy'];
let arr2 = ['Alex','Ray'];
let arr3 = [...arr1, ...arr2];//...將陣列的值取出
console.log(arr3);

淺複製觀念

如果我們今天將 arr2 陣列設定成 arr1 陣列，此時當我們將 arr2 陣列的值 push 一個值 Harry，此時我們如果使用 console.log 顯示出陣列，會發現 arr1 也增加了 Harry 的值，原因在於我們是傳 arr1 的參考給 arr2 ，因此當我們更動 arr2 的值，同樣也會修改到 arr1 的值。如果我們想要修改 arr2 的值卻不影響 arr1 ，此時我們將 arr2 設定成 […arr1] ，陣列 arr2 就會設定成從 arr1 取出的值，但是不是傳參考，因此當 arr2 更改時，arr1 不會跟著變動。

let arr1 = ['Leo','Peter','Amy']; 
let arr2 = arr1;
arr2.push('Harry');
console.log(arr1);
console.log(arr2);
// 傳參考

let arr1 = ['Leo','Peter','Amy']; 
let arr2 = [...arr1]
arr2.push('Harry');
console.log(arr1);
console.log(arr2);
//shallow copy

類陣列

如果我們使用 document.querySelectorAll(‘li’) 來選取 li 元素，此時當我們用控制台打開 li 時，會發現il 裡面顯示是一個 NodeList ，它是一個類陣列，當我們如果仔細看裡面的東西會發現，少了很多陣列原生的方法，像是 concat。如果我們要將類陣列轉換成陣列，可以使用展開陣列的方式，像是 arrli = […li] 來將累陣列變成陣列。

<body>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>
<script src="js/all.js"></script>

1 2	let li = document.querySelectorAll('li'); let arrli = [...li] ;

其餘參數

如果我們不知道要傳入的參數數量有多少，也可以在參數使用…用法，其餘參數用法，那麼它就會自動將參數轉換成陣列的形式。

function show(...money){
    console.log(money);
}
show(100,400,500);