# JavaScript 解構拆解



# 解構拆解

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

### 方法一 :  `slice()`
```javascript=
// 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]`  (使用新物件，去收回剩下數值)
```javascript=
// 拆解 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 範例以及更多應用](https://codesandbox.io/s/jsspread-chonggouzuzhuang-tlv1l?file=/src/index.js)


### splice()

程式碼：
> HTML:
```htmlembedded=
<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+='<li data-num="'+i+'">'+country[i].farmer+'</li>'
  }
  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