解構拆解

語法： ... 三個點為收回剩下值

方法一 : slice()

// 1.單獨刪減組裝用法
// 語法 slice() (切片)
// slice(0,3) 切分陣列 (含頭不含尾)!!
// 所以是切分順序從第 0 個到第 2 個 !!
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const index = 3;

// 要去除 index=3 ,第四個數字(陣列第一個數字順序為0)
console.log([...arr.slice(0, index), ...arr.slice(index + 1)]);

// arr = [1,2,3,5,6,7,8,9]

方法二 : [...rest] (使用新物件，去收回剩下數值)

// 拆解 object 以及組裝新的 object
const foo = ['a','b','c']    //arr
const bar = {              //object
    a:1,
    b:2,
    c:3
}

const { a } = bar 
// a = bar.x ; a = 1

const { a, ...rest} = bar
console.log("rest",rest)
// 不要 a 數值，
// 建立新 object (rest) 來收回剩下的數值
// rest{b:2,c:3}

const {x,y,...rest2} =foo
console.log(x,y,rest2)
// 不要 x,y,建立新 object (rest2) 收回剩下的數值
// 因為 foo 為陣列 list 所以不會有命名，
// 但可以使用 rest2 去呼叫做重複使用
// x=a,y=b,rest2=c

const { x, y} = foo
// bar 為 object 型態
//

以上 code 範例以及更多應用

splice()

程式碼：

HTML:

<ul style="padding:50px;background:#000;color:#fff" class="list"></ul>

JS: ```javascript var country = [ { farmer:'卡斯伯' } ,{ farmer:'查理' },{ farmer:'約翰' } ] var list = document.querySelector('.list');

//更新農場資料 function updateList(){ var str = ''; var len = country.length; for(var i = 0;len>i;i++){ str+='

'+country[i].farmer+'

' } list.innerHTML = str; } updateList();

//確認點擊的農夫是誰 function checkList(e){ var num = e.target.dataset.num; // console.log(e.target.nodeName); if(e.target.nodeName !== 'LI'){return}; country.splice(num,1); updateList(); } list.addEventListener('click',checkList,false); ```

1. 先執行updateList() 渲染畫面加上 'li' 以及加上 data-num ，
2. 點擊事件觸發 checkList ，
3. 去 if 判斷 如果等於 'li' ，
4. 就會 splice() 刪除點選的 'li'，
5. 再執行一次 update 渲染畫面，再次加上 'li' 以及加上 data-num